<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">{
margin:0 ;
padding: 0;
}
.box{
width:50px ;
height:50px ;
/*background: #666666;*/
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.box:before{
content: '';
width: 50px;
height: 5px;
background: #ccc;
position: absolute;
top: 59px;
border-radius:50% ;
animation: shadow.5s linear infinite;
}
.box:after{
content: '';
width: 50px;
height: 50px;
background: #666666;
position: absolute;
border-radius:3% ;
animation: box.5s linear infinite;
}
@keyframes box{
0% {
transform:translateY(0)rotate(0);
}
25% {
transform:translateY(9px)rotate(22.5deg);
}
50% {
transform:translateY(18px)rotate(45deg);
border-bottom-right-radius: ;
}
75% {
transform:translateY(9px)rotate(67.5deg);
}
100% {
transform:translateY(0)rotate(90deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
记一次CSS @keyframes动画旋转
猜你喜欢
转载自blog.csdn.net/bigmeow_lyj/article/details/88996579
今日推荐
周排行