学编程 ❀(๑╯◡╰๑)❀ 就上soxunxi.cn!这里有CMS,CSS,NET,PHP,Linux,HTML,JAVA,MySQL,Python等教程.
当前位置: HTML > 运用CSS完成酷炫的充电动画【html5教程】,css动画,充电动画

循规蹈矩,看看只运用 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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"运用CSS完成酷炫的充电动画【html5教程】,css动画,充电动画"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线