这是我参与11月更文挑战的第18天,活动详情查看:2021最后一次更文挑战
介绍
本期将会仅使用css写一个充电水滴动画,可以当做web场景中的加载动画使用,通过这个案例也可以了解到css如何做插值模糊,极为简单的了了数句就可实现的创意动画。
接下来,我们先看一下效果吧~
效果还可以吧,有木有在充电的感觉,现在我们就要大致从他的基本结构,差值模糊效果,粘连动画来来将其,我们这就出发了~
正文
1.基本结构
<div class="container">
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="collection"></div>
<span class="progress">75%</span>
</div>
复制代码
:root{
--drop-color: rgb(181, 249, 252);
}
.container {
width:100%;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
flex-direction: column;
}
.drop {
width: 80px;
height: 90px;
border-radius: 50%;
background-color: var(--drop-color);
position: absolute;
}
.collection {
width: 120px;
height: 120px;
background-color: var(--drop-color);
border-radius: 50%;
position: relative;
}
.progress {
position: absolute;
font-size: 32px;
font-family: fantasy;
color: #333;
}
复制代码
- div.container:主容器将用黑色背景铺满全屏,弹性布局让内容置于屏幕中央。
- div.drop:后面用来做三个水滴,所以我们把他变成椭圆的。
- div.collection:充电圆球作为我们显示的盒子。
- div.progress:充电进度,只是放一个静态的文字,这里不做任何操作。
2.差值模糊
这里很简单只有两句css,就可让我们的视图完全变了一个样子。
.container{
filter: contrast(30);
}
.collection{
filter: blur(20px);
}
复制代码
我们先在主容器调整输入图像的对比度值,值是 0%的话,图像会全黑。值是 100%,图像不变,所以要选择一个适合的值。然后在下面的容器添加模糊,这样一来,整个画面的对比度会提升的同时,如果出现了模糊,那么这些模糊的元素可以忽略边界像是粘连在一起。
当然现在只是看到了对比度的变化,等下我们添加水滴动画,就可以发现粘连效果了。
3.粘连动画
.drop {
width: 80px;
height: 90px;
border-radius: 50%;
background-color: var(--drop-color);
filter: blur(20px);
position: absolute;
animation: 3.2s down linear infinite;
animation-fill-mode: backwards;
}
.drop:nth-of-type(1) {
animation-delay: 0s;
}
.drop:nth-of-type(2) {
animation-delay: 0.5s;
}
.drop:nth-of-type(3) {
animation-delay: 0.7s;
}
.collection {
width: 120px;
height: 120px;
background-color: var(--drop-color);
filter: blur(20px);
animation: 8s spin linear infinite;
border-radius: 50%;
position: relative;
}
@keyframes down {
0% {
opacity: 0;
transform: translateY(-600%) scale(0.7);
}
50% {
opacity: 1;
transform: translateY(-100%) scale(0.5);
}
100% {
opacity: 0;
transform: translateY(0%) scale(0.45);
}
}
@keyframes spin {
0% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.15) rotate(180deg);
border-radius: 40% 10% 50% 45%;
}
100% {
transform: scale(1) rotate(360deg);
}
}
复制代码
- 水滴动画:我们这里做了三个水滴,设置他们不同的等待的下落时间,整个动画就是让其由上至下,由大至小的下落。
- 旋转动画:让主盒子进行旋转并且在此过程中改变其圆角比例和大小,显得与下落水滴相融的反应。
讲到这里,这个动画就完成了,在线演示。
结语
本篇与之前粘连跑马灯这一篇一样,都是为了粘连效果的一次使用,是不是很好用,感觉可以做好多好多的动画创意,还等什么,一起来实验一下吧~