animate中使用HTML5,animate.css怎么使用?
animate里面包含了許多常用的css動(dòng)畫(huà),我們要使用的它的話需要把它加到自己的頁(yè)面中,接著就可以在需要?jiǎng)赢?huà)的元素標(biāo)簽上直接調(diào)用里面的動(dòng)畫(huà),然后調(diào)節(jié)動(dòng)畫(huà)次數(shù)延遲等達(dá)到自己需要的效果就可以了。
animate.css怎么使用?
1、在文件夾中放入animate的css文件,以及一個(gè)html文件。|-project
∟index.html
∟animate.min.css
2、在html的頭部添加我們的animate文件。(推薦學(xué)習(xí):CSS視頻教程)
Document3、在需要?jiǎng)赢?huà)的標(biāo)簽上添加 class="animated bounce delay-3s",延遲3秒后播放animate中的bounce上下跳動(dòng)動(dòng)畫(huà)。
animate.css怎么用?
4、在中間添加個(gè)infinite就可以循環(huán)播放動(dòng)畫(huà)。
animate.css怎么用?
5、我們還可以 自己添加class樣式,在里面設(shè)置播放速度5秒,延遲2秒,循環(huán)播放,把定義好的 直接寫(xiě)到標(biāo)簽class前面 就可以了。
.my-anim{
animation-duration: 5s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
animate.css怎么用?
animate.css怎么用?
6、如果要設(shè)置播放次數(shù),可以把infinite修改為2,就是播放兩次。
.my-anim{
animation-duration: 5s;
animation-delay: 2s;
animation-iteration-count: 2;
}
7、在瀏覽器打開(kāi)就可以看到文字跳動(dòng)的動(dòng)畫(huà)了,其它的動(dòng)畫(huà)同樣如此使用,只需要修改動(dòng)畫(huà)名字就可以了。
更多CSS3相關(guān)技術(shù)文章,請(qǐng)?jiān)L問(wèn)CSS3答疑欄目進(jìn)行學(xué)習(xí)!
總結(jié)
以上是生活随笔為你收集整理的animate中使用HTML5,animate.css怎么使用?的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: docker利用WebHook实现持续集
- 下一篇: 前端面试