呼吸灯效果（极简css实现）

鸟学习记：第四十八天

最近几天在忙一些琐碎的事情
可自由支配的时间较少
但有些任务每天还是坚持下来了
逆水行舟不进则退

「HTML+CSS」--自定义加载动画【029】

前言

❝

Hello！小伙伴！

非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～

自我介绍「ଘ(੭ˊᵕˋ)੭」

昵称：海轰

标签：程序猿｜C++选手｜学生

简介：因C语言结识编程，随后转入计算机专业，有幸拿过一些国奖、省奖...已保研。目前正在学习C++/Linux/Python

学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！初学Python 小白阶段

文章仅作为自己的学习笔记用于知识体系建立以及复习

题不在多学一题懂一题

知其然知其所以然！

❞

效果展示

在这里插入图片描述

Demo代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <section><span></span></section>
</body>
</html>

CSS

html,body{
  margin: 0;
  height: 100%;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #263238;
}
section {
    width: 650px;
    height: 300px;
    padding: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid red;
}
span {
  width : 96px;
  height: 96px;
  background: white;
  border-radius: 50%;
  animation: animloader 1s ease-in infinite;
}
@keyframes animloader {
  0% { transform: scale(0); opacity: 1;}
  100% { transform: scale(1); opacity: 0;}
}

原理详解

步骤1

使用span标签，设置

宽度、高度均为96px
背景色：白色

 width : 96px;
  height: 96px;
  background: white;

效果图如下

在这里插入图片描述

步骤2

span圆角化

 border-radius: 50%;

效果图如下

步骤3

为span设置动画

初始状态：大小为0（相对于原大小），颜色为（白，透明级别1）
终止状态：大小为1（相对于原大小），颜色为（白，透明级别0）

animation: animloader 1s ease-in infinite;

@keyframes animloader {
  0% { transform: scale(0); opacity: 1;}
  100% { transform: scale(1); opacity: 0;}
}

效果图如下

在这里插入图片描述

结语

学习来源：

❝
https://codepen.io/bhadupranjal/pen/vYLZYqQ
❞

文章仅作为学习笔记，记录从0到1的一个过程。

希望对您有所帮助，如有错误欢迎小伙伴指正～

谢谢支持❤️

序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。

画个电池

当然，电池充电，首先得用 CSS 画一个电池，这个不难，随便整一个：

欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。

方法很多，代码也很简单，直接看效果：

有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变表示电量，通过色块的位移动画实现充电的动画。但是总感觉少了点什么。

增加阴影及颜色的变化

如果要继续优化的话，需要添加点细节。

我们知道，低电量时，电量通常表示为红色，高电量时表示为绿色。再给整个色块添加点阴影的变化，呼吸的感觉，让充电的效果看起来确实是在动。

知识点

到这里，其实只有一个知识点：

使用 filter: hue-rotate() 对渐变色彩进行色彩过渡变换动画

我们无法对一个渐变色直接进行 animation ，这里通过滤镜对色相进行调整，从而实现了渐变色的变换动画。

上述例子完整的 Demo：
https://codepen.io/Chokcoco/pen/bGNqyra?editors=1100

添加波浪

ok，刚刚算一个小里程碑，接下来再进一步。电量的顶部为一条直线有点呆呆的感觉，这里我们进行改造一下，如果能将顶部直线，改为波浪滚动，效果会更为逼真一点。

改造之后的效果：

使用 CSS 实现这种波浪滚动效果，其实只是用了一种障眼法，具体的可以我早期写的这篇文章：

纯 CSS 实现波浪效果！

知识点

这里的一个知识点就是上述说的使用 CSS 实现简易的波浪效果，通过障眼法实现，看看图就明白了：

上述例子完整的 Demo：
https://codepen.io/Chokcoco/pen/qBErGoO

OK，到这，上述效果加上数字变化已经算是一个比较不错的效果了。当然上面的效果看上去还是很 CSS 的，就是一眼看到就觉得用 CSS 是可以做到的。

使用强大的 CSS 滤镜实现安卓充电动画效果

那下面这个呢？

用安卓手机的同学肯定不陌生，这个是安卓手机在充电的时候的效果。看到这个我就很好奇，使用 CSS 能做到吗？

经过一番尝试，发现使用 CSS 也是可以很好的模拟这种动画效果：

上述 Gif 录制的效果图是完全使用 CSS 模拟的效果。

上述例子完整的 Demo：
https://codepen.io/Chokcoco/pen/vYExwvm

知识点

拆解一下知识点，最主要的其实是用到了 filter: contrast() 以及 filter: blur() 这两个滤镜，可以很好的实现这种融合效果。

单独将两个滤镜拿出来，它们的作用分别是：

filter: blur()：给图像设置高斯模糊效果。
filter: contrast()：调整图像的对比度。

但是，当他们“合体”的时候，产生了奇妙的融合现象。

先来看一个简单的例子：

仔细看两圆相交的过程，在边与边接触的时候，会产生一种边界融合的效果，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。

当然，这种效果在之前的文章也多次提及过，更具体的，可以看看：

CSS 火焰？不在话下
你所不知道的 CSS 滤镜技巧与细节

颜色的变换

当然，这里也是可以加上颜色的变换，效果也很不错：

上述例子完整的 Demo：
https://codepen.io/Chokcoco/pen/vYExwvm

容易忽视的点

通过调节 filter: blur() 及 filter: contrast() 属性的值，动画效果其实会有很大程度的变化，好的效果需要不断的调试。当然，经验在其中也是发挥了很重要的作用，说到底还是要多尝试。

最后

本文给出的几个充电动画，效果渐进增强，本文只指出了最核心的知识点。但是在实际输出的过程中有很多小细节是本文没有提及的，感兴趣的同学还是应该点进 Demo 好好看看源码或者自己动手实现一遍。

好了，本文到此结束，希望对你有帮助 :)

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

者：semlinker

转发链接：https://mp.weixin.qq.com/s/3bY8LqOB9_6_3UctQOdAhw

在线咨询

上一篇：html元素水平居中
下一篇：一篇文章教会你使用html+css3制作GIF图

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

呼吸灯效果（极简css实现）

鸟学习记：第四十八天

「HTML+CSS」--自定义加载动画【029】

前言

效果展示

Demo代码

原理详解

步骤1

步骤2

步骤3

结语

画个电池

增加阴影及颜色的变化

知识点

添加波浪

知识点

使用强大的 CSS 滤镜实现安卓充电动画效果

知识点

颜色的变换

容易忽视的点

最后

您的项目需求