老快3

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

CSS3常用的四个动画效果

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

}

网站案例欣赏

奥烨移民

企业官网

注意力数字营销

响应式企业官网

火王厨电

老快3H5响应式网站、品牌营销网站

大地网投 彩宝贝 顺风彩票 众购彩票 113彩票