image.png
知识点
-
linear-gradient()
用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
-
background-size
设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
- cover
缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。 - contain
缩放背景图片以完全装入背景区，可能背景区部分空白。
/* 关键字 */
background-size: cover
background-size: contain
/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto
/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
-
box-shadow
由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了border-radius，阴影也会有圆角效果。多个阴影的z-ordering 和多个 text shadows 规则相同(第一个阴影在最上面)。
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 0 0 2px deeppink,
0 0 5px rgba(0, 0, 0, 1),
inset 0 0 5px rgba(0, 0, 0, 1);
border-radius: 10px;
- inset
不使用inset，默认阴影在边框外，即阴影向外扩散。
使用 inset 后，阴影在边框内（即使是透明边框），即阴影向内扩散，背景之上内容之下。
4.background-position
为每一个背景图片设置初始位置。
-
center，用来居中背景图片。 - 关键字
top,left,bottom,right中的一个。用来指定把这个项目（原文为 item）放在哪一个边缘。另一个维度被设置成 50%，所以这个项目（原文为 item）被放在指定边缘的中间位置。 -
<length>或<percentage>。指定相对于左边缘的 x 坐标，y 坐标被设置成 50%。
@keyframes animate {
from {
background-position: 0;
}
to {
background-position: 0 450px;
}
}
代码
<style type="text/css">
html, body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background-color: pink;
}
.strip {
width: 300px;
height: 300px;
box-sizing: border-box;
padding: 15px;
position: relative;
overflow: hidden;
}
.strip::before {
content: '';
position: absolute;
background: repeating-linear-gradient(
white 0%,
white 7.5px,
hotpink 7.5px,
hotpink 15px,
white 15px,
white 22.5px,
hotpink 22.5px,
hotpink 30px
);
width: 150%;
height: 150%;
transform: translate(-20%) translateY(-20%) rotate(-45deg);
animation: animate 20s linear infinite;
}
.strip #content{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-direction: column;
background-color: white;
box-sizing: border-box;
text-align: center;
font-family: sans-serif;
padding: 30px;
z-index: 2;
}
.strip, .strip #content {
box-shadow: 0 0 2px deeppink,
0 0 5px rgba(0, 0, 0, 1),
inset 0 0 5px rgba(0, 0, 0, 1);
border-radius: 10px;
}
h2 {
color: deeppink;
}
p {
color: dimgray;
}
@keyframes animate {
from {
background-position: 0;
}
to {
background-position: 0 450px;
}
}
</style>
