灵活运用CSS开发技巧（转载）

分手后的思念是犯贱 2023-07-08 02:55 15阅读 0赞

何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。

每写好一篇文章，都会使用大量的写作技巧。`烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情`等，这些应该都是我们从小到大写文章而接触到的写作技巧。

作为程序猿的我们，写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新，让人容易理解，让人舒服自然，同时也让自己成就感满满(哈哈，这个才是重点)。因此，我整理下三年来自己使用到的一些**CSS开发技巧**，希望能让你写出耳目一新、容易理解、舒服自然的代码。

--------------------

本来只是奔着标题去看一下而已，结果发现这里面的内容是真的好用，很多都贴近实际用到的，所以还是自己用自己的方式储存一下，方便后续学习

主要分为以下几个部分

1：Layout Skill：布局技巧

2：Behavior Skill：行为技巧

3：Color Skill：色彩技巧

4：Figure Skill：图形技巧

5：Component Skill：组件技巧

**Layout Skill：**

**使用vw定制rem自适应布局**

要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size,结合vw单位和calc()可脱离JS的控制

场景：rem页面布局（不兼容低版本移动端系统）

兼容：vw、calc()

/*基于UI width=750px DPR=2的页面*/
    html{
        font-size: calc(100vw/7.5);
    }

**使用：nth-child()选择指定元素**

要点：通过:nth-child()筛选置顶的元素设置样式

场景：表格着色、边界元素排版（首元素、尾元素、左右两边元素）

兼容：:nth-child()

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <ul class="specified-scope">
            <li>10001</li>
            <li>10002</li>
            <li>10003</li>
            <li>10004</li>
            <li>10005</li>
            <li>10006</li>
            <li>10007</li>
            <li>10008</li>
            <li>10009</li>
            <li>10010</li>
        </ul>
    </div>
    /*css部分*/
    .specified-scope {
        width: 300px;
        li {
            padding: 0 20px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            &:nth-child(odd) {
                background-color: $red;
            }
            &:nth-child(even) {
                background-color: $purple;
            }
            &:nth-child(n+6):nth-child(-n+10) {
                background-color: $green;
            }
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png][]

**使用writing-mode排版竖文**

要点：通过writing-mode调整文本排版方向

场景：竖行文字、文言文、诗词

兼容：writing-mode

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="vertical-text">
            <h3>情</h3>
            <p>我见犹怜，<br>爱不释手。<br>雅俗共赏，<br>君子好逑。</p>
        </div>
    </div>
    /*css部分.vertical-text {
        writing-mode: vertical-rl;
        h3 {
            padding-left: 20px;
            font-weight: bold;
            font-size: 18px;
            color: $red;
        }
        p {
            line-height: 30px;
            color: $purple;
        }
    }*/

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 1][]

**使用text-align-last对齐两端文本**

要点：通过text-align-last:justify设置文本两端对齐

场景：未知字数中文对齐

兼容：text-align-last

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <ul class="justify-text">
            <li>账号</li>
            <li>密码</li>
            <li>电子邮件</li>
            <li>通讯地址</li>
        </ul>
    </div>
    /*css部分*/
    .justify-text {
        li {
            margin-top: 5px;
            padding: 0 20px;
            width: 100px;
            height: 40px;
            background-color: $red;
            line-height: 40px;
            text-align-last: justify;
            color: #fff;
            &:first-child {
                margin-top: 0;
            }
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 2][]

**使用:not()去除无用属性**

要点：通过:not()排除置顶元素不使用设置样式

场景：符号分割文字、边界元素排版

兼容：:nor()

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <ul class="cleared-attr">
            <li class="first-line">
                <span>A</span>
                <span>B</span>
                <span>C</span>
                <span>D</span>
                <span>E</span>
            </li>
            <li class="second-line">
                <span>A</span>
                <span>B</span>
                <span>C</span>
                <span>D</span>
                <span>E</span>
            </li>
        </ul>
    </div>
    /*css部分*/
    .cleared-attr {
        li {
            height: 40px;
            line-height: 40px;
        }
        span {
            display: inline-block;
            color: $purple;
        }
        .first-line span:not(:last-child)::after {
            content: ",";
        }
        .second-line span:not(:nth-child(-n+3)) {
            display: none;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 3][]

**使用object-fit规定图像尺寸**

要点：通过object-fit使图像脱离background-size的约束，使用<img>来标记图像背景尺寸

场景：图片尺寸自适应

兼容：object-fit

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-y">
        <h1>我家乖狗狗：AB</h1>
        <ul class="image-size">
            <li>
                <h3>Cover</h3>
                <img src="https://yangzw.vip/static/codepen/ab-1.jpg" class="cover">
            </li>
            <li>
                <h3>Contain</h3>
                <img src="https://yangzw.vip/static/codepen/ab-1.jpg" class="contain">
            </li>
            <li>
                <h3>Fill</h3>
                <img src="https://yangzw.vip/static/codepen/ab-2.jpg" class="fill">
            </li>
            <li>
                <h3>ScaleDown</h3>
                <img src="https://yangzw.vip/static/codepen/ab-2.jpg" class="scale-down">
            </li>
        </ul>
    </div>
    /*css部分*/
    h1 {
        line-height: 50px;
        font-weight: bold;
        font-size: 30px;
        color: $red;
    }
    .image-size {
        display: flex;
        justify-content: space-between;
        width: 1000px;
        height: 300px;
        li {
            width: 200px;
        }
        h3 {
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
        }
        img {
            width: 100%;
            height: 260px;
            background-color: $green;
            &.cover {
                object-fit: cover;
            }
            &.contain {
                object-fit: contain;
            }
            &.fill {
                object-fit: fill;
            }
            &.scale-down {
                object-fit: scale-down;
            }
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 4][]

**使用overflow-x排版横向列表**

要点：通过flexbox或inline-block的形式横向排列元素，对父元素设置overflow-x:auto横向滚动查看

场景：横向滚动列表、元素过多但位置有限的导航栏

兼容：overflow-x

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-y">
        <div class="horizontal-list flex">
            <ul>
                <li>Alibaba</li>
                <li>Tencent</li>
                <li>Baidu</li>
                <li>Jingdong</li>
                <li>Ant</li>
                <li>Netease</li>
                <li>Meituan</li>
                <li>ByteDance</li>
                <li>360</li>
                <li>Sina</li>
            </ul>
        </div>
        <div class="horizontal-list inline">
            <ul>
                <li>Alibaba</li>
                <li>Tencent</li>
                <li>Baidu</li>
                <li>Jingdong</li>
                <li>Ant</li>
                <li>Netease</li>
                <li>Meituan</li>
                <li>ByteDance</li>
                <li>360</li>
                <li>Sina</li>
            </ul>
        </div>
    </div>
    /*css部分*/
    .horizontal-list {
        overflow: hidden;
        width: 300px;
        height: 100px;
        ul {
            overflow-x: scroll;
            cursor: pointer;
            &::-webkit-scrollbar {
                height: 10px;
            }
            &::-webkit-scrollbar-track {
                background-color: #f0f0f0;
            }
            &::-webkit-scrollbar-thumb {
                border-radius: 5px;
                background-color: $red;
            }
        }
        li {
            overflow: hidden;
            margin-left: 10px;
            height: 90px;
            background-color: $purple;
            line-height: 90px;
            text-align: center;
            font-size: 16px;
            color: #fff;
            &:first-child {
                margin-left: 0;
            }
        }
    }
    .flex {
        ul {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
        }
        li {
            flex-shrink: 0;
            flex-basis: 90px;
        }
    }
    .inline {
        margin-top: 10px;
        height: 102px;
        ul {
            overflow-y: hidden;
            white-space: nowrap;
        }
        li {
            display: inline-block;
            width: 90px;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 5][]

**使用text-overflow控制文本溢出**

要点：通过text-overflow:ellipsis对溢出的文本在末端添加...

场景：单行文字溢出、多行文字溢出

兼容：text-overflow、line-clamp、box-orient

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-y">
        <p class="single-line sl-ellipsis">CSS非常有趣和搞怪，可以做一些JS也能做的事情</p>
        <p class="multiple-line ml-ellipsis">层叠样式表(CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
        <p class="multiple-line mls-ellipsis">层叠样式表(CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
    </div>
    /*css部分*/
    p[class*=-line] {
        line-height: 30px;
        font-size: 20px;
    }
    .single-line {
        width: 200px;
    }
    .multiple-line {
        margin-top: 10px;
        width: 400px;
        text-align: justify;
    }
    .sl-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ml-ellipsis {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        /* autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
    }
    .mls-ellipsis {
        overflow: hidden;
        position: relative;
        max-height: 90px;
        &::after {
            position: absolute;
            right: 0;
            bottom: 0;
            padding-left: 40px;
            background: linear-gradient(to right, transparent, #fff 50%);
            content: "...";
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 6][]

**使用transform描绘1px边框**

要点：分辨率比较低的屏幕下显示1px的边框会显得模糊，通过::before或::after和transform模拟细腻的1px边框

场景：容器1px边框

兼容：transform

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-y">
        <div class="onepx-border normal">1px</div>
        <div class="onepx-border thin">0.5px</div>
    </div>
    /*css部分*/
    .onepx-border {
        margin-top: 10px;
        width: 200px;
        height: 80px;
        cursor: pointer;
        line-height: 80px;
        text-align: center;
        font-weight: bold;
        font-size: 50px;
        color: $red;
        &:first-child {
            margin-top: 0;
        }
    }
    .normal {
        border: 1px solid $red;
    }
    .thin {
        position: relative;
        &::after {
            position: absolute;
            left: 0;
            top: 0;
            border: 1px solid $red;
            width: 200%;
            height: 200%;
            content: "";
            transform: scale(.5);
            transform-origin: left top;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 7][]

使用transform翻转内容

要点：通过transform:scale3d()对内容进行翻转（水平翻转、垂直翻转、倒序翻转）

场景：内容翻转

兼容：transform

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <ul class="horizontal-flip">
            <li>正常文本</li>
            <li class="x-axis">水平翻转</li>
            <li class="y-axis">垂直翻转</li>
            <li class="reverse">倒序翻转</li>
        </ul>
    </div>
    /*css部分*/
    .horizontal-flip {
        li {
            position: relative;
            margin-top: 10px;
            width: 121px;
            height: 51px;
            line-height: 51px;
            text-align: center;
            font-weight: bold;
            font-size: 30px;
            color: $red;
            &::before,
            &::after {
                position: absolute;
                background-color: $purple;
                content: "";
            }
            &:first-child {
                margin-top: 0;
            }
        }
    }
    .x-axis {
        transform: scale3d(1, -1, 1);
        &::after {
            left: 0;
            top: 25px;
            width: 100%;
            height: 1px;
        }
    }
    .y-axis {
        transform: scale3d(-1, 1, 1);
        &::after {
            left: 60px;
            top: 0;
            width: 1px;
            height: 100%;
        }
    }
    .reverse {
        transform: scale3d(-1, -1, 1);
        &::before {
            left: 0;
            top: 25px;
            width: 100%;
            height: 1px;
        }
        &::after {
            left: 60px;
            top: 0;
            width: 1px;
            height: 100%;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 8][]

**使用letter-spacing排版倒序文本**

要点：通过letter-spacing设置负值字体间距将文本倒序

场景：文言文、诗词

兼容：letter-spacing

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="reverse-text">恭喜发财</div>
    </div>
    /*css部分*/
    .reverse-text {
        font-weight: bold;
        font-size: 50px;
        color: $red;
        letter-spacing: -100px; // letter-spacing最少是font-size的2倍
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 9][]

使用margin-left排版左重右轻列表

要点：使用flexbox横向布局时，最后一个元素通过margin-left:auto实现向右对齐

场景：右侧带图标的导航栏

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <ul class="left-list">
            <li>Alibaba</li>
            <li>Tencent</li>
            <li>Baidu</li>
            <li>Jingdong</li>
            <li>Ant</li>
            <li>Netease</li>
        </ul>
    </div>
    /*css部分*/
    .left-list {
        display: flex;
        align-items: center;
        padding: 0 10px;
        width: 600px;
        height: 60px;
        background-color: $green;
        li {
            padding: 0 10px;
            height: 40px;
            background-color: $orange;
            line-height: 40px;
            font-size: 16px;
            color: #fff;
            & + li {
                margin-left: 10px;
            }
            &:last-child {
                margin-left: auto;
            }
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 10][]

**Behavior Skill**

**使用overflow-scrolling支持弹性滚动**

要点：ios页面非body元素的滚动操作会非常卡（Android不会出现此情况），通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动，增加页面滚动的流畅度

场景：IOS页面滚动

兼容：IOS自带-webkit-overflow-scrolling

例子：

body {
        -webkit-overflow-scrolling: touch;
    }
    .elem {
        overflow: auto;
    }

**使用transform启动GPU硬件加速**

要点：有时执行动画可能会导致页面卡顿，可在特定元素中使用硬件加速来避免这个问题

场景：动画元素（绝对定位、同级中超过6个以上使用动画）

例子：

.elem {
        transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */
    }

**使用attr()抓取data-\***

要点：在标签上自定义属性data-\*，通过attr()获取其内容赋值到content上

场景：提示框

兼容：data-\*、attr()

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-y">
        <a class="tooltips" href="https://www.baidu.com" data-msg="Hello World">提示框</a>
        <a class="tooltips" href="https://www.baidu.com"></a>
    </div>
    /*css部分*/
    .tooltips {
        position: relative;
        margin-top: 10px;
        padding: 0 20px;
        border-radius: 10px;
        height: 40px;
        background-color: $purple;
        line-height: 40px;
        color: #fff;
        &::after {
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 5px;
            width: 100%;
            height: 100%;
            background-color: rgba(#000, .5);
            opacity: 0;
            text-align: center;
            font-size: 12px;
            content: attr(data-msg);
            transition: all 300ms;
        }
        &:first-child {
            margin-top: 0;
        }
        &:hover::after {
            left: calc(100% + 20px);
            opacity: 1;
        }
        &[href]:empty::before {
            content: attr(href);
        }
        &[href]:empty:hover::after {
            display: none;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 11][]

**使用:valid和:invalid校验表单**

要点：<input>使用伪类:valid和:invalid配合pattern校验表单输入的内容

场景：表单校验

兼容：pattern、:valid、:invalid

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <form class="form-validation">
            <div>
                <label>名字</label>
                <input type="text" placeholder="请输入你的名字(1到10个中文)" pattern="^[\u4e00-\u9fa5]{1,10}$" required>
            </div>
            <div>
                <label>手机</label>
                <input type="text" placeholder="请输入你的手机" pattern="^1[3456789]\d{9}$" required>
            </div>
            <div>
                <label>简介</label>
                <textarea required></textarea>
            </div>
        </form>
    </div>
    /*css部分*/
    .form-validation {
        width: 500px;
        div {
            margin-top: 10px;
            &:first-child {
                margin-top: 0;
            }
        }
        label {
            display: block;
            padding-bottom: 5px;
            font-weight: bold;
            font-size: 16px;
        }
        input,
        textarea {
            display: block;
            padding: 0 20px;
            outline: none;
            border: 1px solid #ccc;
            width: 100%;
            height: 40px;
            caret-color: $blue;
            transition: all 300ms;
            &:valid {
                border-color: $green;
                box-shadow: inset 5px 0 0 $green;
            }
            &:invalid {
                border-color: $red;
                box-shadow: inset 5px 0 0 $red;
            }
        }
        textarea {
            height: 122px;
            resize: none;
            line-height: 30px;
            font-size: 16px;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 12][]

**使用pointer-events禁用事件触发**

要点：通过pointer-events:none禁用事件触发（默认事件、冒泡事件、鼠标事件、键盘事件等），相当于<button>的disabled

场景：限时点击按钮（发送验证码倒计时）、事件冒泡禁用（多个元素重叠且自带事件、a标签跳转）

兼容：pointer-events

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <a class="disabled-trigger" href="https://www.baidu.com">点我</a>
    </div>
    /*css部分*/
    .disabled-trigger {
        padding: 0 20px;
        border-radius: 10px;
        height: 40px;
        background-color: $purple;
        pointer-events: none;
        line-height: 40px;
        color: #fff;
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 13][]

**使用+或~美化选项框**

要点：<label>使用+或~配合for绑定radio或checkbox的选择行为

场景：选项框美化、选中项增加选中样式

兼容：+、~

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <ul class="beauty-selection">
            <li>
                <input type="radio" name="radioName" id="fed-engineer" hidden>
                <label for="fed-engineer"></label>
                <span>前端工程师</span>
            </li>
            <li>
                <input type="radio" name="radioName" id="bed-engineer" hidden>
                <label for="bed-engineer"></label>
                <span>后端工程师</span>
            </li>
            <li>
                <input type="radio" name="radioName" id="fsd-engineer" hidden>
                <label for="fsd-engineer"></label>
                <span>全栈工程师</span>
            </li>
        </ul>
    </div>
    /*css部分*/
    .beauty-selection {
        display: flex;
        li {
            display: flex;
            align-items: center;
            margin-left: 20px;
            &:first-child {
                margin-left: 0;
            }
        }
        input:checked + label {
            background-color: $orange;
        }
        label {
            margin-right: 5px;
            padding: 2px;
            border: 1px solid $orange;
            border-radius: 100%;
            width: 18px;
            height: 18px;
            background-clip: content-box;
            cursor: pointer;
            transition: all 300ms;
            &:hover {
                border-color: $blue;
                background-color: $blue;
                box-shadow: 0 0 7px $blue;
            }
        }
        span {
            font-size: 16px;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 14][]

**使用:focus-within分发冒泡响应**

要点：表单控件触发focus和blur事件后往父元素进行冒泡，在父元素上通过:focus-within分发冒泡捕获该冒泡事件来设置样式

场景：登录注册弹框、表单校验、离屏导航、导航切换

兼容：:focus-within、:placeholder-shown

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <form class="bubble-distribution">
            <h3>注册</h3>
            <div class="accout">
                <input type="text" placeholder="请输入手机或邮箱" pattern="^1[3456789]\d{9}$|^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$" required>
                <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png">
            </div>
            <div class="password">
                <input type="password" placeholder="请输入密码(6到20位字符)" pattern="^[\dA-Za-z_]{6,20}$" required>
                <img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png">
            </div>
            <div class="code">
                <input type="text" placeholder="请输入邀请码(6位数字)" pattern="^[\d]{6}$" maxLength="6" required>
                <button type="button">查询</button>
                <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png">
            </div>
            <img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png">
            <ul>
                <li>
                    <input type="radio" name="sex" id="male">
                    <label for="male">Boy</label>
                </li>
                <li>
                    <input type="radio" name="sex" id="female">
                    <label for="female">Girl</label>
                </li>
            </ul>
            <button type="button">注册</button>
        </form>
    </div>
    /*css部分*/
    .bruce {
        background-color: #999;
    }
    .bubble-distribution {
        position: relative;
        margin-top: 50px;
        padding: 25px;
        border-radius: 2px;
        width: 320px;
        background-color: #fff;
        h3 {
            font-weight: bold;
            font-size: 16px;
            color: #333;
        }
        div {
            margin-top: 10px;
        }
        img {
            position: absolute;
            left: 50%;
            bottom: 100%;
            margin: 0 0 -20px -60px;
            width: 120px;
        }
        ul {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            height: 30px;
            line-height: 30px;
        }
        li {
            position: relative;
            width: 45%;
            transition: all 300ms;
            &:focus-within {
                background: linear-gradient(90deg, $blue 50%, transparent 0) repeat-x,
                    linear-gradient(90deg, $blue 50%, transparent 0) repeat-x,
                    linear-gradient(0deg, $blue 50%, transparent 0) repeat-y,
                    linear-gradient(0deg, $blue 50%, transparent 0) repeat-y;
                background-position: 0 0, 0 100%, 0 0, 100% 0;
                background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
                animation: move 500ms infinite linear;
            }
        }
        input[type=text],
        input[type=password] {
            padding: 10px;
            outline: none;
            border: 1px solid #e9e9e9;
            border-radius: 2px;
            width: 100%;
            height: 40px;
            transition: all 300ms;
            &:focus:valid {
                border-color: $blue;
            }
            &:focus:invalid {
                border-color: $red;
            }
        }
        input[type=radio] {
            position: absolute;
            width: 0;
            height: 0;
            &:checked + label {
                border: 3px solid transparent;
                background-color: $blue;
                color: #fff;
            }
        }
        label {
            display: block;
            border-bottom: 1px solid #ccc;
            width: 100%;
            background-clip: padding-box;
            cursor: pointer;
            text-align: center;
            transition: all 300ms;
        }
        button {
            overflow: hidden;
            margin-top: 10px;
            outline: none;
            border: none;
            border-radius: 2px;
            width: 100%;
            height: 40px;
            background-color: $blue;
            cursor: pointer;
            color: #fff;
            transition: all 300ms;
        }
    }
    .accout,
    .password,
    .code {
        img {
            display: none;
            margin-bottom: -27px;
        }
        &:focus-within {
            img {
                display: block;
            }
            & ~ img {
                display: none;
            }
        }
    }
    .code {
        display: flex;
        justify-content: space-between;
        button {
            margin-top: 0;
        }
        input {
            &:not(:placeholder-shown) {
                width: 70%;
                & + button {
                    width: 25%;
                }
            }
            &:placeholder-shown {
                width: 100%;
                & + button {
                    width: 0;
                    opacity: 0;
                }
            }
        }
    }
    @keyframes move {
        to {
            background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 15][]

**使用:hover描绘鼠标跟随**

要点：将整个页面等比划分成小的单元格，每个单元格监听:hover，通过:hover触发单元格的样式变化来描绘鼠标运动轨迹

场景：鼠标跟随轨迹、水波纹、怪圈

兼容：:hover

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    .bruce
        .mouse-following
            - for (var i = 0; i < 500; i++)
                li
    /*css部分*/
    @function randomNum($max, $min: 0, $u: 1) {
        @return ($min + random($max)) * $u;
    }
    
    .mouse-following {
        display: flex;
        overflow: hidden;
        flex-wrap: wrap;
        height: 100%;
        cursor: pointer;
        li {
            position: relative;
            width: 30px;
            height: 30px;
            &::before {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                border-radius: 100%;
                background-color: transparent;
                content: "";
                transform: scale3d(.1, .1, 1);
                transition: all 500ms ease-in;
            }
            &:hover {
                &::before {
                    transform: scale3d(1.8, 1.8, 1.8);
                    transition: transform 0s;
                }
            }
            @for $i from 1 through 500 {
                &:nth-child(#{$i}):hover {
                    &::before {
                        background-color: rgba(randomNum(255), randomNum(255), randomNum(255), .8);
                    }
                }
            }
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 16][]

**使用max-height切换自动高度**

要点：通过max-height定义收起的最小高度和展开的最大高度，设置两者间的切换过渡

场景：隐藏式子导航栏、悬浮式折叠面板

兼容：max-height

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <ul class="auto-height">
            <li>
                <h3>列表1</h3>
                <p>内容1<br>内容2<br>内容3<br>内容4</p>
            </li>
            <li>
                <h3>列表2</h3>
                <p>内容1<br>内容2<br>内容3<br>内容4</p>
            </li>
            <li>
                <h3>列表3</h3>
                <p>内容1<br>内容2<br>内容3<br>内容4</p>
            </li>
        </ul>
    </div>
    /*css部分*/
    .auto-height {
        width: 300px;
        li {
            margin-top: 5px;
            cursor: pointer;
            &:first-child {
                margin-top: 0;
            }
            &:hover p {
                border-bottom-width: 1px;
                max-height: 600px;
            }
        }
        h3 {
            padding: 0 20px;
            height: 40px;
            background-color: $red;
            cursor: pointer;
            line-height: 40px;
            font-size: 16px;
            color: #fff;
        }
        p {
            overflow: hidden;
            padding: 0 20px;
            border: 1px solid $red;
            border-top: none;
            border-bottom-width: 0;
            max-height: 0;
            line-height: 30px;
            transition: all 500ms;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

**使用transform模拟视差滚动**

要点：通过background-attachment:fixed或transform让多层背景以不同的速度移动，形成立体的运动效果

场景：页面滚动、视差滚动文字阴影、视差滚动文字虚影

兼容：background-attachment、transform

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce">
        <ul class="parallax-scrolling">
            <li>translateZ(-1px)</li>
            <li>translateZ(-2px)</li>
            <li>translateZ(-3px)</li>
        </ul>
        <p>内容</p>
        <ul class="parallax-scrolling">
            <li>translateZ(-1px)</li>
            <li>translateZ(-2px)</li>
            <li>translateZ(-3px)</li>
        </ul>
    </div>
    /*css部分*/
    $bg: "https://yangzw.vip/static/codepen/bg.jpg";
    
    .bruce {
        overflow: auto;
        perspective: 1px;
        transform-style: preserve-3d;
        p {
            height: 300px;
            line-height: 300px;
            text-align: center;
            font-size: 20px;
            color: $red;
        }
    }
    .parallax-scrolling {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 1000px;
        background: url($bg) no-repeat center fixed;
        li {
            width: 500px;
            text-align: center;
            font-weight: bold;
            font-size: 60px;
            &:nth-child(1) {
                color: $red;
                transform: translateZ(-1px);
            }
            &:nth-child(2) {
                color: $blue;
                transform: translateZ(-2px);
            }
            &:nth-child(3) {
                color: $green;
                transform: translateZ(-3px);
            }
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 17][]

**使用animation-delay保留动画起始帧**

要点：通过transform-delay或animation-delay设置负值时延保留动画起始帧，让动画进入页面不用等待即可运行

场景：开场动画

兼容：transform、animation

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <ul class="initial-keyframe">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    /*css部分*/
    .initial-keyframe {
        position: relative;
        width: 100px;
        height: 100px;
        li {
            position: absolute;
            border-radius: 100%;
            width: 100%;
            height: 100%;
            background-color: $green;
            transform: rotate(0) translate(-80px, 0);
            animation: rotate 3s linear infinite;
            &:nth-child(2) {
                animation-delay: -1s;
            }
            &:nth-child(3) {
                animation-delay: -2s;
            }
        }
    }
    @keyframes rotate {
        to {
            transform: rotate(1turn) translate(-80px, 0);
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 18][]

**使用resize拉伸分栏**

要点：通过resize设置横向自由拉伸来调整目标元素的宽度

场景：富文本编辑器、分栏阅读

兼容：resize

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="stretching-column">
            <div class="left">
                <div class="resize-bar"></div>
                <div class="resize-line"></div>
                <div class="resize-text">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>                                            
            </div>
            <div class="right">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
        </div>
    </div>
    /*css部分*/
    .stretching-column {
        overflow: hidden;
        border: 1px solid $blue;
        width: 600px;
        height: 300px;
        line-height: 20px;
        font-size: 16px;
        color: $orange;
        .left {
            overflow: hidden;
            float: left;
            position: relative;
            height: 100%;
        }
        .right {
            overflow: hidden;
            padding: 10px;
            height: 100%;
            background-color: #f0f0f0;
            word-break: break-all;
        }
    }
    .resize-bar {
        overflow: scroll;
        width: 200px;
        height: 100%;
        opacity: 0;
        resize: horizontal;
        &::-webkit-scrollbar {
            width: 200px;
            height: 100%;
        }
        &:hover,
        &:active {
            & ~ .resize-line {
                border-left: 1px dashed $blue;
            }
        }
    }
    .resize-line {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        border-left: 1px solid #ccc;
        border-right: 2px solid #f0f0f0;
        pointer-events: none;
    }
    .resize-text {
        overflow-x: hidden;
        position: absolute;
        left: 0;
        right: 5px;
        top: 0;
        bottom: 0;
        padding: 10px;
        word-break: break-all;
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 19][]

**Color Skill**

**使用color改变边框颜色**

要点：border没有定义border-color时，设置color后，border-color会被定义成color

场景：边框颜色与文字颜色相同

兼容：color

例子：

.elem {
        border: 1px solid;
        color: #f66;
    }

效果：

![format_png 20][]

**使用filter开启悼念模式**

要点：通过filter:grayscale()设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们

场景：网站悼念

兼容：filter

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="mourning-mode">
            <img src="https://yangzw.vip/static/codepen/car.jpg">
        </div>
    </div>
    /*css部分*/
    html {
        filter: grayscale(100%);
    }
    .mourning-mode {
        img {
            width: 400px;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 21][]

**使用::selection改变文本选择颜色**

要点：通过::selection根据主题颜色自定义文本选择颜色

场景：主题化

兼容：::selection

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="select-color">
            <p>全局选择文字颜色</p>
            <p>全局选择文字颜色</p>
            <p class="special">局部选择文字颜色</p>
        </div>
    </div>
    /*css部分*/
    ::selection {
        background-color: $purple;
        color: #fff;
    }
    .select-color {
        line-height: 50px;
        font-weight: bold;
        font-size: 30px;
        color: $red;
    }
    .special::selection {
        background-color: $green;
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 22][]

**使用linear-gradient控制背景渐变**

要点：通过linear-gradient设置背景渐变色并放大背景尺寸，添加背景移动效果

背景：主题化、彩虹背景墙

兼容：gradient、animation

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce">
        <div class="gradient-bg">iCSS</div>
    </div>
    /*css部分*/
    .gradient-bg {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background: linear-gradient(135deg, $red, $orange, $green, $blue, $purple) left center/400% 400%;
        font-weight: bold;
        font-size: 100px;
        color: #fff;
        animation: move 10s infinite;
    }
    @keyframes move {
        0%,
        100% {
            background-position-x: left;
        }
        50% {
            background-position-x: right;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 23][]

**使用linear-gradient控制文本渐变**

要点：通过linear-gradient设置背景渐变色，配合background-clip:text对背景进行文本裁剪，添加滤镜动画

场景：主题化、特色标题

兼容：gradient、background-clip、filter、animation、text-fill-color

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <h1 class="gradient-text">Full Stack Developer</h1>
    </div>
    /*css部分*/
    .gradient-text {
        background-image: linear-gradient(90deg, $red, $orange);
        background-clip: text;
        line-height: 60px;
        font-size: 60px;
        animation: hue 5s linear infinite;
        -webkit-text-fill-color: transparent;
    }
    @keyframes hue {
        from {
            filter: hue-rotate(0);
        }
        to {
            filter: hue-rotate(-1turn);
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 24][]

**使用caret-color改变光标颜色**

要点：通过caret-color根据主题颜色自定义光标颜色

场景：主题化

兼容：caret-color

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 25][]

**使用:scrollbar改变滚动条样式**

要点：通过scrollbar的scrollbar-track和scrollbar-thumb等属性来自定义滚动条样式

场景：主题化、页面滚动

兼容：:scrollbar

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="scroll-indicator">
            <div class="article">
                <article>
                    <h1>2019中国互联网企业100强榜单</h1>
                    <p>8月14日，中国互联网协会、工业和信息化部网络安全产业发展中心（工业和信息化部信息中心）在2019年中国互联网企业100强发布会暨百强企业高峰论坛上联合发布了2019年中国互联网企业100强榜单、互联网成长型企业20强榜单和《2019年中国互联网企业100强发展报告》。阿里巴巴（中国）有限公司、深圳市腾讯计算机系统有限责任公司、百度公司、京东集团、浙江蚂蚁小微金融服务集团股份有限公司、网易集团、美团点评、北京字节跳动科技有限公司、三六零安全科技股份有限公司、新浪公司位列榜单前十名。</p>
                    <p>今年互联网百强企业聚焦创新引领、产业融合、工业互联网等方面，主要呈现出六大特点：</p>
                    <p>一是整体规模跨越式提升，成为数字经济新引擎。2019年互联网百强企业互联网业务收入高达2.75万亿元，比2018年互联网百强企业互联网业务收入增长超过1万亿元，占我国数字经济的比重达8.8%，对数字经济的贡献率达14%，带动数字经济增长近2个百分点成为带动我国互联网产业发展的重要支撑。从互联网业务收入增长率分布看，有86家企业互联网业务收入实现增长。</p>
                    <p>二是研发投入强度突破10%，打造中国核心技术。2019年互联网百强企业的研发投入达到1538.7亿元，同比增长45.1%，平均研发强度突破10%，比我国R&D经费投入强度高出近8个百分点。从研发强度分布看，有40家企业研发强度在10%以上，4家企业研发强度在30%-35%之间。互联网百强企业不断突破核心技术，互联网百强企业不断提升原始创新能力，加快推进5G、人工智能、云计算、大数据等关键核心技术突破，部分技术处于国际领先水平。2019年互联网百强企业已经拥有专利近8万项，其中发明专利数近6万项。2019年互联网百强企业中应用大数据企业29家，云计算28家，人工智能相关企业24家，运用物联网技术相关的企业3家。</p>
                    <p>三是应用场景多元化，智能+打造生活消费新模式。互联网百强企业深化消费互联网发展，已对衣、食、住、行等各方面进行了全场景覆盖，业务涵盖互联网公共服务、网络媒体、音乐与视频、社交网络、科技创新与知识产权等17个领域，全方位提升了人民群众的生活、工作、文化、娱乐、教育等方面的生活质量。2019年互联网百强企业中从事电子商务的共18家；涉及互联网公共服务的共41家，主要提供信息查询、教育医疗、政务办理、公共出行等便民服务，让普通人民享受到“互联网+”带来的便利生活；21家企业涉及音乐与视频业务。同时，互联网百强企业积极发展智能产业，不断拓展“智能+”，创造了智慧门店、VR/AR试衣试妆、无感支付等丰富的新消费业态和场景，打造未来智能生活消费新模式。</p>
                    <p>四是工业互联网入实践深耕，赋能传统产业高质量发展。互联网百强企业通过不断向各行各业“渗透”和“赋能”，推动云计算、大数据、物联网等信息通信技术与实体经济深入融合，培育新产业、新业态、新模式，支撑实体经济高质量发展。2019年互联网百强企业产业互联网数量再创新高，以服务实体经济客户为主的产业互联网领域企业数量达到60家，累计服务近4000万家企业。其中，涉及互联网数据服务41家，生产制造服务13家，科技创新和知识产权24家，B2B电商11家，互联网基础服务10家。</p>
                    <p>五是“独角兽” 企业快速增长，国际行业地位再创新高。2019年互联网百强企业及下属企业涌现出蚂蚁金服、字节跳动、京东数科、满帮集团、优刻得、找钢网等25家独角兽企业，同比增长38.9%，业务涉及金融科技、智慧物流、电子商务、新文娱等领域。从全球公司市值排名情况看，2018年，全球互联网公司市值前三十强中互联网百强企业占10家，其中，腾讯集团和阿里巴巴稳居全球互联网公司市值前十强。</p>
                    <p>六是覆盖地域实现新扩展，网络扶贫取得新成效。2019年拥有互联网百强企业的省份达到18个，在2018年基础上新增江西和山东两个省份，地域覆盖不断增加。在区域分布上，东部地区互联网百强企业数量共86家，中西部地区互联网百强企业共12家，东北地区互联网百强企业数量保持2家。其中，安徽、贵州、河南、湖北、湖南、江西、重庆、四川8个中西部地区互联网百强企业数量不断增加，较去年增长1家。互联网百强企业积极践行企业社会责任，发挥互联网在助推脱贫攻坚中的作用，探索“直播+电商”等扶贫新模式，推进精准扶贫、精准脱贫。据统计，超过一半以上互联网百强企业参与网络扶贫。</p>
                </article>
            </div>
        </div>
    </div>
    /*css部分*/
    .scroll-indicator {
        position: relative;
        overflow: hidden;
        border: 1px solid $purple;
        width: 500px;
        height: 300px;
        &::after {
            position: absolute;
            left: 0;
            right: 5px;
            top: 2px;
            bottom: 0;
            background-color: #fff;
            content: "";
        }
    }
    .article {
        overflow: auto;
        height: 100%;
        &::-webkit-scrollbar {
            width: 5px;
        }
        &::-webkit-scrollbar-track {
            background-color: #f0f0f0;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 2px;
            background-color: $purple;
        }
        article {
            padding: 0 20px;
            background: linear-gradient(to right top, $red 50%, #f0f0f0 50%) no-repeat;
            background-size: 100% calc(100% - 298px + 5px);
            > * {
                position: relative;
                z-index: 9;
            }
        }
        h1 {
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-size: 20px;
        }
        p {
            margin-top: 20px;
            line-height: 20px;
            text-indent: 2em;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 26][]

**使用filter模拟Instagram滤镜**

要点：通过filter的滤镜组合起来模拟Instagram滤镜

场景：图片滤镜

兼容：filter

例子：（css-gram）

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <ul class="instagram-filter">
            <li>
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Default</p>
            </li>
            <li class="_1977">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>1977</p>
            </li>
            <li class="aden">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Aden</p>
            </li>
            <li class="brannan">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Brannan</p>
            </li>
            <li class="brooklyn">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Brooklyn</p>
            </li>
            <li class="clarendon">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Clarendon</p>
            </li>
            <li class="earlybird">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Earlybird</p>
            </li>
            <li class="gingham">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Gingham</p>
            </li>
            <li class="hudson">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Hudson</p>
            </li>
            <li class="inkwell">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Inkwell</p>
            </li>
            <li class="kelvin">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Kelvin</p>
            </li>
            <li class="lark">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Lark</p>
            </li>
            <li class="lofi">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>LoFi</p>
            </li>
            <li class="maven">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Maven</p>
            </li>
            <li class="mayfair">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Mayfair</p>
            </li>
            <li class="moon">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Moon</p>
            </li>
            <li class="nashville">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Nashville</p>
            </li>
            <li class="perpetua">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Perpetua</p>
            </li>
            <li class="reyes">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Reyes</p>
            </li>
            <li class="rise">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Rise</p>
            </li>
            <li class="slumber">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Slumber</p>
            </li>
            <li class="stinson">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Stinson</p>
            </li>
            <li class="toaster">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Toaster</p>
            </li>
            <li class="valencia">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Valencia</p>
            </li>
            <li class="walden">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Walden</p>
            </li>
            <li class="willow">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>Willow</p>
            </li>
            <li class="xpro2">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>X-pro II</p>
            </li>
            <li class="obscure">
                <img src="https://yangzw.vip/static/codepen/gz.jpg">
                <p>自定义：Obscure</p>
            </li>
        </ul>
    </div>
    /*css部分*/
    .instagram-filter {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        width: 1635px;
        height: 630px;
        li {
            overflow: hidden;
            position: relative;
            width: 225px;
            height: 150px;
        }
        img {
            width: 100%;
            height: 100%;
        }
        p {
            position: absolute;
            right: 0;
            bottom: 0;
            padding: 0 10px;
            width: fit-content;
            height: 30px;
            background-color: #000;
            filter: none;
            line-height: 30px;
            color: #fff;
        }
    }
    .obscure {
        filter: brightness(80%) grayscale(20%) contrast(1.2) opacity(.6);
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 27][]

**Figure Skill**

**使用div描绘各种图形**

要点：<div>配合其伪元素（::before、::after）通过clip、transform等方式绘制各种图形

场景：各种图形容器

兼容：clip、transform

例子：[https://css-tricks.com/the-shapes-of-css/][https_css-tricks.com_the-shapes-of-css]

**使用mask雕刻镂空背景**

要点：通过mask未图片背景生成蒙层提供遮罩效果

场景：遮罩动画、蒙层

兼容：mask、perspective、transform-style、animation

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce pr flex-ct-x">
        <div class="mask-layer"></div>
    </div>
    /*css部分*/
    $mask-bg: "https://yangzw.vip/static/codepen/mask-bg.jpg";
    $mask-text: "https://yangzw.vip/static/codepen/mask-text.jpg";
    $logo: "https://yangzw.vip/static/codepen/logo-netease.svg";
    
    .bruce {
        overflow: hidden;
        &::after {
            position: absolute;
            left: -20px;
            right: -20px;
            top: -20px;
            bottom: -20px;
            background: url($mask-bg) no-repeat center/cover;
            filter: blur(10px);
            content: "";
        }
    }
    .mask-layer {
        position: relative;
        z-index: 9;
        width: 600px;
        height: 300px;
        background: url($mask-text) left center/150% auto;
        mask: url($logo) center/cover;
        animation: move 10s infinite;
    }
    @keyframes move {
        0% {
            background-position-x: 0;
        }
        50% {
            background-position-x: 100%;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 28][]

**使用linesr-gradient描绘波浪线**

要点：通过linear-gradient绘制波浪线

场景：文字强化显示、文字下划线、内容分割线

兼容：gradient

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <p class="waveline-text">波浪线文字</p>
    </div>
    /*css部分*/
    @mixin waveline($h, $color: $red) {
        position: relative;
        &::after {
            position: absolute;
            left: 0;
            top: 100%;
            width: 100%;
            height: $h;
            background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);
            background-size: $h * 2 $h * 2;
            content: "";
        }
    }
    .waveline-text {
        height: 20px;
        line-height: 20px;
        letter-spacing: 10px;
        @include waveline(10px);
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 29][]

**使用linear-gradient描绘彩带**

要点：通过linear-gradient绘制间断颜色的彩带

场景：主题化

兼容：gradient

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="colour-bar"></div>
    </div>
    /*css部分*/
    .colour-bar {
        width: 500px;
        height: 50px;
        background-image: repeating-linear-gradient(90deg, $red, $red 50px, $purple 50px, $purple 100px);
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 30][]

**使用conic-gradient描绘饼图**

要点：通过conic-gradient绘制多种色彩的饼图

场景：项占比饼图

兼容：gradient

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="pie-chart"></div>
    </div>
    /*css部分*/
    .pie-chart {
        border-radius: 100%;
        width: 300px;
        height: 300px;
        background-image: conic-gradient($red 0 25%, $purple 25% 30%, $orange 30% 55%, $blue 55% 70%, $green 70% 100%);
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 31][]

**使用linear-gradient描绘方格背景**

要点：使用Linear-gradient绘制间断颜色的彩带进行交互生成方格

场景：格子背景、占位图

兼容：gradient

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="square-bg"></div>
    </div>
    /*css部分*/
    .square-bg {
        width: 500px;
        height: 300px;
        background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
            linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
        background-position: 0 0, 20px 20px;
        background-size: 40px 40px;
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 32][]

**使用box-shadow描绘单测投影**

要点：通过box-shadow生成投影，且模糊半径和负的扩张半径一致，使投影偏向一侧

场景：容器投影、长投影、霓虹灯、灯光阴影等

兼容：box-shadow、filter、text-shadow

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="aside-shadow">投影</div>
    </div>
    /*css部分*/
    .aside-shadow {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid;
        width: 100px;
        height: 100px;
        box-shadow: -7px 0 5px -5px $orange;
        font-weight: bold;
        font-size: 30px;
        color: $orange;
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 33][]

**使用filter描绘头像彩色阴影**

要点：通过filter:blur() brightness() opacity()模拟阴影效果

场景：头像阴影

兼容：filter

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="avatar-shadow"></div>
    </div>
    /*css部分*/
    $avatar: "https://yangzw.vip/static/codepen/thor.jpg";
    
    .avatar-shadow {
        position: relative;
        border-radius: 100%;
        width: 200px;
        height: 200px;
        background: url($avatar) no-repeat center/cover;
        &::after {
            position: absolute;
            left: 0;
            top: 10%;
            z-index: -1;
            border-radius: 100%;
            width: 100%;
            height: 100%;
            background: inherit;
            filter: blur(10px) brightness(80%) opacity(.8);
            content: "";
            transform: scale(.95);
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 34][]

**使用box-shadow裁剪图像**

要点：通过box-shadow模拟蒙层实现中间镂空

场景：图片裁剪、忻州引导、背景镂空、投射定位

兼容：box-shadow

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="img-cliper">
            <img src="https://yangzw.vip/static/codepen/gz.jpg">
            <div class="mask">
                <i></i>
            </div>
        </div>
    </div>
    /*css部分*/
    .img-cliper {
        overflow: hidden;
        position: relative;
        img {
            width: 400px;
        }
        i {
            position: absolute;
            left: 50px;
            top: 30px;
            border-radius: 100%;
            width: 100px;
            height: 50px;
            box-shadow: 0 0 0 9999px rgba(#000, .5);
        }
        .mask {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 35][]

**使用outline描绘内边框**

要点：通过outline设置轮廓进行描边，可设置outline-offset设置内描边

场景：内描边、外描边

兼容：outline

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="outside-border"></div>
    </div>
    /*css部分*/
    .outside-border {
        outline: 10px dashed $blue;
        outline-offset: -50px;
        border: 10px dashed $orange;
        width: 300px;
        height: 300px;
        background-color: $green;
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 36][]

**Component Skill**

**迭代计数器**

要点：累加选项单位的计数器

场景：章节目录、选项计数器、加法计算器

兼容：counters

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="iterative-counter">
            <ul>
                <li>
                    <input type="checkbox" id="angular">
                    <label for="angular">Angular</label>
                </li>
                <li>
                    <input type="checkbox" id="react">
                    <label for="react">React</label>
                </li>
                <li>
                    <input type="checkbox" id="vue">
                    <label for="vue">Vue</label>
                </li>
            </ul>
            <p class="count" data-unit="个">框架：</p>
            <p class="weight" data-unit="%">权重：</p>
        </div>
    </div>
    /*css部分*/
    .iterative-counter {
        ul {
            counter-reset: index 0 count 0 weight 0;
        }
        li {
            display: flex;
            position: relative;
            align-items: center;
            margin-top: 10px;
            counter-increment: index 1;
            &::before {
                content: counter(index)"、";
            }
            &:first-child {
                margin-top: 0;
            }
        }
        input {
            overflow: hidden;
            position: absolute;
            width: 0;
            height: 0;
            &:checked + label::before {
                color: $green;
                content: "\2713";
            }
        }
        label {
            display: flex;
            align-items: center;
            height: 20px;
            &::before {
                box-sizing: border-box;
                margin-right: 5px;
                border: 1px solid $green;
                width: 20px;
                height: 20px;
                cursor: pointer;
                line-height: 20px;
                text-align: center;
                color: transparent;
                content: "";
                transition: all 300ms;
            }
        }
        p {
            margin-top: 10px;
            &.count::after {
                content: counter(count) attr(data-unit);
            }
            &.weight::after {
                content: counter(weight) attr(data-unit);
            }
        }
    }
    #angular:checked {
        counter-increment: count 1 weight 20;
    }
    #react:checked {
        counter-increment: count 1 weight 50;
    }
    #vue:checked {
        counter-increment: count 1 weight 30;
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 37][]

**下划线跟随导航栏**

要点：下划线跟随鼠标移动的导航栏

场景：动态导航栏

兼容：+

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <ul class="underline-navbar">
            <li>Alibaba阿里巴巴</li>
            <li>Tencent腾讯</li>
            <li>Baidu百度</li>
            <li>Jingdong京东</li>
            <li>Ant蚂蚁金服</li>
            <li>Netease网易</li>
        </ul>
    </div>
    /*css部分*/
    .underline-navbar {
        display: flex;
        li {
            position: relative;
            padding: 10px;
            cursor: pointer;
            font-size: 20px;
            color: $blue;
            transition: all 300ms;
            &::before {
                position: absolute;
                left: 100%;
                top: 0;
                border-bottom: 2px solid transparent;
                width: 0;
                height: 100%;
                content: "";
                transition: all 300ms;
            }
            &:active {
                background-color: $blue;
                color: #fff;
            }
            &:hover {
                &::before {
                    left: 0;
                    top: 0;
                    z-index: -1;
                    border-bottom-color: $blue;
                    width: 100%;
                    transition-delay: 100ms;
                }
                & + li::before {
                    left: 0;
                }
            }
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 38][]

**气泡背景墙**

要点：不间断冒出气泡的背景墙

场景：动态背景

兼容：animation

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce">
        <ul class="bubble-bgwall">
            <li>Love</li>
            <li>Love</li>
            <li>Love</li>
            <li>Love</li>
            <li>Love</li>
            <li>Love</li>
            <li>Love</li>
            <li>Love</li>
            <li>Love</li>
            <li>Love</li>
        </ul>
    </div>
    /*css部分*/
    .bruce {
        background-image: linear-gradient(270deg, #8146b4, #6990f6);
    }
    .bubble-bgwall {
        overflow: hidden;
        position: relative;
        margin: 0 auto;
        width: 1200px;
        height: 100%;
        li {
            display: flex;
            position: absolute;
            bottom: -200px;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            width: 50px;
            height: 50px;
            background-color: rgba(#fff, .15);
            color: #ccc;
            animation: bubble 15s infinite;
            &:nth-child(1) {
                left: 10%;
            }
            &:nth-child(2) {
                left: 20%;
                width: 90px;
                height: 90px;
                animation-duration: 7s;
                animation-delay: 2s;
            }
            &:nth-child(3) {
                left: 25%;
                animation-delay: 4s;
            }
            &:nth-child(4) {
                left: 40%;
                width: 60px;
                height: 60px;
                background-color: rgba(#fff, .3);
                animation-duration: 8s;
            }
            &:nth-child(5) {
                left: 70%;
            }
            &:nth-child(6) {
                left: 80%;
                width: 120px;
                height: 120px;
                background-color: rgba(#fff, .2);
                animation-delay: 3s;
            }
            &:nth-child(7) {
                left: 32%;
                width: 160px;
                height: 160px;
                animation-delay: 2s;
            }
            &:nth-child(8) {
                left: 55%;
                width: 40px;
                height: 40px;
                font-size: 12px;
                animation-duration: 15s;
                animation-delay: 4s;
            }
            &:nth-child(9) {
                left: 25%;
                width: 40px;
                height: 40px;
                background-color: rgba(#fff, .3);
                font-size: 12px;
                animation-duration: 12s;
                animation-delay: 2s;
            }
            &:nth-child(10) {
                left: 85%;
                width: 160px;
                height: 160px;
                animation-delay: 5s;
            }
        }
    }
    @keyframes bubble {
        0% {
            opacity: .5;
            transform: translateY(0) rotate(45deg);
        }
        25% {
            opacity: .75;
            transform: translateY(-400px) rotate(90deg);
        }
        50% {
            opacity: 1;
            transform: translateY(-600px) rotate(135deg);
        }
        100% {
            opacity: 0;
            transform: translateY(-1000px) rotate(180deg);
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 39][]

**滚动指示器**

要点：提示滚动进度的指示器

场景：阅读进度

兼容：calc()、gradient

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 40][]

**故障文本**

要点：显示器故障形式的文本

场景：错误提示

兼容：data-\*、attr()、animation

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="fault-text" data-text="ERROR">ERROR</div>
    </div>
    /*css部分*/
    .bruce {
        background-color: #000;
    }
    .fault-text {
        position: relative;
        font-weight: bold;
        font-size: 100px;
        color: #fff;
        &::before,
        &::after {
            overflow: hidden;
            position: absolute;
            top: 0;
            background-color: #000;
            clip: rect(0, 900px, 0, 0);
            color: #fff;
            content: attr(data-text);
            animation: shake 3s linear infinite alternate-reverse;
        }
        &::before {
            left: -2px;
            text-shadow: 1px 0 $blue;
        }
        &::after {
            left: 2px;
            text-shadow: -1px 0 $red;
            animation-duration: 2s;
        }
    }
    @keyframes shake {
        $steps: 20;
        @for $i from 0 through $steps {
            #{percentage($i * (1 / $steps))} {
                clip: rect(random(100) + px, 9999px, random(100) + px, 0);
            }
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 41][]

**换色器**

要点：通过拾色器改变图像色相的换色器

场景：图片色彩变换

兼容：mix-blend-mode

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce">
        <div class="color-changer">
            <input type="color" value="#ff6666">
            <img src="https://yangzw.vip/static/codepen/car.jpg">
        </div>
    </div>
    /*css部分*/
    .color-changer {
        overflow: hidden;
        position: relative;
        height: 100%;
        input {
            position: absolute;
            width: 100%;
            height: 100%;
            cursor: pointer;
            mix-blend-mode: hue;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 42][]

**状态悬浮球**

要点：展示当前状态的悬浮球

场景：状态动态显示、波浪动画

兼容：gradient、animation

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="state-ball warning">
            <div class="wave"></div>
        </div>
    </div>
    /*css部分*/
    .state-ball {
        overflow: hidden;
        position: relative;
        padding: 5px;
        border: 3px solid $green;
        border-radius: 100%;
        width: 150px;
        height: 150px;
        background-color: #fff;
        &::before,
        &::after {
            position: absolute;
            left: 50%;
            top: 0;
            z-index: 20;
            margin-left: -100px;
            width: 200px;
            height: 200px;
            content: "";
        }
        &::before {
            margin-top: -150px;
            border-radius: 45%;
            background-color: rgba(#fff, .5);
            animation: rotate 10s linear -5s infinite;
        }
        &::after {
            margin-top: -160px;
            border-radius: 40%;
            background-color: rgba(#fff, .8);
            animation: rotate 15s infinite;
        }
        &.warning {
            border-color: $orange;
            .wave {
                background-image: linear-gradient(-180deg, #f0c78a 13%, $orange 91%);
            }
        }
        &.danger {
            border-color: $red;
            .wave {
                background-image: linear-gradient(-180deg, #f78989 13%, $red 91%);
            }
        }
    }
    .wave {
        position: relative;
        border-radius: 100%;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(-180deg, #af8 13%, $green 91%);
    }
    @keyframes rotate {
        from {
            transform: rotate(0);
        }
        to {
            transform: rotate(1turn);
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 43][]

**粘粘球**

要点：香蕉粘粘效果的双球回弹运动

场景：粘粘动画

兼容：filter、animation

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="sticky-ball">
            <div class="ball-1"></div>
            <div class="ball-2"></div>
        </div>
    </div>
    /*css部分*/
    .bruce {
        filter: contrast(10);
    }
    .sticky-ball {
        position: relative;
        width: 320px;
        height: 80px;
        filter: contrast(10);
    }
    div[class*=ball-] {
        position: absolute;
        top: 0;
        padding: 10px;
        border-radius: 100%;
        width: 80px;
        height: 80px;
        background-color: $red;
        filter: blur(5px);
        animation: 6s infinite;
    }
    .ball-1 {
        left: 0;
        animation-name: move-1 !important;
    }
    .ball-2 {
        left: 240px;
        animation-name: move-2 !important;
    }
    @keyframes move-1 {
        0%,
        20%,
        100% {
            width: 80px;
            height: 80px;
        }
        50% {
            left: 110px;
            top: -15px;
            width: 110px;
            height: 110px;
        }
        85% {
            left: 75px;
            width: 90px;
            height: 70px;
        }
        90% {
            top: -2px;
            width: 75px;
            height: 85px;
        }
    }
    @keyframes move-2 {
        0%,
        20%,
        100% {
            width: 80px;
            height: 80px;
        }
        50% {
            left: 110px;
            top: -15px;
            width: 110px;
            height: 110px;
        }
        85% {
            left: 165px;
            width: 90px;
            height: 70px;
        }
        90% {
            top: -2px;
            width: 75px;
            height: 85px;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 44][]

**商城票劵**

要点：边缘带孔和中间折痕的票劵

场景：电影票、代金卷、消费卡

兼容：gradient

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="mall-ticket">
            <h3>100元</h3>
            <p>网易考拉代金券</p>
        </div>
    </div>
    /*css部分*/
    .mall-ticket {
        display: flex;
        position: relative;
        width: 300px;
        height: 100px;
        background: radial-gradient(circle at right top, transparent 10px, $red 0) top left/100px 51% no-repeat,
            radial-gradient(circle at right bottom, transparent 10px, $red 0) bottom left/100px 51% no-repeat,
            radial-gradient(circle at left top, transparent 10px, #ccc 0) top right/200px 51% no-repeat,
            radial-gradient(circle at left bottom, transparent 10px, #ccc 0) bottom right/200px 51% no-repeat;
        filter: drop-shadow(2px 2px 2px rgba(#fff, .2));
        line-height: 100px;
        text-align: center;
        color: #fff;
        &::before {
            position: absolute;
            left: 100px;
            top: 0;
            bottom: 0;
            margin: auto;
            border: 1px dashed $purple;
            height: 80px;
            content: "";
        }
        &::after {
            position: absolute;
            left: 100%;
            top: 0;
            width: 5px;
            height: 100%;
            background-image: linear-gradient(180deg, #ccc 5px, transparent 5px, transparent),
                radial-gradient(10px circle at 5px 10px, transparent 5px, #ccc 5px);
            background-size: 5px 15px;
            content: "";
        }
        h3 {
            width: 100px;
            font-size: 30px;
        }
        p {
            flex: 1;
            font-weight: bold;
            font-size: 18px;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 45][]

**倒影加载条**

要点：带有渐变倒影的加载条

场景：加载提示

兼容：box-reflect、animation

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <ul class="reflect-loading">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    /*css部分*/
    $count: 10;
    $color: $purple $blue;
    
    .reflect-loading {
        display: flex;
        height: 100px;
        -webkit-box-reflect: below 0 linear-gradient(rgba(#fff, 0), rgba(#fff, .7));
        li {
            width: 20px;
            @for $i from 0 to $count {
                $args: append($color, $i * 100% / ($count - 1));
                &:nth-child(#{$i + 1}) {
                    background-color: mix($args...);
                    animation: rotate 3s cubic-bezier(.81, .04, .4, .7) infinite;
                    animation-delay: $i * 50ms;
                }
            }
        }
    }
    @keyframes rotate {
        0% {
            transform: rotate(-.5turn) rotateX(-1turn);
        }
        75%,
        100% {
            transform: none;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 46][]

**三维立方体**

要点：三维建模的立方体

场景：三维建模

兼容：transform、perspective、transform-style、animation

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="td-cube">
            <ul>
                <li class="front">1</li>
                <li class="back">2</li>
                <li class="top">3</li>
                <li class="bottom">4</li>
                <li class="left">5</li>
                <li class="right">6</li>
            </ul>
        </div>
    </div>
    /*css部分*/
    $width: 150px;
    $height: 150px;
    $length: 150px;
    
    .td-cube {
        width: $width;
        height: $height;
        perspective: 1000px;
        ul {
            position: relative;
            width: 100%;
            height: 100%;
            transform: rotateX(-15deg) rotateY(15deg);
            transform-style: preserve-3d;
            animation: rotate 5s infinite linear;
        }
        li {
            display: flex;
            position: absolute;
            justify-content: center;
            align-items: center;
            width: $width;
            height: $height;
            opacity: .8;
            font-size: 50px;
            color: #fff;
        }
    }
    .front {
        background-color: $red;
        transform: translateZ($length / 2);
    }
    .back {
        background-color: $purple;
        transform: rotateY(180deg) translateZ($length / 2);
    }
    .top {
        background-color: $orange;
        transform: rotateX(90deg) translateZ($height / 2);
    }
    .bottom {
        background-color: $blue;
        transform: rotateX(-90deg) translateZ($height / 2);
    }
    .left {
        background-color: $cyan;
        transform: rotateY(-90deg) translateZ($width / 2);
    }
    .right {
        background-color: $green;
        transform: rotateY(90deg) translateZ($width / 2);
    }
    @keyframes rotate {
        from {
            transform: rotateY(0) rotateX(0);
        }
        to {
            transform: rotateY(-1turn) rotateX(-1turn);
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 47][]

**动态边框**

要点：鼠标悬浮时动态渐变显示的边框

场景：悬浮按钮、边框动画

兼容：gradient

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="dynamic-border">iCSS</div>
    </div>
    /*css部分*/
    .dynamic-border {
        width: 200px;
        height: 80px;
        background: linear-gradient(0, $red 2px, $red 2px) no-repeat left top/0 2px,
            linear-gradient(-90deg, $red 2px, $red 2px) no-repeat right top/2px 0,
            linear-gradient(-180deg, $red 2px, $red 2px) no-repeat right bottom/0 2px,
            linear-gradient(-270deg, $red 2px, $red 2px) no-repeat left bottom/2px 0;
        cursor: pointer;
        line-height: 80px;
        text-align: center;
        font-weight: bold;
        font-size: 50px;
        color: $red;
        transition: all 300ms;
        &:hover {
            background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 48][]

**标签页**

要点：可切换内容的标签页

场景：内容切换

兼容：scroll-behavior

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="tab-page">
            <nav>
                <h3>
                    <input type="radio" name="tab">
                    <label for="tab1">标题1</label>
                </h3>
                <h3>
                    <input type="radio" name="tab">
                    <label for="tab2">标题2</label>
                </h3>
                <h3>
                    <input type="radio" name="tab">
                    <label for="tab3">标题3</label>
                </h3>
            </nav>
            <ul>
                <li>
                    <input id="tab1">
                    <p>内容1</p>
                </li>
                <li>
                    <input id="tab2">
                    <p>内容2</p>
                </li>
                <li>
                    <input id="tab3">
                    <p>内容3</p>
                </li>
            </ul>
        </div>
    </div>
    /*css部分*/
    .tab-page {
        width: 300px;
        nav {
            display: flex;
            border: 1px solid $green;
            height: 40px;
            line-height: 40px;
            text-align: center;
            h3 {
                position: relative;
                flex: 1;
                background-color: $green;
                color: #fff;
                & + h3 {
                    border-left: 1px solid #fff;
                }
            }
            input {
                display: none;
            }
            label {
                display: block;
                width: 100%;
                height: 100%;
                cursor: pointer;
            }
        }
        ul {
            overflow: hidden;
            scroll-behavior: smooth;
            border: 1px solid $green;
            border-top: none;
            height: 100px;
            li {
                display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                height: 100%;
                font-size: 20px;
                color: $blue;
            }
            input {
                position: absolute;
                width: 0;
                height: 0;
                opacity: 0;
            }
        }
    }

效果：

![format_png 49][]

**标签导航栏**

要点：可切换内容的导航栏

场景：也买你切换

兼容：~

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="tab-navbar">
            <input type="radio" name="tab" id="tab1" checked>
            <input type="radio" name="tab" id="tab2">
            <input type="radio" name="tab" id="tab3">
            <input type="radio" name="tab" id="tab4">
            <nav>
                <label for="tab1">标题1</label>
                <label for="tab2">标题2</label>
                <label for="tab3">标题3</label>
                <label for="tab4">标题4</label>
            </nav>
            <main>
                <ul>
                    <li>内容1</li>
                    <li>内容2</li>
                    <li>内容3</li>
                    <li>内容4</li>
                </ul>
            </main>
        </div>
    </div>
    /*css部分*/
    .tab-navbar {
        display: flex;
        overflow: hidden;
        flex-direction: column-reverse;
        border-radius: 10px;
        width: 300px;
        height: 400px;
        input {
            display: none;
            &:nth-child(1):checked {
                & ~ nav label:nth-child(1) {
                    @extend .active;
                }
                & ~ main ul {
                    background-color: $red;
                    transform: translate3d(0, 0, 0);
                }
            }
            &:nth-child(2):checked {
                & ~ nav label:nth-child(2) {
                    @extend .active;
                }
                & ~ main ul {
                    background-color: $purple;
                    transform: translate3d(-25%, 0, 0);
                }
            }
            &:nth-child(3):checked {
                & ~ nav label:nth-child(3) {
                    @extend .active;
                }
                & ~ main ul {
                    background-color: $orange;
                    transform: translate3d(-50%, 0, 0);
                }
            }
            &:nth-child(4):checked {
                & ~ nav label:nth-child(4) {
                    @extend .active;
                }
                & ~ main ul {
                    background-color: $blue;
                    transform: translate3d(-75%, 0, 0);
                }
            }
        }
        nav {
            display: flex;
            height: 40px;
            background-color: #f0f0f0;
            line-height: 40px;
            text-align: center;
            label {
                flex: 1;
                cursor: pointer;
                transition: all 300ms;
            }
        }
        main {
            flex: 1;
            ul {
                display: flex;
                flex-wrap: nowrap;
                width: 400%;
                height: 100%;
                transition: all 300ms;
            }
            li {
                display: flex;
                justify-content: center;
                align-items: center;
                flex: 1;
                font-weight: bold;
                font-size: 20px;
                color: #fff;
            }
        }
    }
    .active {
        background-color: $green;
        color: #fff;
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 50][]

**折叠面板**

要点：可折叠内容的面板

场景：隐藏式子导航栏

兼容：~

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="accordion">
            <input type="checkbox" id="collapse1">
            <input type="checkbox" id="collapse2">
            <input type="checkbox" id="collapse3">
            <article>
                <label for="collapse1">列表1</label>
                <p>内容1<br>内容2<br>内容3<br>内容4</p>
            </article>
            <article>
                <label for="collapse2">列表2</label>
                <p>内容1<br>内容2<br>内容3<br>内容4</p>
            </article>
            <article>
                <label for="collapse3">列表3</label>
                <p>内容1<br>内容2<br>内容3<br>内容4</p>
            </article>
        </div>
    </div>
    /*css部分*/
    .accordion {
        width: 300px;
        article {
            margin-top: 5px;
            cursor: pointer;
            &:first-child {
                margin-top: 0;
            }
        }
        input {
            display: none;
            &:nth-child(1):checked ~ article:nth-of-type(1) p,
            &:nth-child(2):checked ~ article:nth-of-type(2) p,
            &:nth-child(3):checked ~ article:nth-of-type(3) p {
                border-bottom-width: 1px;
                max-height: 600px;
            }
        }
        label {
            display: block;
            padding: 0 20px;
            height: 40px;
            background-color: $red;
            cursor: pointer;
            line-height: 40px;
            font-size: 16px;
            color: #fff;
        }
        p {
            overflow: hidden;
            padding: 0 20px;
            border: 1px solid $red;
            border-top: none;
            border-bottom-width: 0;
            max-height: 0;
            line-height: 30px;
            transition: all 500ms;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 51][]

**星级评分**

要点：点击星星进行评分的按钮

场景：评分

兼容：~

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="star-rating">
            <input type="radio" name="rate">
            <input type="radio" name="rate">
            <input type="radio" name="rate">
            <input type="radio" name="rate">
            <input type="radio" name="rate">
        </div>
    </div>
    /*css部分*/
    .star-rating {
        display: flex;
        flex-direction: row-reverse;
        input {
            width: 30px;
            height: 30px;
            appearance: none;
            cursor: pointer;
            line-height: 30px;
            text-align: center;
            font-size: 30px;
            transition: all 300ms;
            &::after {
                color: $purple;
                content: "☆";
                transition: all 300ms;
            }
            &:hover {
                transform: scale(1.2);
            }
            &:checked,
            &:hover {
                &::after,
                & ~ input::after {
                    color: $red;
                    content: "★";
                }
            }
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 52][]

**加载指示器**

要点：变换...长度的加载提示

场景：加载提示

兼容：animation

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="load-indicator">加载中<dot></dot></div>
    </div>
    /*css部分*/
    .load-indicator {
        font-size: 16px;
        color: $blue;
        dot {
            display: inline-block;
            overflow: hidden;
            height: 1em;
            line-height: 1;
            vertical-align: -.25em;
            &::after {
                display: block;
                white-space: pre-wrap;
                content: "...\A..\A.";
                animation: loading 3s infinite step-start both;
            }
        }
    }
    @keyframes loading {
        33% {
            transform: translate3d(0, -2em, 0);
        }
        66% {
            transform: translate3d(0, -1em, 0);
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 53][]

**自适应相册**

要点：自适应照片数量的相册

场景：九宫格相册、微信相册、图集

兼容：:only-child、:first-child、:nth-child()、:nth-lash-child()、~

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <ul class="response-album">
            <li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
            <li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
            <li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
            <li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
            <li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
            <li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
            <li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
            <li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
            <li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
        </ul>
    </div>
    /*css部分*/
    @mixin square($count: 2) {
        $length: calc((100% - #{$count} * 10px) / #{$count});
        width: $length;
        height: $length;
    }
    .response-album {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 400px;
        height: 400px;
        li {
            display: flex;
            overflow: hidden;
            justify-content: center;
            margin: 5px;
            background-color: #f0f0f0;
            @include square(3);
        }
        img {
            width: 100%;
            height: 100%;
    
            object-fit: cover;
        }
    }
    // 一个元素
    .item:only-child {
        border-radius: 10px;
        width: auto;
        max-width: 80%;
        height: auto;
        max-height: 80%;
    }
    // 两个元素
    .item:first-child:nth-last-child(2),
    .item:first-child:nth-last-child(2) ~ .item:nth-child(2) {
        @include square(2);
    }
    .item:first-child:nth-last-child(2) {
        border-radius: 10px 0 0 10px;
    }
    .item:first-child:nth-last-child(2) ~ .item:nth-child(2) {
        border-radius: 0 10px 10px 0;
    }
    // 三个元素
    .item:first-child:nth-last-child(3),
    .item:first-child:nth-last-child(3) ~ .item:nth-child(2),
    .item:first-child:nth-last-child(3) ~ .item:nth-child(3) {
        @include square(2);
    }
    .item:first-child:nth-last-child(3) {
        border-top-left-radius: 10px;
    }
    .item:first-child:nth-last-child(3) ~ .item:nth-child(2) {
        border-top-right-radius: 10px;
    }
    .item:first-child:nth-last-child(3) ~ .item:nth-child(3) {
        border-bottom-left-radius: 10px;
    }
    // 四个元素
    .item:first-child:nth-last-child(4),
    .item:first-child:nth-last-child(4) ~ .item:nth-child(2),
    .item:first-child:nth-last-child(4) ~ .item:nth-child(3),
    .item:first-child:nth-last-child(4) ~ .item:nth-child(4) {
        @include square(2);
    }
    .item:first-child:nth-last-child(4) {
        border-top-left-radius: 10px;
    }
    .item:first-child:nth-last-child(4) ~ .item:nth-child(2) {
        border-top-right-radius: 10px;
    }
    .item:first-child:nth-last-child(4) ~ .item:nth-child(3) {
        border-bottom-left-radius: 10px;
    }
    .item:first-child:nth-last-child(4) ~ .item:nth-child(4) {
        border-bottom-right-radius: 10px;
    }
    // 五个元素
    .item:first-child:nth-last-child(5) {
        border-top-left-radius: 10px;
    }
    .item:first-child:nth-last-child(5) ~ .item:nth-child(3) {
        border-top-right-radius: 10px;
    }
    .item:first-child:nth-last-child(5) ~ .item:nth-child(4) {
        border-bottom-left-radius: 10px;
    }
    // 六个元素
    .item:first-child:nth-last-child(6) {
        border-top-left-radius: 10px;
    }
    .item:first-child:nth-last-child(6) ~ .item:nth-child(3) {
        border-top-right-radius: 10px;
    }
    .item:first-child:nth-last-child(6) ~ .item:nth-child(4) {
        border-bottom-left-radius: 10px;
    }
    .item:first-child:nth-last-child(6) ~ .item:nth-child(6) {
        border-bottom-right-radius: 10px;
    }
    // 七个元素
    .item:first-child:nth-last-child(7) {
        border-top-left-radius: 10px;
    }
    .item:first-child:nth-last-child(7) ~ .item:nth-child(3) {
        border-top-right-radius: 10px;
    }
    .item:first-child:nth-last-child(7) ~ .item:nth-child(7) {
        border-bottom-left-radius: 10px;
    }
    // 八个元素
    .item:first-child:nth-last-child(8) {
        border-top-left-radius: 10px;
    }
    .item:first-child:nth-last-child(8) ~ .item:nth-child(3) {
        border-top-right-radius: 10px;
    }
    .item:first-child:nth-last-child(8) ~ .item:nth-child(7) {
        border-bottom-left-radius: 10px;
    }
    // 九个元素
    .item:first-child:nth-last-child(9) {
        border-top-left-radius: 10px;
    }
    .item:first-child:nth-last-child(9) ~ .item:nth-child(3) {
        border-top-right-radius: 10px;
    }
    .item:first-child:nth-last-child(9) ~ .item:nth-child(7) {
        border-bottom-left-radius: 10px;
    }
    .item:first-child:nth-last-child(9) ~ .item:nth-child(9) {
        border-bottom-right-radius: 10px;
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 54][]

**圆角进度条**

要点：单一颜色的圆角进度条

场景：进度条

兼容：gradient

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="fillet-progressbar"></div>
    </div>
    /*css部分*/
    @mixin progress-bar($width: 100px, $height: 10px, $color: $red, $percent: 0) {
        border-radius: $height / 2;
        width: $width;
        height: $height;
        background-color: #ccc;
        background-image: radial-gradient(closest-side circle at $percent, $color, $color 100%, transparent),
            linear-gradient($color, $color);
        background-repeat: no-repeat;
        background-size: 100%, $percent;
    }
    .fillet-progressbar {
        @include progress-bar(500px, 10px, $purple, 50%);
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 55][]

**螺纹进度条**

要点：渐变螺纹的进度条

场景：进度条、加载动画

兼容：gradient、animation

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="thread-progressbar"></div>
    </div>
    /*css部分*/
    .thread-progressbar {
        position: relative;
        padding-right: 200px;
        width: 500px;
        height: calc(1.4142 * 20px);
        background: repeating-linear-gradient(45deg, $green, $green 10px, transparent 11px, transparent 19px, $green 20px) 0 0 content-box;
        animation: twill 1s linear infinite;
        &::after {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(rgba(#000, .5), rgba(#fff, .5), rgba(#000, .5));
            content: "";
        }
    }
    @keyframes twill {
        from {
            background-position-y: 0;
        }
        to {
            background-position-y: calc(-1 * 1.4142 * 40px);
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 56][]

**立体按钮**

要点：点击呈现按下状态的按钮

场景：按钮点击

兼容：box-shadow

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <button class="stereo-btn">iCSS</button>
    </div>
    /*css部分*/
    .stereo-btn {
        padding: 10px 20px;
        outline: none;
        border: none;
        border-radius: 10px;
        background-image: linear-gradient($blue, $green);
        box-shadow: 0 10px 0 $blue;
        cursor: pointer;
        text-shadow: 0 5px 5px #ccc;
        font-size: 50px;
        color: #fff;
        transition: all 300ms;
        &:active {
            box-shadow: 0 5px 0 $blue;
            transform: translate3d(0, 5px, 0);
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

**混沌加载圈**

要点：带混沌虚影的加载圈

场景：加载提示

兼容：filter、animation

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <ul class="chaos-loading">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    /*css部分*/
    .chaos-loading {
        overflow: hidden;
        position: relative;
        border-radius: 100%;
        width: 200px;
        height: 200px;
        &::after {
            display: block;
            filter: drop-shadow(2px 4px 6px #000);
            line-height: 200px;
            text-align: center;
            font-weight: bold;
            font-size: 30px;
            color: #fff;
            content: "Loading...";
        }
        li {
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 100%;
            width: 100px;
            height: 100px;
            filter: blur(25px);
            animation: move 2s linear infinite;
            &:nth-child(1) {
                background-color: $red;
            }
            &:nth-child(2) {
                background-color: $purple;
                animation-delay: -500ms;
            }
            &:nth-child(3) {
                background-color: $orange;
                animation-delay: -1s;
            }
            &:nth-child(4) {
                background-color: $blue;
                animation-delay: -1.5s;
            }
        }
    }
    @keyframes move {
        0%,
        100% {
            transform: translate3d(0, 0, 0);
        }
        25% {
            transform: translate3d(100%, 0, 0);
        }
        50% {
            transform: translate3d(100%, 100%, 0);
        }
        75% {
            transform: translate3d(0, 100%, 0);
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 57][]

**蛇形边框**

要点：蛇形运动的边框

场景：蛇形动画

兼容：clip、animation

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="snakelike-border"></div>
    </div>
    /*css部分*/
    .snakelike-border {
        position: relative;
        width: 190px;
        height: 190px;
        background-color: $green;
        &::before,
        &::after {
            position: absolute;
            left: -5px;
            right: -5px;
            top: -5px;
            bottom: -5px;
            border: 5px solid;
            content: "";
            animation: move 5s linear infinite;
        }
        &::before {
            border-color: $red;
        }
        &::after {
            border-color: $purple;
            animation-delay: -2.5s;
        }
    }
    @keyframes move {
        0%,
        100% {
            clip: rect(0 200px 5px 0);
        }
        25% {
            clip: rect(0 200px 200px 195px);
        }
        50% {
            clip: rect(195px 200px 200px 0);
        }
        75% {
            clip: rect(0 5px 200px 0);
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 58][]

**自动打字**

要点：逐个字符自动打印出来的文字

场景：代码演示、文字输入动画

兼容：ch、animation

例子：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

/*html部分*/
    <div class="bruce flex-ct-x">
        <div class="auto-typing">Do You Want To Know More About CSS Development Skill</div>
    </div>
    /*css部分*/
    @mixin typing($count: 0, $duration: 0, $delay: 0) {
        overflow: hidden;
        border-right: 1px solid transparent;
        width: #{$count + 1}ch;
        font-family: Consolas, Monaco, Monospace;
        white-space: nowrap;
        animation: typing #{$duration}s steps($count + 1) #{$delay}s backwards, caret 500ms steps(1) #{$delay}s $duration * 2 forwards;
    }
    .auto-typing {
        font-weight: bold;
        font-size: 30px;
        color: $blue;
        @include typing(52, 5);
    }
    @keyframes typing {
        from {
            width: 0;
        }
    }
    @keyframes caret {
        50% {
            border-right-color: currentColor;
        }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

效果：

![format_png 59][]

[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTEwMTgyNDA3NC0zOTM0NjU2MDEucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTEwMjA0MTgzNS04MDEyNTc2NjkucG5n?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTEwMjMzOTk2MS0xMTM0MzgyNTE1LnBuZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTEwMjU1NzY1NS0xNTQ0OTUxMzg1LnBuZw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTEwMjg0ODkyOC0yNTE2NTc0NC5wbmc?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTEwMzEyNTg5NC0xMTI2Njk0Njc0LnBuZw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTEwMzM1NzIxNC0yMDY5OTA3MDY0LnBuZw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTEwMzYzNzEyMC0xMDk1MzMyOTY0LnBuZw?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTEwMzg1Mzc0OC0xOTQyMDMxODkzLnBuZw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTEwNDA1OTk2Mi0xNjM1NDQ1NjMyLnBuZw?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTEwNDM1NDM2Ny0xNDU1NzA0MjEzLnBuZw?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTEwNTI0ODY2Ny04MTE1MDI1NDQucG5n?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTEwNTY1MjY4Mi0xNDA2OTY5NzM3LnBuZw?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTExMDA0MzY3OS0xOTQyMjIxMzgucG5n?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTExMDgzMTUxOC0xMjc2NTAyNTQxLnBuZw?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTExMjYyNzg3NC0xOTkxOTA3NDM2LnBuZw?x-oss-process=image/format,png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTExMzIyMjExMC0xNDQ1MDc1Njc3LnBuZw?x-oss-process=image/format,png
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTExNDIzMzAxOC0xODk2MTQwODM1LnBuZw?x-oss-process=image/format,png
[format_png 18]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTExNDUxOTQ0My05ODAxMTc2ODgucG5n?x-oss-process=image/format,png
[format_png 19]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTExNDkzNDAwMS03MDY1OTIyODIucG5n?x-oss-process=image/format,png
[format_png 20]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTExNTIwMjEzMS00MTUzNTY2OTkucG5n?x-oss-process=image/format,png
[format_png 21]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTEzNDMzOTE4Ny0xOTA0MDMwODA1LnBuZw?x-oss-process=image/format,png
[format_png 22]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTEzNDcwNjU0OC0xOTk3MDQ5NTA5LnBuZw?x-oss-process=image/format,png
[format_png 23]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE0MzAzMjMxMi0yMTEyNTI0NzMucG5n?x-oss-process=image/format,png
[format_png 24]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE0MzUwNTg2Ny0xNDc2NTE2MTc2LnBuZw?x-oss-process=image/format,png
[format_png 25]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE0MzgwMzAwOC0xNzc5NjUzOTkwLnBuZw?x-oss-process=image/format,png
[format_png 26]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE0NDIzNTc5OC03MjMzNjk1Ny5wbmc?x-oss-process=image/format,png
[format_png 27]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE0NDYxMDc1Mi0xNjk3MDM4MTcxLnBuZw?x-oss-process=image/format,png
[https_css-tricks.com_the-shapes-of-css]: https://css-tricks.com/the-shapes-of-css/
[format_png 28]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE0NTU0ODk0OC01NjgwMTM4ODkucG5n?x-oss-process=image/format,png
[format_png 29]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE0NTg1NDEzNS03MzMwNjk0MDUucG5n?x-oss-process=image/format,png
[format_png 30]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE1MDEwNTU5MS0zNTkzMDk5NTUucG5n?x-oss-process=image/format,png
[format_png 31]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE1MDQxODU1MC0xMDQxNTcxNTA0LnBuZw?x-oss-process=image/format,png
[format_png 32]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE1MDcyMDc0Ny0yMDk1MDY1NDUucG5n?x-oss-process=image/format,png
[format_png 33]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE1MTAwMzY1NS0xNjI3OTkxMTI5LnBuZw?x-oss-process=image/format,png
[format_png 34]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE1MTM0NTk0My0xMTU4NzE2ODc0LnBuZw?x-oss-process=image/format,png
[format_png 35]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE1MTYxMzY0NC00NzA2OTk5Ny5wbmc?x-oss-process=image/format,png
[format_png 36]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE1MTkxNjg0OC00NTI2MDcxOTEucG5n?x-oss-process=image/format,png
[format_png 37]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE1MjIyMzU1NS05NjUxOTA5NzMucG5n?x-oss-process=image/format,png
[format_png 38]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE1MjUxOTUwOC0xNzExODM4MjQ0LnBuZw?x-oss-process=image/format,png
[format_png 39]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE1MjcyNTA4Ni0xNTkzMDc5NTY0LnBuZw?x-oss-process=image/format,png
[format_png 40]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE1MjkxNTgxMy05Mjk4NDg2NzEucG5n?x-oss-process=image/format,png
[format_png 41]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE1MzEwOTAyOC0xMDY3Nzg0MDA1LnBuZw?x-oss-process=image/format,png
[format_png 42]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkwOTE1MzQzNzI4Ny0yMDM1MDY0MjYucG5n?x-oss-process=image/format,png
[format_png 43]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwMTAxMzk0OS0xMDc2MTYxMzQxLnBuZw?x-oss-process=image/format,png
[format_png 44]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwMTE0OTIxNy0yMDE3NjAzNTg0LnBuZw?x-oss-process=image/format,png
[format_png 45]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwMTQyMDQ5Mi0xODA2OTE4MTIzLnBuZw?x-oss-process=image/format,png
[format_png 46]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwMTYwMzgwMS0xNzA5MDQxOTU5LnBuZw?x-oss-process=image/format,png
[format_png 47]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwMTc1Njc1Mi03OTI4MDcyNTEucG5n?x-oss-process=image/format,png
[format_png 48]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwMTkyODA2My0yMDMwNzgyOTEzLnBuZw?x-oss-process=image/format,png
[format_png 49]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwMjA1MTgwMy0xNzg2MjExNTI3LnBuZw?x-oss-process=image/format,png
[format_png 50]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwMjIyNTU1OC0yNDUzNDYwNjAucG5n?x-oss-process=image/format,png
[format_png 51]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwMjU0OTUzOS0xODc0ODk3Njc4LnBuZw?x-oss-process=image/format,png
[format_png 52]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwMjgxNjY3NC0xNDE3MjEzODAxLnBuZw?x-oss-process=image/format,png
[format_png 53]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwMjkzMjE2NS0xNDYyNDg4NjA2LnBuZw?x-oss-process=image/format,png
[format_png 54]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwMzIwMDQ0NC0xNTYyNjQ0NTYucG5n?x-oss-process=image/format,png
[format_png 55]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwMzQwNTAxNC02OTYzMjIyNTgucG5n?x-oss-process=image/format,png
[format_png 56]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwMzUyNzM1Ni0xODE4MDY4NDUyLnBuZw?x-oss-process=image/format,png
[format_png 57]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwMzgzMzc4Mi0xOTAyNzQ0MzU1LnBuZw?x-oss-process=image/format,png
[format_png 58]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwMzk1NDU0My00MTcyNTI5ODgucG5n?x-oss-process=image/format,png
[format_png 59]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQyNTg5NC8yMDE5MDkvMTQyNTg5NC0yMDE5MDkxMDEwNDEyOTEwNS0zMjEwMDgxNzIucG5n?x-oss-process=image/format,png