HTML+CSS制作彩色波动

HTML+CSS制作彩色波动

HTML部分源码如下：

CSS部分源码如下：

:root { --background-color: #2c3e50; --border-color: #7591AD; --text-color: #34495e; --color1: #EC3E27; --color2: #fd79a8; --color3: #0984e3; --color4: #00b894; --color5: #fdcb6e; --color6: #e056fd; --color7: #F97F51; --color8: #BDC581;}* { margin: 0; padding: 0;}html { font-size: 14px;}body { width: 100vw; height: 100vh; background-color: var(--background-color); display: flex; justify-content: center; align-items: center; /* 视距1000px */ perspective: 1000px; /* 开启3D效果 ？？*/ /* transform-style: preserve-3d; */}.container { width: 400px; height: 100px; /* background-color: var(--border-color); */ display: flex; justify-content: space-around; align-items: center; perspective: 1000px; transform-style: preserve-3d; transform: rotateX(45deg);}.fence { position: relative; width: 10px; height: 100%; border-radius: 10px; animation: animate 1s ease-in-out infinite alternate both;}.fence::before { /* 原视频没有，后增加发光效果 */ content: ''; width: 100%; height: 100%; position: absolute; background-color: inherit; filter: blur(5px); opacity: 0.5;}.fence:nth-child(1) { background-color: var(--color1); animation-delay: 0s;}.fence:nth-child(2) { background-color: var(--color2); animation-delay: 0.2s;}.fence:nth-child(3) { background-color: var(--color3); animation-delay: 0.4s;}.fence:nth-child(4) { background-color: var(--color4); animation-delay: 0.6s;}.fence:nth-child(5) { background-color: var(--color5); animation-delay: 0.8s;}.fence:nth-child(6) { background-color: var(--color6); animation-delay: 1s;}.fence:nth-child(7) { background-color: var(--color7); animation-delay: 1.2s;}.fence:nth-child(8) { background-color: var(--color8); animation-delay: 1.4s;}.fence:nth-child(9) { background-color: var(--color1); animation-delay: 1.6s;}.fence:nth-child(10) { background-color: var(--color2); animation-delay: 1.8s;}.fence:nth-child(11) { background-color: var(--color3); animation-delay: 2.0s;}.fence:nth-child(12) { background-color: var(--color4); animation-delay: 2.2s;}.fence:nth-child(13) { background-color: var(--color5); animation-delay: 2.4s;}.fence:nth-child(14) { background-color: var(--color6); animation-delay: 2.6s;}.fence:nth-child(15) { background-color: var(--color7); animation-delay: 2.8s;}.fence:nth-child(16) { background-color: var(--color8); animation-delay: 3s;}@keyframes animate { 0% { transform: translateZ(-30px); } 100% { transform: translateZ(30px); }}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。