先展示效果:
静态代码如下:
<!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