先上效果图<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type=&qu ...
先上效果图
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #content{ width: 500px; height: 300px; margin: 40px auto; position: relative; transform-style: preserve-3d; } #content>div{ width: 100%; height: 100%; position: absolute; transform-origin: center bottom; } #content img{ width: 100%; height: 100%; } #next{ position: absolute; top:190px; left: calc(33% - 60px); } #prev{ position: absolute; top: 190px; left: calc(68% + 30px); } @keyframes next{ //创建一个动画这是一个翻到下面的效果 from{ -wbelit-transform: perspective(1000px) rotateX(0deg); /* 开始位置是 0°*/ opacity: 1; //初始透明为1 } to{ -webkit-transform: perspective(1000px) rotateX(-180deg); /*结束位置是 180°*/ opacity: 0; //结束透明为0 } } @keyframes prev{ //创建一个由上边翻到上边的动画 0%{ -webkit-transform: perspective(1000px) rotateX(180deg); /* 初始开始位置 */ opacity:0; //初始为透明 } 57% { -webkit-transform: perspective(1000px) rotateX(-16deg); /* 动画进行到 56% 的时候他为 -16° */ opacity:1; //透明已经为1 了 } 66% { -webkit-transform: perspective(1000px) rotateX(14deg); /* 再回到 14° 的位置 */ } 74% { -webkit-transform: perspective(1000px) rotateX(-12deg); /* 再回到 -12°的位置 */ } 81% { -webkit-transform: perspective(1000px) rotateX(10deg); /* 再回到 10°的位置 */ } 87% { -webkit-transform: perspective(1000px) rotateX(-8deg); /* 再回到 -8°的位置 */ } 92% { -webkit-transform: perspective(1000px) rotateX(6deg); /* 再回到 6° 的位置 */ } 96% { -webkit-transform: perspective(1000px) rotateX(-4deg); /* 再回到 -4° 的位置 */ } 100% { -webkit-transform: perspective(1000px) rotateX(0deg); /* 最后回归 0° */ }
原标题:css3+javascript实现翻页幻灯片
关键词:JavaScript
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。