服务器之家
您的位置： 首页 编程语言 css

CSS3常用的四个动画特效

100人浏览   2024-12-12 09:19:49

今天小编在这里给各位介绍一下CSS3常用的四个动画效果。

css


第一个动画效果：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);


相关推荐