首页 > 代码库 > css3 使用animation实现动画效果
css3 使用animation实现动画效果
.rotation { -webkit-animation-name: rotation; -webkit-animation-duration: 30s; -moz-animation-name: rotation; -moz-animation-duration: 30s; } #sun { background: url("http://img.mukewang.com/55ade004000106c202010201.png") no-repeat; position: absolute; z-index: 1; top: -30px; height: 201px; width: 201px; right: 40%; } @-webkit-keyframes rotation { 0% { transform: translateX(0) translateY(0); } 100% { transform: translateX(-2000px) translateY(400px); } /*?*/ } @-moz-keyframes rotation { /*?*/ 0% { transform: translateX(0) translateY(0); } 100% { transform: translateX(-2000px) translateY(400px); } }
animation-name:是动画帧的设置 通过关键字keyframes 进行设置
duration设置动画完成的时间
本例中有一个div ID sum 显示一个太阳落山的效果
css3 使用animation实现动画效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。