CSS常用知识碎片（九）
mask-image属性
.mask-image {mask: no-repeat center / contain;mask-image: url(bird.png);
}
.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遮罩的一些经典应用示例
.icon-delete {display: inline-block;width: 20px; height: 20px;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: 1069px;
stroke: url(#gradient);
}
