这篇文章主要介绍“如何使用html+CSS制作一个发光立方体特效”，在日常操作中，相信很多人在如何使用html+css制作一个发光立方体特效问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用html+cs
这篇文章主要介绍“如何使用html+CSS制作一个发光立方体特效”，在日常操作中，相信很多人在如何使用html+css制作一个发光立方体特效问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用html+css制作一个发光立方体特效”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
<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> * { 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立体相册
.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制作一个发光立方体特效”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
--结束END--
本文标题: 如何使用html+css制作一个发光立方体特效
本文链接: https://www.lsjlt.com/news/353617.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0