纯css实现立体正方体盒子照片切换幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:纯css实现立体正方体盒子照片切换幻灯片效果代码,无js代码。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> html, body { width: 100%; height: 100%; background: #FF0074; color: #fff; font-family: "Open Sans", sans-serif; font-size: 11px; } .title { text-align: center; margin: 40px; } .title h1, .title p { margin: 0; } .slider { width: 200px; height: 200px; margin: auto; -webkit-perspective: 600px; perspective: 600px; } .slider * { -webkit-transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5); transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5); } .container { width: inherit; height: inherit; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(0deg) rotateX(0deg); transform: rotateY(0deg) rotateX(0deg); } .slide, .slide:after, .slide:before { display: block; width: inherit; height: inherit; background: url('//repo.bfw.wiki/bfwrepo/image/5fcd6f5f72362.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90'); position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; background-size: cover; background-position: center; } .slide.x { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } .slide.x:after { content: ''; background-image: url('//repo.bfw.wiki/bfwrepo/image/5fcd6f952cb56.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90'); -webkit-transform: translateZ(100px) rotateZ(-90deg); transform: translateZ(100px) rotateZ(-90deg); } .slide.x:before { content: ''; background-image: url('//repo.bfw.wiki/bfwrepo/image/5fcd6f952cb56.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90'); -webkit-transform: translateZ(-100px) rotateZ(-90deg); transform: translateZ(-100px) rotateZ(-90deg); } .slide.y { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } .slide.y:after { content: ''; background-image: url('//repo.bfw.wiki/bfwrepo/image/5e44fe28d3cc3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90'); -webkit-transform: translateZ(100px) scale(-1); transform: translateZ(100px) scale(-1); } .slide.y:before { content: ''; background-image: url('//repo.bfw.wiki/bfwrepo/image/5e44fe28d3cc3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90'); -webkit-transform: translateZ(-100px); transform: translateZ(-100px); } .slide.z { -webkit-transform: rotateX(0); transform: rotateX(0); } .slide.z:after { content: ''; background-image: url('//repo.bfw.wiki/bfwrepo/image/5e44fe28d3cc3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90'); -webkit-transform: translateZ(100px); transform: translateZ(100px); } .slide.z:before { content: ''; background-image: url('//repo.bfw.wiki/bfwrepo/image/5e44fe28d3cc3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90'); -webkit-transform: translateZ(-100px); transform: translateZ(-100px); } .container { -webkit-animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1..........完整代码请登录后点击上方下载按钮下载查看
网友评论0