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

css3 animation小动画

2017-09-06 15:04 537 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3 animation小动画 </title>
<style>
.box{
height:100px;
width:100px;
position:relative;
left:-100px;
line-height:100px;
text-align: center;
color:#fff;
font-size:20px;
font-family: Arial, Helvetica, sans-serif;
background:blue;
animation: move 4s linear infinite reverse;
}
.wrap{
width:800px;

ad88
height:150px;

}
@keyframes move{
0%{
left: -100px;
top:50px;
transform: scale(1.1) rotate(60deg);
}
30%{
left: 500px;
top:30px;
transform: scale(1.3) rotate(120deg);
}
50%{
left: 350px;
top:20px;
transform: scale(1.5) rotate(180deg);
}
70%{
left: 200px;
top:10px;
transform: scale(1.3) rotate(240deg);
}
100%{
left:-200px;
top:0;
transform: scale(1) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">Animation</div>
</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航