css动画可以做到什么程度?

Github上有一个非常优秀的动画项目, 足足有5万颗星!

在线效果展示:

animate整个项目只有一个css文件, 使用方法也非常简单, 只要给相应的元素添加class属性即可

通过悬浮产生动画的小Demo

Animate的动画展示

body, html{

margin: 0;

padding: 0;

}

#title{

margin-top: 200px;

font-size: 30px;

line-height: 60px;

font-size: 0;

width: 100%;

font-weight: bold;

color: #AB3319;

}

#title span{

font-size: 20px;

background-color: #FCF6E5;

display: inline-block;

width: 20%;

height: 60px;

text-align: center;

box-sizing: border-box;

border: 1px solid #A84631;

}

const spans = window.document.querySelector("#title").querySelectorAll("span");

for(let span_index = 0; span_index < spans.length; span_index++){

spans[span_index].addEventListener("mouseenter", (e)=>{

console.log(spans[span_index], "enter");

spans[span_index].setAttribute("class", 'animated rubberBand');

})

spans[span_index].addEventListener("mouseleave", (e)=>{

console.log(spans[span_index], "mouseleave")

spans[span_index].setAttribute("class", '');

})

}

小结:

为网站添加css动画, 是为网页增加趣味性最简单的方法~