• <nav id="i44m4"></nav>
  • <kbd id="i44m4"></kbd>
    經典案例推廣高端H5電商設計公司聯系報價
    QQ聯系
    微信聯系
    手機聯系
    QQ聯系
    微信聯系
    手機聯系

    CSS3常用的四個動畫效果

    發布時間:2019-07-19
    發布者:eidea
    瀏覽次數:4869
    今天小編在這里給各位介紹一下CSS3常用的四個動畫效果。


    第一個動畫效果:360°旋轉 修改rotate的值

    * {

    transition:All 0.4s ease-in-out;

    -webkit-transition:All 0.4s ease-in-out;

    -moz-transition:All 0.4s ease-in-out;

    -o-transition:All 0.4s ease-in-out;

    }

    *:hover {

    transform:rotate(360deg);

    -webkit-transform:rotate(360deg);

    -moz-transform:rotate(360deg);

    -o-transform:rotate(360deg);

    -ms-transform:rotate(360deg);

    }


    第二個動畫效果:放大 修改scale的值

    * {

    transition:All 0.4s ease-in-out;

    -webkit-transition:All 0.4s ease-in-out;

    -moz-transition:All 0.4s ease-in-out;

    -o-transition:All 0.4s ease-in-out;

    }

    *:hover {

    transform:scale(1.2);

    -webkit-transform:scale(1.2);

    -moz-transform:scale(1.2);

    -o-transform:scale(1.2);

    -ms-transform:scale(1.2);

    }

    第三個動畫效果:旋轉放大 修改rotate的值 scale的值

    * {

    transition:All 0.4s ease-in-out;

    -webkit-transition:All 0.4s ease-in-out;

    -moz-transition:All 0.4s ease-in-out;

    -o-transition:All 0.4s ease-in-out;

    }

    *:hover {

    transform:rotate(360deg) scale(1.2);

    -webkit-transform:rotate(360deg) scale(1.2);

    -moz-transform:rotate(360deg) scale(1.2);

    -o-transform:rotate(360deg) scale(1.2);

    -ms-transform:rotate(360deg) scale(1.2);

    }


    第四個動畫效果:上下左右移動 修改translate的值

    * {

    transition:All 0.4s ease-in-out;

    -webkit-transition:All 0.4s ease-in-out;

    -moz-transition:All 0.4s ease-in-out;

    -o-transition:All 0.4s ease-in-out;

    }

    *:hover {

    transform:translate(0,-10px);

    -webkit-transform:translate(0,-10px);

    -moz-transform:translate(0,-10px);

    -o-transform:translate(0,-10px);

    -ms-transform:translate(0,-10px);

    }

    網站案例欣賞

    Royals Blue定制珠寶

    品牌營銷網站

    八爪魚教育

    響應式企業官網

    豪爵摩托車

    產品H5專題頁制作

    老板把我摁倒在办公桌啪啪_人禽杂交在线播放网站_我原来是富二代_女人和男人啪视频在线观看_又黄又刺激超爽动态图_色偷偷2019免费视频观看