版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wbdsr234/article/details/68942016
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.con{width:300px;height:100px;position: relative;}
.con .up,.con .down{position:absolute;width:0;height:0;border-radius:50%;border:50px solid darkcyan;border-top:50px solid transparent;}
.con .up{animation: updhua 1s infinite alternate;}
.con .down{border-top:50px solid darkcyan;border-bottom:50px solid transparent;animation: downdhua 1s infinite alternate;}
.con .red{width:20px;height:20px;border-radius: 50%;background:red;position: absolute;left:350px;top:40px;animation: reddhua 2s infinite;}
@keyframes updhua {
from{
transform: rotate(0deg);
}
to{
transform: rotate(90deg);
}
}
@keyframes downdhua {
from{
transform: rotate(0deg);
}
to{
transform: rotate(-90deg);
}
}
@keyframes reddhua {
from{
left:350px;
opacity: 1;
}
to{
left:40px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="con">
<div class="up"></div>
<div class="down"></div>
<div class="red"></div>
</div>
</body>
</html>