如何使用html+css制作一个发光立方体特效
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍“如何使用html+css制作一个发光立方体特效”，在日常操作中，相信很多人在如何使用html+css制作一个发光立方体特效问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用html+css制作一个发光立方体特效”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
一.话不多，看效果
二.实现（附完整代码）
1.定义标签：
<div class="container"> <div class="q1"></div> <div class="h3"></div> <div class="z3"></div> <div class="y4"></div> <div class="s5"></div> <div class="x6"></div> </div>2.定义外层盒子css：
* { padding: 0; margin: 0; box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: black; } .container { position: relative; width: 300px; height: 300px; transform-style: preserve-3d; animation: zuan 6s linear alternate infinite; } @keyframes zuan { 0% { transform: rotateX(-30deg) rotateY(0deg); } 100% { transform: rotateX(-30deg) rotateY(360deg); } }transform-style 让转换的子元素保留3D转换
animation 开启动画
不了解3D的可以看我的这篇文章：
教你使用html+css制作一个3D立体相册
3.定义盒子6个面分别的样式：
.q1, .h3, .z3, .y4 { position: absolute; width: 100%; height: 100%; background-image: linear-gradient(rgb(26, 26, 26), rgb(9, 255, 9)); } .q1 { transform: translateZ(150px); } .h3 { transform: rotateY(180deg) translateZ(150px); } .z3 { transform: rotateY(-90deg) translateZ(150px); } .y4 { transform: rotateY(90deg) translateZ(150px); } .s5, .x6 { position: absolute; width: 100%; height: 100%; } .s5 { transform: rotateX(90deg) translateZ(150px); background-color: rgb(26, 26, 26); } .x6 { background-color: rgb(9, 255, 9); transform: rotateX(-90deg) translateZ(250px); box-shadow: 0 0 150px 30px rgb(9, 255, 9); filter: blur(30px); }完整代码：
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: black; } .container { position: relative; width: 300px; height: 300px; transform-style: preserve-3d; animation: zuan 6s linear alternate infinite; } @keyframes zuan { 0% { transform: rotateX(-30deg) rotateY(0deg); } 100% { transform: rotateX(-30deg) rotateY(360deg); } } .q1, .h3, .z3, .y4 { position: absolute; width: 100%; height: 100%; background-image: linear-gradient(rgb(26, 26, 26), rgb(9, 255, 9)); } .q1 { transform: translateZ(150px); } .h3 { transform: rotateY(180deg) translateZ(150px); } .z3 { transform: rotateY(-90deg) translateZ(150px); } .y4 { transform: rotateY(90deg) translateZ(150px); } .s5, .x6 { position: absolute; width: 100%; height: 100%; } .s5 { transform: rotateX(90deg) translateZ(150px); background-color: rgb(26, 26, 26); } .x6 { background-color: rgb(9, 255, 9); transform: rotateX(-90deg) translateZ(250px); box-shadow: 0 0 150px 30px rgb(9, 255, 9); filter: blur(30px); } </style> </head> <body> <div class="container"> <div class="q1"></div> <div class="h3"></div> <div class="z3"></div> <div class="y4"></div> <div class="s5"></div> <div class="x6"></div> </div> </body></html>到此，关于“如何使用html+css制作一个发光立方体特效”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
