- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
如上图，边框是长方形有圆角。4个蓝色的点围绕边框转动，这个效果用js或者css该怎么做？主要是转角的时候该怎么掰弯它？有轮子最好。。。
高洛峰2017-04-10 17:42:03
用css3的动画可以实现我有类似的效果 你看着修改一下，兼容问题自己解决
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>h5</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background: black;}
.loading{ width: 30px;height: 30px;position: absolute; left: 50%;
margin-left: -15px; top: 50%;}
.content1,.content2{width: 100%;height: 100%;position: absolute;}
.content1 p,.content2 p{width: 8px;height: 8px;background: white;border-radius: 50%; position: absolute;
animation: 1.5s linear infinite loadingmove;}
.cir2{right: 0;top: 0;}
.cir3{left: 0;bottom: 0;}
.cir4{right: 0; bottom: 0;}
.content2 {transform: rotate(45deg);}
@keyframes loadingmove{
0%{transform: scale(1);}
50%{transform: scale(0);}
100%{transform: scale(1);}
}
.content1 .cir1{animation-delay: -0.1s;}
.content2 .cir1{animation-delay: -0.3s;}
.content1 .cir2{animation-delay: -0.5s;}
.content2 .cir2{animation-delay: -0.7s;}
.content1 .cir3{animation-delay: -0.9s;}
.content2 .cir3{animation-delay: -1.1s;}
.content1 .cir4{animation-delay: -1.3s;}
.content2 .cir4{animation-delay: -1.5s;}
</style>
</head>
<body>
<p class="loading">
<p class="content1">
<p class="cir1"></p>
<p class="cir2"></p>
<p class="cir3"></p>
<p class="cir4"></p>
</p>
<p class="content2">
<p class="cir1"></p>
<p class="cir2"></p>
<p class="cir3"></p>
<p class="cir4"></p>
</p>
</p>
</body></html>
