阅读 3024

CSS 水滴效果

大家好,我是 Steven。

今集会介绍如何使用 CSS 制作一个水滴效果,当图形碰到的时候会好像融合在一起这样,印象中有些安卓系统的 UI 在充电时也是类似的动画的:

这个教程的视频版本在 www.bilibili.com/video/BV1S6… ,欢迎三连关注!

HTML 的部分

打开 CodePen 编辑器,新增一个 <div>classcontainer;在里面新增三个 <div>classdrop,代表滴下的水点。

CSS 的部分

在 CSS 那边,新增 .container 选择器,display 设定为 flexjustify-contentalign-items 设定为 centermin-height 设定为 100vh,这样所有在 .container 容器里面的元素就会居中,然后背景颜色设定为黑色。

新增 body 选择器,将 margin 设定为 0

新增 .drop 选择器,将宽度和高度设定为 100px,背景颜色设定为白色,圆角设定为 50%,这样就会成为一个圆形。

.container 里将 flex-direction 设定为 column,这样三个圆形就会垂直排列。

然后在 .drop 选择器内,加入 position 设定为 absolute,三个圆形就重叠在一起,再加入多两个 .drop 选择器,分别是 .drop:nth-child(2) 指定第二个,以及 .drop:nth-child(3) 指定第三个。

再设置一些位移,第二个设定 transform: translateY(-80px),第三个设定 transform: translateY(-130px)

水点融合的原理

然后关键的位置就在这里,先在 .drop 选择器内加入 filter: blur(20px),这样就会为三个圆形加入模糊的设定:

然后在它们的容器,.container 里面,加入 filter: contrast(30),将对比度提高,这样就可以将本来模糊了的边框,通过对比度的提升,重新画出一个实边,从而达到融合到一起的效果:

换句话说,模糊的边缘是从黑到灰到白的颜色,提高对比度的作用是,把浅灰的当作白色,把深灰的当作黑色。

了解了这个原理后,制作动画就不难了。在 HTML 中加入多两个元素,分别是 class 名为 collection<div>,以及一个 <span>

collection 用来模拟收集水点的容器,而 <span> 上就加入一个文字,例如 80%

在 CSS 那边,加入 .collection 选择器,与 .drop 选择器大致相同,将宽度与高度设定为 100px,背景颜色设定为白色,圆角度定为 50%,以及 filter 设定为 blur(20px)

加入 span 选择器,position 设定为 absolutefont-family 字体设定为 Helvetica,然后文字大小设定为 30px。,

制作动画

现在开始制作动画了,首先加入 @keyframes drop,设定水滴的动画。加入三个区块,分别是 0%50%100%

0% 区块即是动画起始的时候,加入 transform 属性,先将它缩小一点,设定 scale(.7),然后将它向上移,设定 translateY() 例如是 -600%,然后 opacity 设定为 0,这样水滴就会先隐藏。

然后在 50% 区块内,加入同样的设定,将 scale 设定为 .4translateY 设定为 -80%,透明度设定为 1,水滴就会出现。

再在 100% 的区块内,将 scale 设定为 .3translateY 设定为 0px

回到 .drop 选择器,加入 opacity 设定为 0,确保水滴在一开始时是隐藏的状态。加入 animation,设定为 2.5s,动画名称是 drop,今次会用线性速度 linear,以及无限重播动画 infinite

现在可见到有一点水滴向下的效果了,在 :nth-child(2):nth-child(3) 选择器里,将原来的 transform 设定移除,然后加入延迟播放动画的设定,第二个水滴延迟 .5s,第三个水滴延迟 .7s

现在可以看到三点水滴的效果已完成了:

再来为 collection 这个水点收集容器加入点动画效果,加入 @keyframes collection,同样预备三个区块,分别是 0%50%100%

0% 里加入 transform 属性,设定 scale(1) rotate(0deg);然后在 100% 里加入同样设定,将 rotate 改为 360deg,这样就会转一圈了。

关键的变化在 50% 区块里面设定,将 scale 设定为 1.3 放大一点,以及 rotate 设定为 180deg,然后宽度改为 90px,这样动画在转一圈的过程中,就会放大并且将圆形变为椭圆形。

为了加入多些随机的效果,在 50% 区块内,将圆角设定的左上角设定为 40%,左下角设定为 45%

回到 .collection 选择器,加入 animation,动画设定为 3s,动画名称是 collection,加速度是线性 linear,以及同样是无限重播动画 infinite

我们来看看这个案例的完成效果

以上,就是今集要介绍的全部内容。


这个案例的源代码在 codepen.io/stevenlei/p…

你的支持是我的动力,请关注 CodingStartup 起码课,我们一起加油!