首页 > 代码库 > css3动画简单案例
css3动画简单案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3 动画</title> <style> body { margin: 0; padding: 0; background-color: #F7F7F7; } .box { width: 400px; margin: 100px auto; } .box img{ /*4.调用动画*/ animation: rotateFuc 4s linear 0s; } /*动画的第一步*/ /*1.申明动画序列 @keyframes 跟着的是动画序列的名称*/ @keyframes rotateFuc{ /*2.写动画的节点 from 0% to 100% 百分比是时间节点*/ from{ } 25%{ /*3.添加动画属性*/ transform: rotate(360deg) scale(2); } 75%{ /*3.添加动画属性*/ transform: rotate(720deg) scale(0.5); } to{ transform: none; } } </style></head><body> <div class="box"> <img src="http://www.mamicode.com/images/fengche.png"> </div></body></html>
css3动画简单案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。