经典案例推广高端H5电商设计公司联系报价
QQ联系
微信联系
手机联系
QQ联系
微信联系
手机联系

CSS3常用的四个动画效果

发布时间:2019-07-19
发布者:eidea
浏览次数:14219
今天小编在这里给各位介绍一下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);

}

网站案例欣赏

新大陆支付

响应式企业官网

八爪鱼教育

响应式企业官网

逸林酒店

响应式企业官网