纯css实现立体盒子幻灯片旋转效果代码
代码语言:html
所属分类:幻灯片
代码描述:纯css实现立体盒子幻灯片旋转效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <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 { position: absolute; top: 0; bottom: 0; right: 0; left: 0; 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'); 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'); -webkit-transform: translateZ(100px) rotateZ(-90deg); transform: translateZ(100px) rotateZ(-90deg); } .slide.x:before { content: ''; background-image: url('//repo.bfw.wiki/bfwrepo/image/5fcd6fcbbc85b.png'); -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/5fcd6ff91547d.png'); -webkit-transform: translateZ(100px) scale(-1); transform: translateZ(100px) scale(-1); } .slide.y:before { content: ''; background-image: url('//repo.bfw.wiki/bfwrepo/image/5fcd7019d4542.png'); -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/5fcd703ad8c77.png'); -webkit-transform: translateZ(100px); transform: translateZ(100px); } .slide.z:before { content: ''; background-image: url('//repo.bfw.wiki/bfwrepo/image/5fcd70565eba5.png'); -webkit-transform: translateZ(-100px); transform: translateZ(-100px); } .container { -webkit-animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2); animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2); } @-webkit-keyframes rotate { 0%, 10% {-webkit-transform: rotateY(0deg) rotateX(0deg);transform: rotateY(0deg) rotateX(0deg);} 15%, 20% {-webkit-transform: rotateY(180deg) rotateX(0deg);transform: rotateY(180deg) rotateX(0deg);} 25%, 35% {-webkit-transform: rotateY(180deg) rotateX(270deg);transform: rotateY(180deg) rotateX(270deg);} 40%, 50% {-webkit-transform: rotateY(180deg) rotateX(90deg);transform: rotateY(180deg) rotateX(90deg);} 55%, 65% {-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0