CSS3动画特效

动画特效在当今的网页元素中充当不可或缺的角色

我给大家介绍一个css3的动画库——animate.css(https://daneden.github.io/animate.css/)

鼠标经过时的几种常用的动画

1 、 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);
    }

2 、放大 修改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);
    }

3 、 旋转放大 修改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);
    }

4 、 上下左右移动 修改translate(x轴,y轴)

  * {
        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);
    }