CSS3常用的四个动画效果



 





今天小编在这里给各位介绍一下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);



好了,以上就是小编今天要介绍的内容了,希望对各位朋友们有所帮助





 


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

云南高职单招|云南单招,云南单招网,云南高职单招网,云南高职单招,云南单招学校,云南单招培训
云南高职单招
金诺幼儿园(春城路金诺幼儿园)|昆明官渡区幼儿园,幼儿园报名,官渡区幼儿园,春城路幼儿园,幼儿园招生,学前班,昆明幼儿园,金诺幼儿园,环城南路幼儿园,石井路幼儿园
金诺幼儿园(春城路金诺幼儿园)
中源管业|中源管业,中源管业公司,中源管业有限公司,中源管业电话,中源管业地址,中源管业电力管,中源管业mpp电力管,中源管业cpvc电力管,中源管业pe穿线管
中源管业
弥勒综合高中|弥勒综合高中
弥勒综合高中
外贸网站建设|外贸网站建设,英文网站制作,英文网站设计,美国主机空间,外贸建站平台,多语言网站制作
外贸网站建设
云南巨榕教育投资集团有限公司|云南巨榕教育投资集团有限公司,巨榕教育集团,巨榕教育
云南巨榕教育投资集团有限公司
安徽中源管业有限公司|安徽中源管业有限公司,安徽中源管业有限公司介绍,安徽中源管业有限公司电话,安徽中源管业有限公司地址,安徽中源管业有限公司厂家,安徽中源管业有限公司电力管,安徽中源管业有限公司管材
安徽中源管业有限公司
昆明网站建设|昆明网站建设,昆明网站开发,昆明网站建设公司,昆明网站建设价格,昆明网站设计,昆明网站制作,网页设计,高端网站建设,高端网站设计
昆明网站建设

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部