【前端技巧】CSS常用知识碎片（九）

CSS常用知识碎片（九）

mask-image属性

带有半透明的PNG图像的遮罩效果

.mask-image {mask: no-repeat center / contain;mask-image: url(bird.png);
}

SVG图形遮罩效果

.mask-image {mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 3232'%3E%3Cpath d='M28.0275.161l-17.017 17.017-7.007-7.007-3.003 3.003 10.010 10.010 20.020-20.020z'%3E%3C/path%3E%3C/svg%3E");mask-repeat: no-repeat;
}

用渐变图像实现遮罩效果

.mask-image {width: 256px; height: 192px;mask-image: radial-gradient(600px 80px at top, transparent150px, black 152px 1000px,transparent 0)，radial-gradient(600px 80px at bottom, transparent 150px,black 152px 1000px,transparent 0);
}

CSS遮罩的一些经典应用示例

CSS遮罩实现的渐变小图标效果

/* 纯色 */
.icon-delete {display: inline-block;width: 20px; height: 20px;/* 背景色设为当前color的颜色 */background-color: currentColor;/* 小图标图像作为遮罩图像使用 */--mask: url(delete.png) no-repeat center / 1.125em 1.125em;-webkit-mask: var(--mask);mask: var(--mask);
}
/* 渐变色 */
.icon-delete {background: linear-gradient(deepskyblue, deeppink);mask: url(delete.png) no-repeat center;
}

倒影效果

-webkit-box-reflect: below;

`scroll-behavior: smooth` 平滑切换容器

.box {scroll-behavior: smooth;overflow: hidden;
}

可在CSS重置时，统一对页面滚动做平滑处理

html, body { scroll-behavior:smooth; }

利用 `overscroll-behavior: contain` 默认的滚动溢出行为只会表现在当前元素的内部（例如“反弹”效果或刷新），不会对相邻的滚动区域进行滚动。

overscroll-behavior: contain;

利用 `overflow-anchor:auto` 滚动锚定,优化局部元素滚动效果

overflow-anchor: auto;

CSS Scroll Snap

利用 CSS Scroll Snap 让页面滚动停留在你希望用户关注的重点区域

<body><div class="scroll-x"><img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg"></div>
</body>
<style>
.scroll-x {max-width: 414px; height: 420px;scroll-snap-type: x mandatory;white-space: nowrap;overflow: auto;
}
.scroll-x img {scroll-snap-align: center;
}
</style>

scroll-snap-type属性

作用：确定定位方式是水平滚动定位，还是垂直滚动定位。

属性值	释义
none	默认值，表示滚动时忽略捕捉点，也就是我们平时使用的滚动
x	捕捉水平定位点
y	捕捉垂直定位点
block	捕捉和块状元素排列一个滚动方向的定位点，默认文档流下指的就是垂直轴
inline	捕捉和内联元素排列一个滚动方向的定位点，默认文档流下指的就是水平轴
both	横轴、纵轴都捕捉
mandatory	表示“强制”，为可选参数。强制定位，也就是如果存在有效的定位点位置，则滚动容器必须在滚动结束时进行定位
proximity	表示“大约”，为可选参数。可能会定位，类似这种表意模糊的词是最难理解的，这个值的作用表现为让浏览器自己判断要不要定位。

scroll-snap-stop属性

作用：是否允许滚动容器忽略捕获位置。

属性值	释义
normal	默认值，可以忽略捕获位置
always	不能忽略捕获位置，且必须定位到第一个捕获元素的位置

scroll-snap-align属性

作用：在滚动容器子元素上的，表示捕获点是上边缘、下边缘或中间位置。

属性值	释义
none	默认值，不定义位置
start	起始位置对齐，如垂直滚动、子元素和容器同上边缘对齐
end	结束位置对齐，如垂直滚动、子元素和容器同下边缘对齐
center	居中对齐，子元素中心和滚动容器中心一致

使用cater-color属性改变插入光标的颜色

input {color: #333;caret-color: red;
}

user-select属性

禁止图文被选中

body {-webkit-user-select: none;user-select: none;
}

单击元素选中所有图文

section {user-select: all;
}

签名动画效果

path {stroke-dasharray: 1000;stroke-dashoffset: 1000;animation: dash 5s linear infinite;
}
@keyframes dash {to {stroke-dashoffset: 0;}
}

进度圆环动画效果

<svg width="440" height="440" viewBox="0 0 440 440"><defs><linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient"><stop offset="0%" stop-color="#e52c5c"></stop><stop offset="100%" stop-color="#ab5aea"></stop></linearGradient></defs><circle cx="220" cy="220" r="170" class="circle-track"></circle><circle cx="220" cy="220" r="170" transform="rotate(-90 220 220)" class="circle-bar"></circle><text class="text" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">0%</text>
</svg>
circle {
stroke-width: 50px;
fill: none;
stroke-dasharray: 1069px;circle {stroke-width: 50px;fill: none;stroke-dasharray: 1069px;
}
.circle-track {stroke: #f0f1f5;
}
.circle-bar {stroke-dashoffset: 1069px;stroke: url(#gradient);
}
.text {font-size: 50px;
}circle {stroke-width: 50px;fill: none;stroke-dasharray: 1069px;
}
.circle-track {stroke: #f0f1f5;
}
.circle-bar {stroke-dashoffset: 1069px;stroke: url(#gradient);
}
.text {font-size: 50px;
}
/* 灰色进度槽 */
stroke: #f0f1f5;
}
/* 渐变进度条 */
.circle-bar {
/* stroke-dashoffset慢慢变小，进度条就会慢慢出现 */
stroke-dashoffset: 1069px;
stroke: url(#gradient);
}