【前端技巧】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 32
    32'%3E%3Cpath d='M28.027
    5.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, transparent
    150px, 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;
    }
}

进度圆环动画效果


    
        
            
            
        
    
    
    
    0%

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);
}

你可能感兴趣的:(前端技巧,CSS,前端,css)