<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>before</title>
<style>
#box{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: pink;
margin: 100px auto;
position: relative;
animation: run 3s infinite;
}
#box:before{
content: "";
display: block;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: black;
position: absolute;
left: 50%;
margin-left: -5px;
top: -5px;
}
@keyframes run {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
网友评论