Skip to content
使用CSS和JS实现安卓手机两种常见的充电特效,多次打磨。共两个分支。
CSS JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
js
less
BatteryCharge.gif
README.md
index.html

README.md

BatteryCharge

使用CSS和JS实现安卓手机两种常见的充电特效,多次打磨,有需要的小伙伴可以看看。

基于CSS3,暂未考虑浏览器兼容问题

点击这里预览

CSS使用Less编译(或许你会因此爱上写CSS)。两块电池的实现效果原理文章中有讲到,我主要说说关于第二块圆形电池的想法。

圆形电池里面的小圆点是通过JS动态创建并插入,并使用Math.random()计算随机位置和半径大小。 其实我有想过作者的想法,使用纯CSS可以事先画好一定数量的圆点,按照一定的先后顺序错开运动,也可以实现。 我只是单纯想练习一下自己的动画能力。通过Circle类描述圆点的属性,通过Run类控制圆点的创建,插入,删除,运动等。

这里,顺便推荐一个好用的,不依赖jQuery的动画库Velocity.js 我比较喜欢他的一个特点,每一个动画都会返回一个Promise对象,在某些情况下涉及异步流程控制的时候,确实很好用

参考

【掘金】CSS动画?教你使用障眼法,打造炫酷充电效果

文章全部使用CSS实现,但个人加入的自己的想法,部分功能采用JS实现。

GIF

GIF

You can’t perform that action at this time.