蚂蚁行军边框效果
先展示效果：
静态代码如下：
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><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
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！