HTML+CSS制作彩色波动

HTML+CSS制作彩色波动
效果图如下：

HTML部分源码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彩色波动</title><link rel="stylesheet" href="style.css">
</head><body><div class="container"><div class="fence"></div><div class="fence"></div><div class="fence"></div><div class="fence"></div><div class="fence"></div><div class="fence"></div><div class="fence"></div><div class="fence"></div><div class="fence"></div><div class="fence"></div><div class="fence"></div><div class="fence"></div><div class="fence"></div><div class="fence"></div><div class="fence"></div><div class="fence"></div></div>
</body></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);}
}

HTML+CSS制作彩色波动相关推荐

把svg图标制作成字体图标_让我们用SVG符号和CSS变量制作彩色图标
把svg图标制作成字体图标 by Sarah Dayan 通过莎拉·达扬让我们用SVG符号和CSS变量制作彩色图标 (Let's make multi-colored icons with SVG ...
php 生成纯黑白图片,使用CSS将彩色图片转换为黑白图片
通过使用过滤器我们能够不使用photoshop等图像软件或js.php等技术就可以进行各种图像处理.现在,CSS过滤器已经被各种现代浏览器广泛支持,我们可以使用一些组合的方法,来制作跨浏览器的图像处理 ...
如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
html+css制作圣诞树
圣诞节到来,看到网上多种多样的圣诞树,作为程序员也想用代码制作一棵圣诞树出来,于是用html+css做了一个圣诞树的网页送给朋友 html代码 <!DOCTYPE html> <ht ...
利用 Css 制作精美的卡片UI （赞）
原文出处:https://segmentfault.com/a/1190000009388832 效果图,鼠标移彩色,移出黑白本教程将会告诉你如何用 Html ...
纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
如何用CSS制作横向菜单?
管在我的网站和文章里都有提到CSS制作菜单的方法,但很多初学者还是不太清楚如何实现,以及实现原理,我想专门写一篇详细教程会对大家比较有帮助. 我们先来看一个菜单的例子,最终效果是: 首页产品介绍服 ...
html语言制作留言条,利用DIV+CSS制作右下角弹出留言板
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 利用DIV+CSS制作右下角弹出留言板 a ...
html中多边形图形怎么制作,CSS制作图形速查表
前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不同图形的方法.今天花了点时间将这方面的制作成一份清单,方便大家急用时有地方可查.别的不多说了,直接看代码. 为了节省时间,下 ...

HTML+CSS制作彩色波动

HTML+CSS制作彩色波动相关推荐

最新文章

热门文章