这次给大家带来的是用css3做出立方体旋转发光的特效，怎样用css3做出这么炫酷的特效呢？以下是代码案列，感兴趣的朋友也可以自己动手做一份试试。
nbsp;html>CSS3 3D立方体旋转发光动画特效 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 .cubefront {color: deeppink;-webkit-transform: translateZ(25vh);transform: translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.cube .cuberight {color: lightcoral;-webkit-transform: rotateY(90deg) translateZ(25vh);transform: rotateY(90deg) translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.cube .cubeleft {color: skyblue;-webkit-transform: rotateY(270deg) translateZ(25vh);transform: rotateY(270deg) translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.cube .cubeback {color: seagreen;position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-transform: rotateY(180deg) translateZ(25vh);transform: rotateY(180deg) translateZ(25vh);}.cube .cubetop {color: mediumseagreen;-webkit-transform: rotateX(90deg) translateZ(25vh);transform: rotateX(90deg) translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.cube .cubebottom {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);}}
登录后复制
立方体旋转发光的特效的代码就是这么多了，更多精彩请关注【创想鸟】其它相关文章！
相关阅读：
使用CSS3做出带有光晕流星旋转光环的效果
立即学习“前端免费学习笔记（深入）”；
使用CSS3做出带有光晕流星旋转光环的效果
立即学习“前端免费学习笔记（深入）”；
使用CSS3做出带有光晕流星旋转光环的效果
立即学习“前端免费学习笔记（深入）”；
以上就是怎样用css3技术做出立方体旋转发光的特效的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3121347.html
