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

最新推荐文章于 2024-10-09 12:10:17 发布
最新推荐文章于 2024-10-09 12:10:17 发布
阅读量710 收藏 1
点赞数
文章标签： css html javascript 前端 css3
原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649135680&idx=3&sn=7539b808565f42194c147299d296b1be&chksm=be58bded892f34fb7dfca173cf9246db03a2b1b9e16be618c267886f8df350316249b6ec986a&scene=126&sessionid=0
版权
这是一个关于使用CSS创建炫酷背景动画的教程。通过HTML结构和CSS样式，特别是运用动画关键帧(@keyframes)以及变量(var(--i))来控制不同元素的动画时机和颜色变化，实现了背景的动态视觉效果。文章鼓励读者点赞、关注并分享给其他开发者一起学习。
摘要由CSDN通过智能技术生成

f62dbc471af811810a40f5b4327bda63.png

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

b0849463bb7ffe21a97d7832c1edcbff.gif

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练大合集汇总

学习更多技能

请点击下方公众号

f904cdcc96ea4895e396ecac1e10da5b.gif

d2725f50a289502219b850360bd3cbae.jpeg

2ba1f6e5872337b469f95d0e147d7753.png

CSS 实现炫酷的动态背景效果
qq_38232003的博客
01-09 5625
活不多说，直接开始 效果图： HTML： 一个万能的div <div class="bgc"></div> 主要是css部分 使用background属性 纯色 线性渐变(linear-gradient) 径向渐变(radial-gradient) 角向渐变(conic-gradient) 多重线性渐变(repeating-linear-gradient) 多重径向渐变(repeating-radial-gradient) 多重角向渐变(repeating-conic-
【小程序动画合集】10种小程序动画效果实现方法，文章太长建议收藏！
Dreawer微信小程序联盟
06-25 2万+
前言 一提小程序与动画，首先想到的是什么？嗯，微信小程序独创了一套动画玩法，官方支持3种动画方案，分别是createAnimation、this.animate和CSS3动画。 1.createAnimation与Animation 创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。 var animation = wx.createAnimation({ transformOrig...
CSS实现炫酷动画背景
m0_61643133的博客
11-13 2719
因为在视频号的后台，有小伙伴留言说，想要这个案例的源码，所以，今天就把这个源码也分享出来了，有兴趣的小伙伴可以自行练习起来。
HTML+css实现动画背景效果
最新发布
2301_76942182的博客
10-09 935
文档类型声明与根元素：这是 HTML5 的文档类型声明，告诉浏览器这个文档是一个 HTML5 文档。：HTML 文档的根元素，属性指定文档的语言为英语。这有助于屏幕阅读器等辅助技术正确处理内容，并且在某些搜索引擎优化场景下也有作用。2.文档头部（<head>：定义文档的字符编码为 UTF - 8。UTF - 8 是一种通用的字符编码，可以表示几乎所有的字符，确保网页在不同的语言和字符集环境下正确显示。：设置网页的标题。
渐变背景动画
why404
10-31 393
渐变背景动画 代码 <!DOCTYPE html> <html lang="zh" dir="ltr"> <head> <meta charset="utf-8"> <title>渐变背景动画</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="text"> .
使用 CSS 实现炫酷的特效
weixin_41978174的博客
07-28 1493
在前端开发中，CSS 不仅可以用来设置页面的基本样式，还可以通过一些高级技巧和动画效果，提升用户体验。本文将展示几个常见的 CSS 特效，并通过代码展示如何实现这些效果。
28个炫酷的纯CSS特效动画示例（含源代码）
热门推荐
大剑师兰特的GIS世界
01-15 3万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
纯CSS实现炫酷背景霓虹灯文字效果
南城
12-04 2323
本文详细解析了如何利用CSS的来创造炫酷动态渐变背景和霓虹灯文字效果。这种动效不仅对于前端开发者有启发，也为设计师和内容创作者提供了新的视角，去探索网页设计的无限可能性。
用HTML+CSS做一个漂亮简单的个人网页——动漫网页【火影忍者】1个页面
html精品源码
08-16 3550
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
CSS实现的几款不错的菜单栏
缠中说禅的博客
02-08 7118
前言      自从做了智慧城市这个项目之后，我一个做后端的开发者，瞬间转为前端开发，不过我还是很喜欢前端的。前端那些事，其实蛮有意思的，HTML实现的是静态的，使用ajax之后就可以和数据库交互了，加上js和jQuery之后就动起来了，加上CSS之后就更加炫酷了。因为项目中需要，查资料和编写了一些炫酷的二级菜单，分享给大家，好东西就要分享嘛！ 一、滑动菜单 1、代码： 1 D
css背景动画_CSS背景动画
culuo8053的博客
08-02 1042
css背景动画Background animations are an awesome touch when used correctly. In the past, I used MooTools to animate a background position. Luckily these days CSS animations are widely supported enough to...
纯CSS3炫酷响应式网页背景滚动视觉差特效
12-13
这是一款使用纯CSS/CSS3制作的响应式网页背景滚动视觉差特效。该视觉差特效在用户向下滚动页面的时候，页面的背景图像会以不同的速度进行滚动，产生炫酷的视觉差效果。
炫酷网页背景css.zip
10-21
炫酷网页背景css.zip
网页背景烟花特效（超炫酷，HTML\CSS\JS）
12-21
非常炫酷的烟花背景特效，可作为生日、过节、婚庆网页背景特效
CSS3实现酷炫动画按钮特效.zip
07-04
CSS3实现酷炫动画按钮特效是一款当鼠标点击提交按钮以后，根据屏幕大小响应式改变动画播放效果。
超炫酷的CSS3进度条动画 背景色渐变
07-04
超炫酷的CSS3进度条动画 背景色渐变
CSS背景效果
weixin_34272308的博客
09-12 211
前面的话 　　本文将详细介绍CSS背景效果   条纹背景 【双条纹背景】 background:linear-gradient(#fb3 50%, #58a 50%); background-size: 100% 30px; 　　CSS标准规定：如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值 　　...
css —— 写炫酷动画
技术前端，忠于热爱 @0.活在风浪里
08-18 1399
css炫酷动画，配合图片实现，总有一需要的快来一键三连抱走吧
几种css炫酷背景欣赏
小圣贤君的博客
10-30 2万+
这里为大家带来几种表现惊人的css背景效果，纯css表现效果，有桌布效果，星空效果，心形效果，砖墙效果等。请欣赏：background: radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, radial-gr
CSS3实现炫酷彩色溅射按钮动画效果
通过上述知识点，我们可以了解到实现一个炫酷的CSS3彩色按钮动画效果需要综合运用CSS3的新特性、JavaScript的交互能力以及对Web开发标准的遵循。这样的项目不仅提升了用户界面的美观程度，也为网站或应用增添了更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值