您的位置：首页 > Web前端 > CSS

css3transform动画

2016-07-08 20:10 567 查看
这个程序是写用transform的动画座位关键帧的形式做的动画。其中要注意的是，transform动画的原点，旋转的原点是以自己的左上角，平移的参照点一直都是屏幕的左上角，出非手动更改。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{width: 200px;height: 200px;background: red;
animation: move 4s infinite ease;}

@keyframes move{
0%{transform: translate(0px) rotate(0deg) ; }
25%{transform: translate(300px) rotate(180deg);}
50%{transform: translate(300px,600px) rotate(360deg) ;}
75%{transform: translate(0,300px) rotate(0deg) ;}
100%{transform: translateY(-300px) rotate(0deg);}
}
</style>

</head>
<body>
<div id="box">

</div>
</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航