css 动画案例

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)

2. 背景色透明渐变交过

.box {
 	background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.75));
}