css旋转动画简单使用
<html>
<head>
<style>
@keyframes alarm {
0% {transform: rotate(0);}
50% {transform: rotate(0.5turn);}
100% {transform: rotate(1turn);}
}
div {
width: 100px;
height: 100px;
border-radius: 50%;
float: left;
border: 3px solid black;
text-align: center;
line-height: 100px;
position: relative;
animation-name: alarm;
animation: alarm 3s linear infinite !important;
}
.one {
animation-play-state: running;
}
</style>
</head>
<body>
<div class="one">running</div>
</body>
</html>