【前端技巧】CSS常用技巧碎片（二）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端技巧】CSS常用技巧碎片（二）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

CSS常用知识碎片（二）

常规渐变和CSS渐变角度方位关系对比表

角度	常规渐变	CSS渐变
0度	向右	向上
正角度	逆时针	顺时针

关于渐变断点，如linear-gradient(30deg, red 50%, skyblue 50%);，不同颜色位于同一断点位置时，两个颜色连接处可能会有明显的锯齿。可以在颜色连接处留1px的过渡区间，优化视觉表现：linear-gradient(30deg, red 50%, skyblue calc(50% + 1px));
设置渐变中心点位置：radial-gradient(100px at left top, white, deepskyblue);
设置渐变终止点位置：radial-gradient(farthest-corner circle at right 100px bottom 100px, white, deepskyblue);

关键字	描述
closest-side	渐变中心距离容器最近的边作为终止位置
closest-corner	渐变中心距离容器最近的角作为终止位置
farthest-side	渐变中心距离容器最远的边作为终止位置
farthest-corner	默认值。渐变中心距离容器最远的角作为终止位置

利用锥形渐变实现loading动画

<body>
    <div class="loading"></div>
</body>

<style>
    .loading {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: conic-gradient(deepskyblue, 30%, white);
        --mask: radial-gradient(closest-side, transparent 75%, black 76%);
        -webkit-mask-image: var(--mask);
        mask-image: var(--mask);
        animation: spin 1s linear infinite reverse;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
</style>

音频波形动画

<body>
    <h4>正延时（注意动画初期）</h4>
    <div class="loading">
        <i></i><i></i><i></i><i></i>
    </div>
    <h4>负延时</h4>
    <div class="loading negative">
        <i></i><i></i><i></i><i></i>
    </div>
</body>

<style>
    .loading i {
        display: inline-block;
        border-left: 2px solid deepskyblue;
        height: 2px;
        animation: scaleUp 4s linear infinite alternate;
        margin: 0 1px;
    }

    .loading i:nth-child(2) {
        animation-delay: 1s;
    }

    .loading i:nth-child(3) {
        animation-delay: 2s;
    }

    .loading i:nth-child(4) {
        animation-delay: 3s;
    }

    .negative i:nth-child(2) {
        animation-delay: -1s;
    }

    .negative i:nth-child(3) {
        animation-delay: -2s;
    }

    .negative i:nth-child(4) {
        animation-delay: -3s;
    }

    @keyframes scaleUp {
        to {
            transform: scaleY(10);
        }
    }
</style>

打点加载效果

<body>
    正在加载中<dot>...</dot>
</body>

<style>
    dot {
        display: inline-block;
        height: 1em;
        line-height: 1;
        vertical-align: -.25em;
        overflow: hidden;
    }

    dot::before {
        display: block;
        content: '...\A..\A.';
        white-space: pre-wrap;
        animation: dot 3s infinite step-start both;
    }

    @keyframes dot {
        33% {
            transform: translateY(-2em);
        }

        66% {
            transform: translateY(-1em);
        }
    }
</style>

利用transition-timing-function实现抛物线效果

<style>
    .fly-item,
    .fly-item>img {
        position: absolute;
        transition: transform .5s;
    }

    .fly-item {
        transition-timing-function: linear;
    }

    .fly-item>img {
        transition-timing-function: cubic-bezier(.55, 0, .85, .36);
    }
</style>