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;

}

class="animated infinite flip delay-2s"

style="text-align: center; font-size: 60px; margin-top: 30px; color: #64B587;">

Animate動畫展示

推薦

排行榜

歌單

電臺

歌手

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動畫, 是為網頁增加趣味性最簡單的方法~

總結

以上是生活随笔為你收集整理的html中img引入git动画,用Github五万颗星的css动画库, 为网页增添趣味性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。