如上图，边框是长方形有圆角。4个蓝色的点围绕边框转动，这个效果用js或者css该怎么做？主要是转角的时候该怎么掰弯它？有轮子最好。。。
闭关修行中......
效果不好做。还不如你自己使用gif
四个图片，设置循环动画，执行时间改下试试
用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>
CSS 不使用雪碧图无解。JS 几乎无解。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
效果不好做。还不如你自己使用gif
四个图片，设置循环动画，执行时间改下试试
用css3的动画可以实现我有类似的效果 你看着修改一下，兼容问题自己解决
<!DOCTYPE html>
<html>
</html>
CSS 不使用雪碧图无解。JS 几乎无解。