蚂蚁行军边框效果

先展示效果：
在这里插入图片描述
静态代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .marching-ants {
            padding: 1em;
            border: 1px solid transparent;
            background:
                linear-gradient(white, white) padding-box,
                repeating-linear-gradient(-45deg,
                    black 0, black 25%, white 0, white 50%) 0 / .6em .6em;
            animation: ants 12s linear infinite;
        }
    </style>
</head>
<body>
    <div class="marching-ants"></div>
</body>

</html>

动态效果需要加上以下代码：

<style>
        @keyframes ants {
            to {
                background-position: 100%
            }
        }
    </style>

解析：
background使用了简写形式，其书写顺序为：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit

值	描述
background-color	背景颜色
background-position	背景图像的位置
background-size	背景图片的尺寸
background-repeat	如何重复背景图像
background-origin	背景图片的定位区域
background-clip	背景的绘制区域
background-attachment	背景图像是否固定或者随着页面的其余部分滚动
background-image	要使用的背景图像
inherit	应该从父元素继承 background 属性的设置

可以设置多重背景，并用逗号隔开，设置在前面的总是会覆盖后面的。这里设置了两层背景，第一层背景使用线性渐变linear-gradient设置了从白色到白色的渐变，padding-box是background-clip属性的值，表示背景图片绘制在内边距方框内。其实就是绘制了一个白色的块，用来遮盖第二层背景的中间部分，保留边框部分。

第二层背景使用重复的线性渐变repeating-linear-gradient设置了黑白相间的条纹渐变，渐变方向倾斜45度角，以实现边框部分黑白相间的效果。这里用到的是bg-image position/bg-size这三个属性。即：

background-image 这里用repeating-linear-gradient实现了
background-position 背景图片的起始位置，默认为 0% 0%，此处取值0% 0%表示起始位置设为左上角
background-size 设置背景图片的大小，用来适当缩小黑白条纹

实现动态效果: animation设置动画的播放效果，书写顺序为： animation: name duration timing-function delay iteration-count direction fill-mode play-state

值	描述
animation-name	需要绑定到选择器的 keyframe 名称
animation-duration	完成动画所花费的时间，以秒或毫秒计
animation-timing-function	动画的速度曲线
animation-delay	在动画开始之前的延迟
animation-iteration-count	动画应该播放的次数
animation-direction	是否应该轮流反向播放动画

使用 @keyframes后跟动画名来定义一个动画，通过逐步改变从一个CSS样式过渡到另一个。可以指定每个阶段的样式，0％是动画开始时的样式，100％是动画结束时的样式，也可以使用关键字"from"和"to"来指定开始和结束的动画样式

本例中，要过渡的背景图片的位置从左上角（0% 0%）逐渐过渡到右下角（100% 100%），看起来的效果就像边框动起来了一样。

参考：《CSS揭秘》
w3school
https://www.jianshu.com/p/04b69172ab9e

蚂蚁行军边框效果

猜你喜欢