javascript - 如图边框闪动的效果怎么用js或css实现?
阿神
阿神 2017-04-10 17:40:03
0
4
349

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

阿神
阿神

闭关修行中......

reply all(4)
巴扎黑

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

Ty80

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

小葫芦

用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 几乎无解。

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template