css3-animation-spin.gif
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
position: relative;
}
div.animation {
border: 4px dotted green;
animation: turn-around .5s linear infinite;
}
@keyframes turn-around {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>
<div></div>
<div class="animation"></div>
</body>
</html>
Codepen:
网友评论