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

前言

开始

HTML部分

CSS部分

效果图

总结

前言

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

开始

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

HTML部分

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

html 复制代码

<!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选择器上来使用。

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动画增加了用户的交互体验。