旋转,上下浮动
主要animation
<html>
<head>
<title>测试</title>
</head>
<style>
.box{
width: 136px;
height: 128px;
line-height: 128px;
text-align: center;
position: relative;
}
@-webkit-keyframes circle{
0%{ transform:rotate(0deg); }
100%{ transform:rotate(-360deg); }
}
span{
z-index: 9999;
}
.box_in{
background: url(./1.png) center center no-repeat;
-webkit-animation:circle 5s infinite linear;/*匀速 循环*/
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index: 9;
background: #000;
}
// 上下浮动
.moveImg {
width: 160px;
margin: 0px auto;
animation: Updown 1.5s infinite alternate ease;
}
@keyframes Updown {
from {
margin-top: 10px;
}
to {
margin-top: -30px;
}
}
</style>
<body>
<div style='' class='box'>
<span>盒子</span>
<div class='box_in'></div>
</div>
<div class="moveImg "></div>
</body>
</html>希望对所需要的人有帮助~