web前端之css、style

目录

• web前端之纯css实现的加载、steps、calc

web前端之纯css实现的加载、steps、calc

style

/* -------平滑加载------- */
.smooth_loading {
    background: linear-gradient(#333333 0 0) 0 / 0% no-repeat #f5f5f5;
    animation: smooth_loading_animation 2s infinite linear;
}

@keyframes smooth_loading_animation {
    100% {
        background-size: 100%;
    }
}

/* -------按步加载------- */
.step_by_step_loading {
    border-radius: 20px;
    background: linear-gradient(#ffa500 0 0) 0 / 0% no-repeat #f5f5f5;
    animation: step_by_step_loading_animation 2s infinite steps(10);
}

@keyframes step_by_step_loading_animation {
    100% {
        background-size: 110%;
    }
}

/* -------条纹加载------- */
.stripe_loading {
    border-radius: 20px;
    background: repeating-linear-gradient(135deg, #f03355 0 10px, #ffa516 0 20px) 0 / 0% no-repeat, repeating-linear-gradient(135deg, #f5f5f5 0 10px, #eeeeee 0 20px) 0 / 100%;
    animation: stripe_loading_animation 2s infinite;
}

@keyframes stripe_loading_animation {
    100% {
        background-size: 100%;
    }
}

/* -------虚线加载------- */
.dashed_loading {
    -webkit-mask: linear-gradient(90deg, #333333 70%, #0000 0) 0 / 20%;
    background: linear-gradient(#333333 0 0) 0 / 0% no-repeat #ddd;
    animation: dashed_loading_animation 2s infinite steps(6);
}

@keyframes dashed_loading_animation {
    100% {
        background-size: 120%;
    }
}

/* -------电池加载------- */
.battery_loading {
    position: relative;
    border: 2px solid #333333;
    background: repeating-linear-gradient(90deg, #333333 0 10px, #0000 0 16px) 0 / 0% no-repeat content-box content-box;
    animation: battery_loading_animation 2s infinite steps(6);
}

.battery_loading::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border: 2px solid #333333;
}

@keyframes battery_loading_animation {
    100% {
        background-size: 120%;
    }
}

/* -------内嵌加载------- */
.embedded_loading {
    position: relative;
    border-radius: 20px;
    color: #514b82;
    border: 2px solid #514b82;
}

.embedded_loading::before {
    position: absolute;
    content: "";
    margin: 2px;
    inset: 0 100% 0 0;
    border-radius: inherit;
    background: #514b82;
    animation: embedded_loading_animation 2s infinite;
}

@keyframes embedded_loading_animation {
    100% {
        inset: 0;
    }
}

/* -------珠链加载------- */
.bead_chain_loading {
    -webkit-mask: radial-gradient(circle closest-side, #333333 94%, #0000) 0 0 / 25% 100%, linear-gradient(#333333 0 0) center / calc(100% - 12px) calc(100% - 12px) no-repeat;
    background: linear-gradient(#25b09b 0 0) 0 / 0% no-repeat #f5f5f5;
    animation: bead_chain_loading_animation 2s infinite linear;
}

@keyframes bead_chain_loading_animation {
    100% {
        background-size: 100%;
    }
}

/* -------斑马线加载------- */
.zebra_loading {
    border-radius: 50%;
    -webkit-mask: linear-gradient(0deg, #333333 55%, transparent 0) bottom / 100% 18.18%;
    background: linear-gradient(#f03355 0 0) bottom / 100% 0% no-repeat #f5f5f5;
    animation: zebra_loading_animation 2s infinite steps(7);
}

@keyframes zebra_loading_animation {
    100% {
        background-size: 100% 115%;
    }
}

/* -------水柱加载------- */
.water_column_loading {
    --r1: 154%;
    --r2: 68.5%;
    border-radius: 50%;
    background: radial-gradient(var(--r1) var(--r2) at top, transparent 79.5%, #269af2 80%) center left, radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%) center center, radial-gradient(var(--r1) var(--r2) at top, transparent 79.5%, #269af2 80%) center right, #cccccc;
    background-size: 50.5% 220%;
    background-position: -100% 0%, 0% 0%, 100% 0%;
    background-repeat: no-repeat;
    animation: water_column_loading_animation 2s infinite linear;
}

@keyframes water_column_loading_animation {
    33% {
        background-position: 0% 33%, 100% 33%, 200% 33%;
    }

    66% {
        background-position: -100% 66%, 0% 66%, 100% 66%;
    }

    100% {
        background-position: 0% 100%, 100% 100%, 200% 100%;
    }
}

/* -------信号加载------- */
.signal_loading {
    border-radius: 200px 200px 0 0;
    -webkit-mask: repeating-radial-gradient(farthest-side at bottom, #0000 0, #000 1px 12%, #0000 calc(12% + 1px) 20%);
    background: radial-gradient(farthest-side at bottom, #514b82 0 95%, #0000 0) bottom / 0% 0% no-repeat #dddddd;
    animation: signal_loading_animation 2s infinite steps(6);
}

@keyframes signal_loading_animation {
    100% {
        background-size: 120% 120%;
    }
}

html

<!-- 信号加载 -->
<div class="signal_loading w_120 h_60"></div>

<!-- 水柱加载 -->
<div class="water_column_loading w_68 h_68"></div>

<!-- 斑马线加载 -->
<div class="zebra_loading w_68 h_68"></div>

<!-- 珠链加载 -->
<div class="bead_chain_loading w_120 h_24"></div>

<!-- 内嵌加载 -->
<div class="embedded_loading w_120 h_20"></div>

<!-- 电池加载 -->
<div class="battery_loading w_120 h_30 padding_2"></div>

<!-- 虚线加载 -->
<div class="dashed_loading w_120 h_20"></div>

<!-- 条纹加载 -->
<div class="stripe_loading w_120 h_20"></div>

<!-- 按步加载 -->
<div class="step_by_step_loading w_120 h_20"></div>

<!-- 平滑加载 -->
<div class="smooth_loading w_120 h_20"></div>

calc

calc()此CSS函数允许在声明CSS属性值时执行一些计算。它可以用在如下场合：<length>、<frequency>、<angle>、<time>、<percentage>、<number>或<integer>。
此calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。

steps

steps阶跃函数，是transition-timing-function和animation-timing-function两个属性的属性值，表示两个关键帧之间的动画效果，默认是ease。
steps有两个参数：
参数一是把这次过渡分成几段，这几段其实是在时间上分为几段去显示执行。
参数二是表示分成几段后，start还是end去执行动画。参数二有两个可选值start和end，默认是end。