0712-2888027 189-8648-0214
微信公眾號

孝感風(fēng)信網(wǎng)絡(luò )科技有限公司微信公眾號

當前位置:主頁(yè) > 技術(shù)支持 > HTML5/CSS3 > HTML5+CSS3 animations動(dòng)畫(huà)效果插件

HTML5+CSS3 animations動(dòng)畫(huà)效果插件

時(shí)間:2024-07-20來(lái)源:風(fēng)信官網(wǎng) 點(diǎn)擊: 1033次
HTML5+CSS3 animations動(dòng)畫(huà)效果插件,有非常豐富的動(dòng)畫(huà)顯示效果!

網(wǎng)址:http://daneden.github.io/animate.css/

以后制作html5+css3的動(dòng)畫(huà)就變得非常簡(jiǎn)單啦!

CSS3文件下載地址: https://raw.github.com/daneden/animate.css/master/animate.css

使用方法的說(shuō)明:https://github.com/daneden/animate.css

鏈接CSS文件:

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

使用代碼:

$('#yourElement').addClass('animated bounceOutLeft');

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

擴展使用方法:

$.fn.extend({
    animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        $(this).addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
    }
});


$('#yourElement').animateCss('bounce');

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}
熱門(mén)關(guān)鍵詞: HTML5+CSS3 animations 動(dòng)畫(huà) 效果 插件
欄目列表
推薦內容
熱點(diǎn)內容
展開(kāi)