css实现三维划桨图片切换过渡效果代码
代码语言:html
所属分类:幻灯片
代码描述:css实现三维划桨图片切换过渡效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> * { margin: 0; padding: 0; } body { text-align: center; background-color: #191919; } li { list-style: none; } #box { position: relative; width: 1050px; height: 360px; margin: 200px auto 10px; } #box ul li { position: absolute; left: 0; top: 0; width: 1050px; height: 360px; display: none; } #show { position: absolute; left: 0; top: 0; width: 1050px; height: 360px; perspective: 800px; /*井深*/ display: none; } #show div { position: relative; width: 525px; height: 72px; float: left; transform-style: preserve-3d; /*创遭3d环境*/ } #show div em { position: absolute; left: 0; top: 0; display: block; width: 525px; height: 72px; } #show div .em1 { /*前面*/ background: url("img/1.png"); transform: translateX(5px); } #show div .em2 { /*后面*/ background: url("img/2.png"); transform: translateZ(-5px) rotateX(-180deg); } #show div span { position: absolute; right: 0; bottom: 0; background-color: #999; } #show div span.span1 { width: 10px; height: 72px; transform-origin: right; transform: translateZ(-5px) rotateY(-90deg); } #show div span.span2 { width: 525px; height: 10px; transform-origin: bottom; transform: translateZ(-5px) rotateX(-90deg); } #show div.div2 .span1 { left: 0; transform-origin: left; transform: translateZ(5px) rotateY(90deg); } /*规定左前动画旋转特效*/ @keyframes move1{ 0%{ transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg); animation-timing-function: ease;/*运动速度曲线*/ } 60%{ transform: rotateX(0deg) rotateZ(0deg) rotateY(-60deg); animation-timing-function: ease-in;/*运动速度曲线*/ } 80%{ transform: rotateX(90deg) rotateZ(10deg) rotateY(-45deg); animation-timing-function: ease-out;/*运动速度曲线*/ } 100%{ transform: rotateX(180deg) rotateZ(0deg) rotateY(0deg); } } @keyframes move2{ 0%{ transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg); animation-timing-function: ease;/*运动速度曲线*/ } 60%{ transform: rotateX(0deg) rotateZ(0deg) rotateY(60deg); animation-timing-function: ease-in;/*运动速度曲线*/ } 80%{ transform: rotateX(90deg) rotateZ(-10deg) rotateY(45deg); animation-timing-function: ease-out;/*运动速度曲线*/ } 100%{ transform: rotateX(180deg) rotateZ(0deg) rotateY(0deg); } } </style> </head> <body> <input type="button" id="prev" value="上一张"/> <input type="button" id="next" value="下一张"/> <div id="box"> <ul> <li><img src="//repo.bfw.wiki/bfwrepo/image/5e6831472e8f7.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_1050,h_360,/quality,q_90" alt="pho"/></li> <li><img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_1050,h_360,/quality,q_90" alt="pho"/></li> </ul> <div id="show"></div> </div> <script> var oShow = document.getElementById("show"); var oBox = document.getElementById('box'); var prev = document.getElementById("prev"); var next = document.getElementById(&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0