<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
*{margin:0;padding:0;}
.wrap{position:relative;width:40px;height:40px;margin:100px auto;}
/*准备两个 div。circle*/
.circle{position:absolute;width:40px;height:40px;}
.circle p {position:absolute;width:12px;height:12px;background-color:red;border-radius:50%;animation:move 1.5s infinite linear;}
/*让其中的p元素定位在div的四个顶角*/
.circle p:nth-of-type(1){left:0;top:0;}
.circle p:nth-of-type(2){right:0;top:0;}
.circle p:nth-of-type(3){right:0;bottom:0;}
.circle p:nth-of-type(4){left:0;bottom:0;}
/*第二个div.circle旋转45deg*/
.circle:nth-of-type(2){transform:rotate(45deg);}
/*为每个p元素添加执行动画的延迟时间*/
@keyframes move{
0%{transform:scale(0);}
50%{transform:scale(1);}
100%{transform:scale(0);}
}
/*添加动画延迟*/
.circle:nth-of-type(1) p:nth-of-type(1){animation-delay: .1s}
.circle:nth-of-type(2) p:nth-of-type(1){animation-delay: .3s}
.circle:nth-of-type(1) p:nth-of-type(2){animation-delay: .5s}
.circle:nth-of-type(2) p:nth-of-type(2){animation-delay: .7s}
.circle:nth-of-type(1) p:nth-of-type(3){animation-delay: .9s}
.circle:nth-of-type(2) p:nth-of-type(3){animation-delay: 1.1s}
.circle:nth-of-type(1) p:nth-of-type(4){animation-delay: 1.3s}
.circle:nth-of-type(2) p:nth-of-type(4){animation-delay: 1.5s}
</style>
</head>
<body>
<div class="wrap">
<div class="circle">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="circle">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</body>
</html>
04-19
2721
2721
11-19
2万+
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
