如上图，边框是长方形有圆角。4个蓝色的点围绕边框转动，这个效果用js或者css该怎么做？主要是转角的时候该怎么掰弯它？有轮子最好。。。

如图边框闪动的效果怎么用js或css实现？

linong

29.2k1266132

发布于
2016-11-03

效果不好做。还不如你自己使用gif

anchovy

1.9k29

发布于
2016-11-03

四个图片，设置循环动画，执行时间改下试试

01001

2

发布于
2016-11-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 div,.content2 div{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>
    <div class="loading">
        <div class="content1">
            <div class="cir1"></div>
            <div class="cir2"></div>
            <div class="cir3"></div>
            <div class="cir4"></div>                
        </div>
        <div class="content2">
            <div class="cir1"></div>
            <div class="cir2"></div>
            <div class="cir3"></div>
            <div class="cir4"></div>                
        </div>
        
    </div>
    
            
</body>

</html>

tanbowensg

43528

发布于
2016-11-03

CSS 不使用雪碧图无解。JS 几乎无解。

如图边框闪动的效果怎么用js或css实现？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？