1.数字累加动画
动画库地址:https://www.tweenmax.com.cn/demo/
const fuwukehu = document.querySelector(".fuwukehu")
function countMove(el, endScore=0, time=3, startScore=0) {// time 动画时长
const demo = { score: startScore } // 开始数值
//创建一个tween在20秒内改变score的属性值从0到100.
const tween = TweenLite.to(demo, time, {
score: endScore, // 结束时间
//在tween update时通过这个function输出.
onUpdate() {
el.innerHTML = demo.score.toFixed(0)
}
})
}
// 执行动画
countMove(congye, 10)
- 背景色透明渐变交过
.box {
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.75));
}