CSS3立方体旋转发光动画特效.zip资源-CSDN文库

共2个文件

jpg：1个

html：1个

版权申诉

javascript

jQuery

HTML5

107 浏览量 2022-11-17 21:17:46 上传评论收藏 20KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS3立方体旋转发光动画特效.zip （2个子文件）

CSS3立方体旋转发光动画特效

CSS3立方体旋转发光动画特效.jpg 27KB

jiaoben5057

index.html 4KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3立方体旋转发光动画特效 - 网页模板</title> <style> body { margin: 0; overflow: hidden; width: 100vw; height: 100vh; background: #222; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .world { -webkit-perspective: 800px; perspective: 800px; width: 100vh; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cube { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 50vh; height: 50vh; position: relative; -webkit-animation: rotator 4.5s linear infinite; animation: rotator 4.5s linear infinite; outline: 0; } .cube * { background: #000; box-shadow: 0 0 3vh currentColor; -webkit-transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out; transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out; } .cube:hover * { background: currentColor; box-shadow: 0 0 20vh currentColor; } .cube .cube__front { color: deeppink; -webkit-transform: translateZ(25vh); transform: translateZ(25vh); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cube .cube__right { color: lightcoral; -webkit-transform: rotateY(90deg) translateZ(25vh); transform: rotateY(90deg) translateZ(25vh); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cube .cube__left { color: skyblue; -webkit-transform: rotateY(270deg) translateZ(25vh); transform: rotateY(270deg) translateZ(25vh); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cube .cube__back { color: seagreen; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: rotateY(180deg) translateZ(25vh); transform: rotateY(180deg) translateZ(25vh); } .cube .cube__top { color: mediumseagreen; -webkit-transform: rotateX(90deg) translateZ(25vh); transform: rotateX(90deg) translateZ(25vh); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cube .cube__bottom { color: dodgerblue; -webkit-transform: rotateX(270deg) translateZ(25vh); transform: rotateX(270deg) translateZ(25vh); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @-webkit-keyframes rotator { 0% { -webkit-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); } 100% { -webkit-transform: rotateX(360deg) rotateY(360deg); transform: rotateX(360deg) rotateY(360deg); } } @keyframes rotator { 0% { -webkit-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); } 100% { -webkit-transform: rotateX(360deg) rotateY(360deg); transform: rotateX(360deg) rotateY(360deg); } } </style> </head> <body> <div class="world"> <div class="cube" tabindex="0"> <div class="cube__front"></div> <div class="cube__back"></div> <div class="cube__left"></div> <div class="cube__right"></div> <div class="cube__top"></div> <div class="cube__bottom"></div> </div> </div> </body> </html>

评论收藏

内容反馈

版权申诉