css 蚂蚁行军边框效果

接下来我们要实现这样的效果:

css 蚂蚁行军边框效果

HTML代码:

<div class="ants-border">
   Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium, debitis vel quam tempora ut nisi voluptatibus rem ab. Quas, cum. Itaque, dignissimos! Quos, eos placeat eveniet quasi amet eius officiis!
</div>

CSS代码:

.ants-border{
   width: 500px;
   padding: 1em;
   border: 1px solid transparent;
   background-image: linear-gradient(white, white), 
                     repeating-linear-gradient(
                        -45deg,
                        #000 0%, #000 25%,
                        #fff 0%, #fff 50%
                     );
  background-size: 10px 10px;
  background-clip: padding-box, border-box;
  animation: ants 10s linear infinite;
}
@keyframes ants {
  to {
     background-position: 100%;
  }
}

绘制步骤:

1、给div加一层黑白色条纹背景。

.ants-border{
   width: 500px;
   background-image: repeating-linear-gradient(-45deg, #000 0%, #000 25%, #fff 0%, #fff 50%); 
   background-size: 10px 10px;  /*控制条纹的宽度*/
   /*默认背景图像会repeat铺满全屏*/
}

黑白色条纹背景

2、再加一层白色背景。当一个元素设置多个background-image时,如果位置重叠,则写在前面的背景会覆盖写在后面的背景。此时背景为白色。

.ants-border{
   ...
   background-image: linear-gradient(white, white),repeating-linear-gradient(-45deg, #000 0%, #000 25%, #fff 0%, #fff 50%); 
   background-size: 10px 10px;
}

3、背景有一个属性background-clip,初始值是border-box,意味着背景会铺满border-box。

背景会铺满border-box

为了让条纹背景露出来形成蚂蚁边框,我们将两层背景的background-clip分别设为padding-boxborder-box

.ants-border{
   ...
   background-image: linear-gradient(white, white),repeating-linear-gradient(-45deg, #000 0%, #000 25%, #fff 0%, #fff 50%); 
   background-size: 10px 10px;
   background-clip: padding-box, border-box;
}

此时白色背景铺满padding-box,条纹背景铺满border-box,此时依然时白色背景,因为没有设置border时,这两个box的范围是重叠的。所以设置一个1px的border,颜色为透明色。

.ants-border{
   ...
   border: 1px solid transparent;
}

白色背景铺满padding-box

4、通过动画不断改变背景的位置,形成移动的“蚂蚁”

@keyframes ants {
   to {
       background-position: 100%;
   }
}

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » css 蚂蚁行军边框效果

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们