【每日一练】138—CSS实现炫酷背景动画效果

以下是今天练习的最终效果：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="UTF-8"><title>【每日一练】138—CSS实现炫酷背景动画效果</title><link rel="stylesheet" href="style.css">
</head>
<body><section><i style="--i:1;"></i><i style="--i:12;"></i><i style="--i:8;"></i><i style="--i:6;"></i><i style="--i:4;"></i><i style="--i:18;"></i><i style="--i:5;"></i><i style="--i:23;"></i><i style="--i:11;"></i><i style="--i:14;"></i><i style="--i:22;"></i><i style="--i:3;"></i><i style="--i:27;"></i><i style="--i:21;"></i><i style="--i:15;"></i><i style="--i:16;"></i><i style="--i:2;"></i><i style="--i:22;"></i><i style="--i:7;"></i><i style="--i:21;"></i><i style="--i:10;"></i><i style="--i:20;"></i><i style="--i:1;"></i><i style="--i:12;"></i><i style="--i:8;"></i><i style="--i:6;"></i><i style="--i:4;"></i><i style="--i:18;"></i><i style="--i:5;"></i><i style="--i:23;"></i><i style="--i:11;"></i><i style="--i:14;"></i><i style="--i:22;"></i><i style="--i:3;"></i><i style="--i:27;"></i><i style="--i:21;"></i><i style="--i:15;"></i><i style="--i:16;"></i><i style="--i:2;"></i><i style="--i:22;"></i><i style="--i:7;"></i><i style="--i:21;"></i><i style="--i:10;"></i><i style="--i:20;"></i><i style="--i:1;"></i><i style="--i:12;"></i><i style="--i:8;"></i><i style="--i:6;"></i><i style="--i:4;"></i><i style="--i:18;"></i><i style="--i:5;"></i><i style="--i:23;"></i><i style="--i:11;"></i><i style="--i:14;"></i><i style="--i:22;"></i><i style="--i:3;"></i><i style="--i:27;"></i><i style="--i:21;"></i><i style="--i:15;"></i><i style="--i:16;"></i><i style="--i:2;"></i><i style="--i:22;"></i><i style="--i:7;"></i><i style="--i:21;"></i><i style="--i:10;"></i><i style="--i:20;"></i><i style="--i:1;"></i><i style="--i:12;"></i><i style="--i:8;"></i><i style="--i:6;"></i><i style="--i:4;"></i><i style="--i:18;"></i><i style="--i:5;"></i><i style="--i:23;"></i><i style="--i:11;"></i><i style="--i:14;"></i><i style="--i:22;"></i><i style="--i:3;"></i><i style="--i:27;"></i><i style="--i:21;"></i><i style="--i:15;"></i><i style="--i:16;"></i><i style="--i:2;"></i><i style="--i:22;"></i><i style="--i:7;"></i><i style="--i:21;"></i><i style="--i:10;"></i><i style="--i:20;"></i><i style="--i:1;"></i><i style="--i:12;"></i><i style="--i:8;"></i><i style="--i:6;"></i><i style="--i:4;"></i><i style="--i:18;"></i><i style="--i:5;"></i><i style="--i:23;"></i><i style="--i:11;"></i><i style="--i:14;"></i><i style="--i:22;"></i><i style="--i:3;"></i><i style="--i:27;"></i><i style="--i:21;"></i><i style="--i:15;"></i><i style="--i:16;"></i><i style="--i:2;"></i><i style="--i:22;"></i><i style="--i:7;"></i><i style="--i:21;"></i><i style="--i:10;"></i><i style="--i:20;"></i><i style="--i:1;"></i><i style="--i:12;"></i><i style="--i:8;"></i><i style="--i:6;"></i><i style="--i:4;"></i><i style="--i:18;"></i><i style="--i:5;"></i><i style="--i:23;"></i><i style="--i:11;"></i><i style="--i:14;"></i><i style="--i:22;"></i><i style="--i:3;"></i><i style="--i:27;"></i><i style="--i:21;"></i><i style="--i:15;"></i><i style="--i:16;"></i><i style="--i:2;"></i><i style="--i:22;"></i><i style="--i:7;"></i><i style="--i:21;"></i><i style="--i:10;"></i><i style="--i:20;"></i><i style="--i:1;"></i><i style="--i:12;"></i><i style="--i:8;"></i><i style="--i:6;"></i><i style="--i:4;"></i><i style="--i:18;"></i><i style="--i:5;"></i><i style="--i:23;"></i><i style="--i:11;"></i><i style="--i:14;"></i><i style="--i:22;"></i><i style="--i:3;"></i><i style="--i:27;"></i><i style="--i:21;"></i><i style="--i:15;"></i><i style="--i:16;"></i><i style="--i:2;"></i><i style="--i:22;"></i><i style="--i:7;"></i><i style="--i:21;"></i><i style="--i:10;"></i><i style="--i:20;"></i><i style="--i:1;"></i><i style="--i:12;"></i><i style="--i:8;"></i><i style="--i:6;"></i><i style="--i:4;"></i><i style="--i:18;"></i><i style="--i:5;"></i><i style="--i:23;"></i><i style="--i:11;"></i><i style="--i:14;"></i><i style="--i:22;"></i><i style="--i:3;"></i><i style="--i:27;"></i><i style="--i:21;"></i><i style="--i:15;"></i><i style="--i:16;"></i><i style="--i:2;"></i><i style="--i:22;"></i><i style="--i:7;"></i><i style="--i:21;"></i><i style="--i:10;"></i><i style="--i:20;"></i><i style="--i:1;"></i><i style="--i:12;"></i><i style="--i:8;"></i><i style="--i:6;"></i><i style="--i:4;"></i><i style="--i:18;"></i><i style="--i:5;"></i><i style="--i:23;"></i><i style="--i:11;"></i><i style="--i:14;"></i><i style="--i:22;"></i><i style="--i:3;"></i><i style="--i:27;"></i><i style="--i:21;"></i><i style="--i:15;"></i><i style="--i:16;"></i><i style="--i:2;"></i><i style="--i:22;"></i><i style="--i:7;"></i><i style="--i:21;"></i><i style="--i:10;"></i><i style="--i:20;"></i><i style="--i:1;"></i><i style="--i:12;"></i><i style="--i:8;"></i><i style="--i:6;"></i><i style="--i:4;"></i><i style="--i:18;"></i><i style="--i:5;"></i><i style="--i:23;"></i><i style="--i:11;"></i><i style="--i:14;"></i><i style="--i:22;"></i><i style="--i:3;"></i><i style="--i:27;"></i><i style="--i:21;"></i><i style="--i:15;"></i><i style="--i:16;"></i><i style="--i:2;"></i><i style="--i:22;"></i><i style="--i:7;"></i><i style="--i:21;"></i><i style="--i:10;"></i><i style="--i:20;"></i><i style="--i:1;"></i><i style="--i:12;"></i><i style="--i:8;"></i><i style="--i:6;"></i><i style="--i:4;"></i><i style="--i:18;"></i><i style="--i:5;"></i><i style="--i:23;"></i><i style="--i:11;"></i><i style="--i:14;"></i><i style="--i:22;"></i><i style="--i:3;"></i><i style="--i:27;"></i><i style="--i:21;"></i><i style="--i:15;"></i><i style="--i:16;"></i><i style="--i:2;"></i><i style="--i:22;"></i><i style="--i:7;"></i><i style="--i:21;"></i><i style="--i:10;"></i><i style="--i:20;"></i><i style="--i:1;"></i><i style="--i:12;"></i><i style="--i:8;"></i><i style="--i:6;"></i><i style="--i:4;"></i><i style="--i:18;"></i><i style="--i:5;"></i><i style="--i:23;"></i><i style="--i:11;"></i><i style="--i:14;"></i><i style="--i:22;"></i><i style="--i:3;"></i><i style="--i:27;"></i><i style="--i:21;"></i><i style="--i:15;"></i><i style="--i:16;"></i><i style="--i:2;"></i><i style="--i:22;"></i><i style="--i:7;"></i><i style="--i:21;"></i><i style="--i:10;"></i><i style="--i:20;"></i><i style="--i:1;"></i><i style="--i:12;"></i><i style="--i:8;"></i><i style="--i:6;"></i><i style="--i:4;"></i><i style="--i:18;"></i><i style="--i:5;"></i><i style="--i:23;"></i><i style="--i:11;"></i><i style="--i:14;"></i><i style="--i:22;"></i><i style="--i:3;"></i><i style="--i:27;"></i><i style="--i:21;"></i><i style="--i:15;"></i><i style="--i:16;"></i><i style="--i:2;"></i><i style="--i:22;"></i><i style="--i:7;"></i><i style="--i:21;"></i><i style="--i:10;"></i><i style="--i:20;"></i></section>
</body>
</html>

CSS代码：

*
{margin: 0;padding: 0;
}
section
{position: relative;height: 100vh;overflow: hidden;background: #111;display: flex;justify-content: center;align-items: center;gap: 10px;flex-wrap: wrap;
}
section i
{position: relative;width: 60px;height: 60px;background: #222;
}
section i:nth-child(5n+1)
{animation: animate 2s linear infinite, animateBg 5s linear infinite;animation-delay: calc(-1s * var(--i));
}
section i:nth-child(5n+2)
{animation: animate 3s linear infinite, animateBg 5s linear infinite;animation-delay: calc(-1.5s * var(--i));
}
section i:nth-child(5n+3)
{animation: animate 4s linear infinite, animateBg 5s linear infinite;animation-delay: calc(-2s * var(--i));
}
section i:nth-child(5n+4)
{animation: animate 5s linear infinite, animateBg 5s linear infinite;animation-delay: calc(-2.5s * var(--i));
}
section i:nth-child(5n+5)
{animation: animate 6s linear infinite, animateBg 5s linear infinite;animation-delay: calc(-3s * var(--i));
}
@keyframes animate
{0%,20%{background: #222;}60%{background: #0f0;}80%,100%{background: #222;}
}
@keyframes animateBg
{0% {filter: hue-rotate(0deg);}100% {filter: hue-rotate(360deg);}
}

写在最后

以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

推荐阅读

【每日一练】01~100练大合集汇总

学习更多技能

请点击下方公众号

【每日一练】138—CSS实现炫酷背景动画效果相关推荐

纯html+css炫酷地球仪动画效果
纯html+css炫酷地球仪动画效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
html中flash的简单动画效果,css实现快速炫酷抖动动画效果
1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...
android svg动画框架,Android实现炫酷SVG动画效果
svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们可以直接用代码来描绘图像,可以用任何文字处理工具打开svg图像,通过改变部分代码来使图像具有交互 ...
【css】炫酷半边边框效果div
这个效果很炫酷,在hover的时候,线条会靠近文本中心.用到了两个伪类实现. 以下是代码: <!DOCTYPE html> <html lang="en"> ...
android炫酷的动画效果
这段时间看到一些比较好看的android动画效果,下面我就给大家一些我比较喜欢的动画效果,并附上源码希望对你们有用处. 1.很简单却很酷的粒子破碎效果介绍: 实现思路 1.新建一个 Bean Pa ...
三个canvas炫酷背景动画js特效
下载地址使用三个canvas实现的炫酷网页背景,很酷的网页动画特效. dd:
html背景斜线,巧妙的实现 CSS 斜线(炫酷的小效果)
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
css实现炫酷充电动画
先绘制一个电池,电池头部和电池的身体这里其实就是两个div,使用z-index改变层级,电池的身体盖住头部,圆角使用border-radius完成 html部分,完整的css部分在最后 <di ...
Android实现炫酷SVG动画效果
svg是眼下十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们能够直接用代码来描画图像,能够用不论什么文字处理工具打开svg图像.通过改变部分代码来使图像具有 ...

【每日一练】138—CSS实现炫酷背景动画效果

【每日一练】138—CSS实现炫酷背景动画效果相关推荐

最新文章

热门文章