【HTML】简单制作一个3D动画效果重叠圆环

前言

开始

HTML部分

CSS部分

效果图

总结

前言

无需多言，本文将详细介绍一段代码，具体内容如下：

开始

首先新建文件夹，创建两个文本文档，其中HTML的文件名改为[index.html]，CSS的文件名改为[style.css]，创建好后右键用文本文档打开，再把下面相对应代码填入后保存即可。

HTML部分

下面HTML代码构建了一个包含动态效果的网页布局，通过定义一系列的<div>元素，并利用CSS变量来控制每个元素的动画和样式属性，从而实现了一个视觉上富有动感和交互性的界面。这些元素被组织在一个名为“cont”的容器内，每个子元素“ac”都有一个唯一的动画属性值，这些值在CSS或JavaScript中被用来定制每个元素的行为，共同创造出一个具有吸引力和功能性的网页设计。

<!DOCTYPE html><!-- 声明文档类型为HTML5，这是创建现代网页的基础。 --><html lang="en" ><!-- 根元素，设置语言为英语，有助于搜索引擎优化和多语言支持。 -->
<head><meta charset="UTF-8"><!-- 设置字符编码为UTF-8，确保网页可以正确显示多语言内容。 --><title>雷神 Leo</title><!-- 网页标题，显示在浏览器标签页上，同时也是搜索引擎结果中的标题。 --><link rel="stylesheet" href="./style.css"><!-- 引入外部CSS文件，用于网页样式设计，提升用户界面体验。 --></head>
<body>
<div class="cont" style="--t:360"><!-- 使用CSS变量--t设置容器的旋转角度，这里设置为360度，意味着容器会完整旋转一圈。 --><div class="ac" style="--a:1"></div><!-- 一系列的div元素，每个都包含CSS变量--a，用于控制每个子元素的动画属性。每个div都有一个独特的--a值，这在CSS或JavaScript中可以用来控制每个元素的特定样式或行为。 --><div class="ac" style="--a:2"></div><div class="ac" style="--a:3"></div><div class="ac" style="--a:4"></div><div class="ac" style="--a:5"></div><div class="ac" style="--a:6"></div><div class="ac" style="--a:7"></div><div class="ac" style="--a:8"></div><div class="ac" style="--a:9"></div><div class="ac" style="--a:10"></div><div class="ac" style="--a:11"></div><div class="ac" style="--a:12"></div><div class="ac" style="--a:13"></div><div class="ac" style="--a:14"></div><div class="ac" style="--a:15"></div><div class="ac" style="--a:16"></div><div class="ac" style="--a:17"></div><div class="ac" style="--a:18"></div><div class="ac" style="--a:19"></div><div class="ac" style="--a:20"></div><div class="ac" style="--a:21"></div><div class="ac" style="--a:22"></div><div class="ac" style="--a:23"></div><div class="ac" style="--a:24"></div><div class="ac" style="--a:25"></div><div class="ac" style="--a:26"></div><div class="ac" style="--a:27"></div><div class="ac" style="--a:28"></div><div class="ac" style="--a:29"></div><div class="ac" style="--a:30"></div><div class="ac" style="--a:31"></div><div class="ac" style="--a:32"></div><div class="ac" style="--a:33"></div><div class="ac" style="--a:34"></div><div class="ac" style="--a:35"></div><div class="ac" style="--a:36"></div><div class="ac" style="--a:37"></div><div class="ac" style="--a:38"></div><div class="ac" style="--a:39"></div><div class="ac" style="--a:40"></div><div class="ac" style="--a:41"></div><div class="ac" style="--a:42"></div><div class="ac" style="--a:43"></div><div class="ac" style="--a:44"></div><div class="ac" style="--a:45"></div><div class="ac" style="--a:46"></div><div class="ac" style="--a:47"></div><div class="ac" style="--a:48"></div><div class="ac" style="--a:49"></div><div class="ac" style="--a:50"></div><div class="ac" style="--a:51"></div><div class="ac" style="--a:52"></div><div class="ac" style="--a:53"></div><div class="ac" style="--a:54"></div><div class="ac" style="--a:55"></div><div class="ac" style="--a:56"></div><div class="ac" style="--a:57"></div><div class="ac" style="--a:58"></div><div class="ac" style="--a:59"></div><div class="ac" style="--a:60"></div><div class="ac" style="--a:61"></div><div class="ac" style="--a:62"></div><div class="ac" style="--a:63"></div><div class="ac" style="--a:64"></div><div class="ac" style="--a:65"></div><div class="ac" style="--a:66"></div><div class="ac" style="--a:67"></div><div class="ac" style="--a:68"></div><div class="ac" style="--a:69"></div><div class="ac" style="--a:70"></div><div class="ac" style="--a:71"></div><div class="ac" style="--a:72"></div><div class="ac" style="--a:73"></div><div class="ac" style="--a:74"></div><div class="ac" style="--a:75"></div><div class="ac" style="--a:76"></div><div class="ac" style="--a:77"></div><div class="ac" style="--a:78"></div><div class="ac" style="--a:79"></div><div class="ac" style="--a:80"></div><div class="ac" style="--a:81"></div><div class="ac" style="--a:82"></div><div class="ac" style="--a:83"></div><div class="ac" style="--a:84"></div><div class="ac" style="--a:85"></div><div class="ac" style="--a:86"></div><div class="ac" style="--a:87"></div><div class="ac" style="--a:88"></div><div class="ac" style="--a:89"></div><div class="ac" style="--a:90"></div><div class="ac" style="--a:91"></div><div class="ac" style="--a:92"></div><div class="ac" style="--a:93"></div><div class="ac" style="--a:94"></div><div class="ac" style="--a:95"></div><div class="ac" style="--a:96"></div><div class="ac" style="--a:97"></div><div class="ac" style="--a:98"></div><div class="ac" style="--a:99"></div><div class="ac" style="--a:100"></div><div class="ac" style="--a:101"></div><div class="ac" style="--a:102"></div><div class="ac" style="--a:103"></div><div class="ac" style="--a:104"></div><div class="ac" style="--a:105"></div><div class="ac" style="--a:106"></div><div class="ac" style="--a:107"></div><div class="ac" style="--a:108"></div><div class="ac" style="--a:109"></div><div class="ac" style="--a:110"></div><div class="ac" style="--a:111"></div><div class="ac" style="--a:112"></div><div class="ac" style="--a:113"></div><div class="ac" style="--a:114"></div><div class="ac" style="--a:115"></div><div class="ac" style="--a:116"></div><div class="ac" style="--a:117"></div><div class="ac" style="--a:118"></div><div class="ac" style="--a:119"></div><div class="ac" style="--a:120"></div><div class="ac" style="--a:121"></div><div class="ac" style="--a:122"></div><div class="ac" style="--a:123"></div><div class="ac" style="--a:124"></div><div class="ac" style="--a:125"></div><div class="ac" style="--a:126"></div><div class="ac" style="--a:127"></div><div class="ac" style="--a:128"></div><div class="ac" style="--a:129"></div><div class="ac" style="--a:130"></div><div class="ac" style="--a:131"></div><div class="ac" style="--a:132"></div><div class="ac" style="--a:133"></div><div class="ac" style="--a:134"></div><div class="ac" style="--a:135"></div><div class="ac" style="--a:136"></div><div class="ac" style="--a:137"></div><div class="ac" style="--a:138"></div><div class="ac" style="--a:139"></div><div class="ac" style="--a:140"></div><div class="ac" style="--a:141"></div><div class="ac" style="--a:142"></div><div class="ac" style="--a:143"></div><div class="ac" style="--a:144"></div><div class="ac" style="--a:145"></div><div class="ac" style="--a:146"></div><div class="ac" style="--a:147"></div><div class="ac" style="--a:148"></div><div class="ac" style="--a:149"></div><div class="ac" style="--a:150"></div><div class="ac" style="--a:151"></div><div class="ac" style="--a:152"></div><div class="ac" style="--a:153"></div><div class="ac" style="--a:154"></div><div class="ac" style="--a:155"></div><div class="ac" style="--a:156"></div><div class="ac" style="--a:157"></div><div class="ac" style="--a:158"></div><div class="ac" style="--a:159"></div><div class="ac" style="--a:160"></div><div class="ac" style="--a:161"></div><div class="ac" style="--a:162"></div><div class="ac" style="--a:163"></div><div class="ac" style="--a:164"></div><div class="ac" style="--a:165"></div><div class="ac" style="--a:166"></div><div class="ac" style="--a:167"></div><div class="ac" style="--a:168"></div><div class="ac" style="--a:169"></div><div class="ac" style="--a:170"></div><div class="ac" style="--a:171"></div><div class="ac" style="--a:172"></div><div class="ac" style="--a:173"></div><div class="ac" style="--a:174"></div><div class="ac" style="--a:175"></div><div class="ac" style="--a:176"></div><div class="ac" style="--a:177"></div><div class="ac" style="--a:178"></div><div class="ac" style="--a:179"></div><div class="ac" style="--a:180"></div><div class="ac" style="--a:181"></div><div class="ac" style="--a:182"></div><div class="ac" style="--a:183"></div><div class="ac" style="--a:184"></div><div class="ac" style="--a:185"></div><div class="ac" style="--a:186"></div><div class="ac" style="--a:187"></div><div class="ac" style="--a:188"></div><div class="ac" style="--a:189"></div><div class="ac" style="--a:190"></div><div class="ac" style="--a:191"></div><div class="ac" style="--a:192"></div><div class="ac" style="--a:193"></div><div class="ac" style="--a:194"></div><div class="ac" style="--a:195"></div><div class="ac" style="--a:196"></div><div class="ac" style="--a:197"></div><div class="ac" style="--a:198"></div><div class="ac" style="--a:199"></div><div class="ac" style="--a:200"></div><div class="ac" style="--a:201"></div><div class="ac" style="--a:202"></div><div class="ac" style="--a:203"></div><div class="ac" style="--a:204"></div><div class="ac" style="--a:205"></div><div class="ac" style="--a:206"></div><div class="ac" style="--a:207"></div><div class="ac" style="--a:208"></div><div class="ac" style="--a:209"></div><div class="ac" style="--a:210"></div><div class="ac" style="--a:211"></div><div class="ac" style="--a:212"></div><div class="ac" style="--a:213"></div><div class="ac" style="--a:214"></div><div class="ac" style="--a:215"></div><div class="ac" style="--a:216"></div><div class="ac" style="--a:217"></div><div class="ac" style="--a:218"></div><div class="ac" style="--a:219"></div><div class="ac" style="--a:220"></div><div class="ac" style="--a:221"></div><div class="ac" style="--a:222"></div><div class="ac" style="--a:223"></div><div class="ac" style="--a:224"></div><div class="ac" style="--a:225"></div><div class="ac" style="--a:226"></div><div class="ac" style="--a:227"></div><div class="ac" style="--a:228"></div><div class="ac" style="--a:229"></div><div class="ac" style="--a:230"></div><div class="ac" style="--a:231"></div><div class="ac" style="--a:232"></div><div class="ac" style="--a:233"></div><div class="ac" style="--a:234"></div><div class="ac" style="--a:235"></div><div class="ac" style="--a:236"></div><div class="ac" style="--a:237"></div><div class="ac" style="--a:238"></div><div class="ac" style="--a:239"></div><div class="ac" style="--a:240"></div><div class="ac" style="--a:241"></div><div class="ac" style="--a:242"></div><div class="ac" style="--a:243"></div><div class="ac" style="--a:244"></div><div class="ac" style="--a:245"></div><div class="ac" style="--a:246"></div><div class="ac" style="--a:247"></div><div class="ac" style="--a:248"></div><div class="ac" style="--a:249"></div><div class="ac" style="--a:250"></div><div class="ac" style="--a:251"></div><div class="ac" style="--a:252"></div><div class="ac" style="--a:253"></div><div class="ac" style="--a:254"></div><div class="ac" style="--a:255"></div><div class="ac" style="--a:256"></div><div class="ac" style="--a:257"></div><div class="ac" style="--a:258"></div><div class="ac" style="--a:259"></div><div class="ac" style="--a:260"></div><div class="ac" style="--a:261"></div><div class="ac" style="--a:262"></div><div class="ac" style="--a:263"></div><div class="ac" style="--a:264"></div><div class="ac" style="--a:265"></div><div class="ac" style="--a:266"></div><div class="ac" style="--a:267"></div><div class="ac" style="--a:268"></div><div class="ac" style="--a:269"></div><div class="ac" style="--a:270"></div><div class="ac" style="--a:271"></div><div class="ac" style="--a:272"></div><div class="ac" style="--a:273"></div><div class="ac" style="--a:274"></div><div class="ac" style="--a:275"></div><div class="ac" style="--a:276"></div><div class="ac" style="--a:277"></div><div class="ac" style="--a:278"></div><div class="ac" style="--a:279"></div><div class="ac" style="--a:280"></div><div class="ac" style="--a:281"></div><div class="ac" style="--a:282"></div><div class="ac" style="--a:283"></div><div class="ac" style="--a:284"></div><div class="ac" style="--a:285"></div><div class="ac" style="--a:286"></div><div class="ac" style="--a:287"></div><div class="ac" style="--a:288"></div><div class="ac" style="--a:289"></div><div class="ac" style="--a:290"></div><div class="ac" style="--a:291"></div><div class="ac" style="--a:292"></div><div class="ac" style="--a:293"></div><div class="ac" style="--a:294"></div><div class="ac" style="--a:295"></div><div class="ac" style="--a:296"></div><div class="ac" style="--a:297"></div><div class="ac" style="--a:298"></div><div class="ac" style="--a:299"></div><div class="ac" style="--a:300"></div><div class="ac" style="--a:301"></div><div class="ac" style="--a:302"></div><div class="ac" style="--a:303"></div><div class="ac" style="--a:304"></div><div class="ac" style="--a:305"></div><div class="ac" style="--a:306"></div><div class="ac" style="--a:307"></div><div class="ac" style="--a:308"></div><div class="ac" style="--a:309"></div><div class="ac" style="--a:310"></div><div class="ac" style="--a:311"></div><div class="ac" style="--a:312"></div><div class="ac" style="--a:313"></div><div class="ac" style="--a:314"></div><div class="ac" style="--a:315"></div><div class="ac" style="--a:316"></div><div class="ac" style="--a:317"></div><div class="ac" style="--a:318"></div><div class="ac" style="--a:319"></div><div class="ac" style="--a:320"></div><div class="ac" style="--a:321"></div><div class="ac" style="--a:322"></div><div class="ac" style="--a:323"></div><div class="ac" style="--a:324"></div><div class="ac" style="--a:325"></div><div class="ac" style="--a:326"></div><div class="ac" style="--a:327"></div><div class="ac" style="--a:328"></div><div class="ac" style="--a:329"></div><div class="ac" style="--a:330"></div><div class="ac" style="--a:331"></div><div class="ac" style="--a:332"></div><div class="ac" style="--a:333"></div><div class="ac" style="--a:334"></div><div class="ac" style="--a:335"></div><div class="ac" style="--a:336"></div><div class="ac" style="--a:337"></div><div class="ac" style="--a:338"></div><div class="ac" style="--a:339"></div><div class="ac" style="--a:340"></div><div class="ac" style="--a:341"></div><div class="ac" style="--a:342"></div><div class="ac" style="--a:343"></div><div class="ac" style="--a:344"></div><div class="ac" style="--a:345"></div><div class="ac" style="--a:346"></div><div class="ac" style="--a:347"></div><div class="ac" style="--a:348"></div><div class="ac" style="--a:349"></div><div class="ac" style="--a:350"></div><div class="ac" style="--a:351"></div><div class="ac" style="--a:352"></div><div class="ac" style="--a:353"></div><div class="ac" style="--a:354"></div><div class="ac" style="--a:355"></div><div class="ac" style="--a:356"></div><div class="ac" style="--a:357"></div><div class="ac" style="--a:358"></div><div class="ac" style="--a:359"></div><div class="ac" style="--a:360"></div>
</div></body>
</html>

CSS部分

这段代码定义了两个动画：rot 和 rot-cont。rot 动画使得元素从完全旋转的状态过渡到静止状态，而 rot-cont 动画则是一个连续旋转的效果，元素在X轴旋转一圈，Y轴反向旋转一圈，Z轴旋转两圈。这些动画可以通过将 animation 属性应用到相应的CSS选择器上来使用。

/* 定义根变量 --delay-offset */
:root {--delay-offset: -1s;
}/* 定义类ac的样式 */
.ac {--l: 10; /* 线宽 */--clr: hsl(calc(var(--a) * 360deg / var(--t) ) 75% calc(var(--l) * 6% + 15%)); /* 颜色 */background-color: var(--clr); /* 背景色 */box-shadow: 0 0 0.5em var(--clr); /* 盒子阴影 */
}/* 定义类cont的样式 */
.cont {position: relative; /* 相对定位 */width: 50vmin; /* 宽度 */height: 50vmin; /* 高度 */border-radius: 100vmax; /* 圆角 */box-shadow: 0 0 1em 0.5em #fff5, inset 0 0 1em 0.5em #fff5; /* 外部和内部阴影 */animation: rot-cont infinite forwards linear 10s; /* 无限循环动画，持续时间10秒 */
}/* 定义div的通用样式 */
div {box-sizing: border-box; /* 边框盒模型 */transform-style: preserve-3d; /* 3D变换保持子元素的3D位置 */
}/* 再次定义类ac的样式 */
.ac {--dist: 25vmin; /* 距离 */position: absolute; /* 绝对定位 */width: 0.3em; /* 宽度 */height: 0.3em; /* 高度 */top: 25vmin; /* 顶部位置 */left: 25vmin; /* 左侧位置 */border-radius: 100%; /* 圆形 */--x: calc(cos(calc(var(--a) * 360deg / var(--t))) * var(--dist)); /* x坐标 */--y: calc(sin(calc(var(--a) * 360deg / var(--t))) * var(--dist)); /* y坐标 */--z: 5em; /* z坐标 */opacity: 0; /* 不透明度 */animation: rot linear 5s infinite forwards calc(var(--a) * var(--delay-offset)); /* 动画效果 */
}@keyframes rot {from {/* 在动画开始时，元素完全透明并且沿着X、Y、Z轴旋转360度。同时，根据变量 --x、--y 和 --z 的值进行平移。 */opacity: 1; /* 元素完全不透明 */transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) translateX(var(--x)) translateY(var(--y)) translateZ(var(--z));}to {/* 在动画结束时，元素保持不透明，并且旋转角度重置为0度。平移位置保持不变。 */opacity: 1; /* 元素保持不透明 */transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(var(--x)) translateY(var(--y)) translateZ(var(--z));}
}@keyframes rot-cont {from {/* 动画开始时，元素没有任何旋转。 */transform: rotateX(0) rotateY(0) rotateZ(0);}to {/* 动画结束时，元素沿着X轴旋转360度，Y轴旋转-360度（反向旋转），Z轴旋转720度。 */transform: rotateX(360deg) rotateY(-360deg) rotateZ(720deg);}
}/* 定义body的样式 */
body {display: grid; /* 网格布局 */place-content: center; /* 水平垂直居中 */place-items: center; /* 水平垂直居中 */min-height: 100vh; /* 最小高度 */margin: 0; /* 移除默认外边距 */perspective: 30em; /* 透视效果 */background-image: radial-gradient(circle at center, #2E4755, #1f2020); /* 背景图片 */color: #fefefe50; /* 文本颜色 */
}

效果图

总结

这段HTML和CSS代码描述了一个具有3D动画效果的网页结构。HTML部分定义了一个带有cont类的容器，其中包含了多个带有ac类的子元素。每个子元素都通过CSS变量--a赋予了一个唯一的标识，这些标识将用于控制每个元素的动画和样式。

CSS部分首先设置了一些根变量，如--delay-offset，用于后续动画延迟的计算。.ac类的样式定义了子元素的颜色和阴影效果，而.cont类则定义了容器的大小、阴影和自身的动画效果。动画rot是一个简单的旋转动画，使得每个子元素从完全旋转的状态过渡到静止状态。动画rot-cont则使得容器本身进行一个复杂的3D旋转。

最后，body的样式将整个页面设置为居中布局，并且提供了一个深色调的背景，以及为页面添加了透视效果，使得3D动画更加立体和生动。整体上，这段代码创建了一个动态的、视觉效果丰富的网页，通过3D动画增加了用户的交互体验。