Home > Q&A > body text

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

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

阿神2896 days ago348

reply all(4)I'll reply

巴扎黑2017-04-10 17:42:03

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

PHP中文网2017-04-10 17:42:03

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

高洛峰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>

伊谢尔伦2017-04-10 17:42:03

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

Cancelreply