<video id="i0ich"><input id="i0ich"></input></video>
  • <video id="i0ich"></video>
  • <u id="i0ich"></u>

    <i id="i0ich"><bdo id="i0ich"></bdo></i>

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

    孝感風信網絡科技有限公司微信公眾號

    當前位置:主頁 > 技術支持 > HTML5/CSS3 > Magic CSS3 Animations 動畫是一款獨特的CSS3動畫庫

    Magic CSS3 Animations 動畫是一款獨特的CSS3動畫庫

    時間:2024-02-21來源:風信官網 點擊: 2129次
    Magic CSS3 Animations 動畫是一款獨特的CSS3動畫特效包,你可以自由地使用在您的網頁中。只需簡單的在頁面上引入 CSS 文件: magic.css 或者壓縮版本 magic.min.css 就可以使用了。

    GitHub地址:https://github.com/miniMAC/magic

    項目地址:https://www.minimamente.com/example/magic_animations/
    Magic CSS3 Animations 動畫是一款獨特的CSS3動畫特效包

    用法

    1.首先引入magic.css文件(或壓縮版本magic.min.css)
        
    <link rel="stylesheet" href="yourpath/magic.css">

    2.給指定的元素加上指定的動畫樣式名

    <div class="magictime puffIn"></div>

    其中magictime決定動畫的持續時間,必須添加的樣式名。

    也可以通過jQuery來實現:
        
    $('#element').addClass('magictime puffIn');

    3.所有的動畫樣式名請參見demo頁面。

    JQuery使用示例代碼:

    1、鼠標hover事件加動畫特效
    $('.yourdiv').hover(function () {
      $(this).addClass('magictime puffIn');
    });

    2、增加定時器
    //set timer to 5 seconds, after that, load the magic animation
    setTimeout(function(){
          $('.yourdiv').addClass('magictime puffIn');
    }, 5000);

    3、如果你想在一段時間后加載動畫,進行循環,你可以使用這個例子:

    //set timer to 3 seconds, after that, load the magic animation and repeat forever
    setInterval(function(){
        $('.yourdiv').toggleClass('magictime puffIn');
    }, 3000 );
    熱門關鍵詞: Magic CSS3 Animations 動畫 CSS3動畫
    欄目列表
    推薦內容
    熱點內容
    展開
    中文字字幕在线中文无码