hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

运用CSS完成酷炫的充电动画【html5教程】

2019-12-26HTML搜搜PHP网52°c
A+ A-
循规蹈矩,看看只运用 CSS ,可以鼓捣出什么样的充电动画结果。

画个电池

固然,电池充电,起首得用 CSS 画一个电池,这个不难,随意整一个:

欧了,委曲就是它了。有了电池,那接下来直接充电吧。最最简朴的动画,那应当是用色彩把全部电池灌满即可。

要领许多,代码也很简朴,直接看结果:

有内味了,假如请求不高,这个委曲也就可以交差了。经由历程蓝色渐变示意电量,经由历程色块的位移动画完成充电的动画。然则总觉得少了点什么。

增添暗影及色彩的变化

假如要继续优化的话,须要增加点细节。

我们晓得,低电量时,电量一般示意为赤色,高电量时示意为绿色。再给全部色块增加点暗影的变化,呼吸的觉得,让充电的结果看起来确实是在动。

知识点

到这里,实在只要一个知识点:

  • 运用 filter: hue-rotate() 对渐变色彩举行色彩过渡变更动画

我们没法对一个渐变色直接举行 animation ,这里经由历程滤镜对色相举行调解,从而完成了渐变色的变更动画。

上述例子完整的 Demo: CodePen Demo -- Battery Animation One

增加波浪

ok,方才算一个小里程碑,接下来再进一步。电量的顶部为一条直线有点呆呆的觉得,这里我们举行革新一下,假如能将顶部直线,改成波浪转动,结果会更加传神一点。

革新以后的结果:

运用 CSS 完成这类波浪转动结果,实在只是用了一种障眼法,细致的可以我初期写的这篇文章:

纯 CSS 完成波浪结果!

知识点

这里的一个知识点就是上述说的运用 CSS 完成浅易的波浪结果,经由历程障眼法完成,看看图就邃晓了:

上述例子完整的 Demo: CodePen Demo -- Battery Animation Two

OK,到这,上述结果加上数字变化已算是一个比较不错的结果了。固然上面的结果看上去照样很 CSS 的,就是一眼看到就觉得用 CSS 是可以做到的。

运用壮大的 CSS 滤镜完成安卓充电动画结果

那下面这个呢?

用安卓手机的同砚一定不生疏,这个是安卓手机在充电的时刻的结果。看到这个我就很猎奇,运用 CSS 能做到吗?

经由一番尝试,发明运用 CSS 也是可以很好的模仿这类动画结果:

上述 Gif 录制的结果图是完整运用 CSS 模仿的结果。

上述例子完整的 Demo: HuaWei Battery Charging Animation

知识点

拆解一下知识点,最主要的现实上是用到了 filter: contrast() 以及 filter: blur() 这两个滤镜,可以很好的完成这类融会结果。

零丁将两个滤镜拿出来,它们的作用分别是:

  1. filter: blur(): 给图象设置高斯隐约结果。
  2. filter: contrast(): 调解图象的对比度。

然则,当他们“合体”的时刻,发生了巧妙的融会征象。

先来看一个简朴的例子:

仔细看两圆订交的历程,在边与边打仗的时刻,会发生一种边境融会的结果,经由历程对比度滤镜把高斯隐约的隐约边沿给干掉,应用高斯隐约完成融会结果。

固然,这类结果在之前的文章也屡次说起过,更细致的,可以看看:

  • CSS 火焰?不在话下
  • 你所不晓得的 CSS 滤镜技能与细节

色彩的变更

固然,这里也是可以加上色彩的变更,结果也很不错:

上述例子完整的 Demo: HuaWei Battery Charging Animation

轻易无视的点

经由历程调治 filter: blur() 及 filter: contrast() 属性的值,动画结果实在会有很大水平的变化,好的结果须要不停的调试。固然,履历在个中也是发挥了很主要的作用,说到底照样要多尝试。

末了

本文给出的几个充电动画,结果渐进加强,本文只指出了最中心的知识点。然则在现实输出的历程中有许多小细节是本文没有说起的,感兴趣的同砚照样应当点进 Demo 好好看看源码或许本身着手完成一遍。

本文来自ki4网,CSS教程栏目,迎接进修

以上就是运用CSS完成酷炫的充电动画的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
运用CSS完成酷炫的充电动画【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章