Web前端之Css知识点、Style

智码帮MJ682517

已于 2024-08-26 09:04:55 修改

阅读量856

点赞数 12

分类专栏： Web前端 Style Html 文章标签：前端 css web前端 web html

于 2024-01-02 21:44:02 首次发布

本文链接：https://blog.csdn.net/weixin_51157081/article/details/118768226

版权

Web前端同时被 3 个专栏收录

359 篇文章 5 订阅

订阅专栏

Style

92 篇文章 0 订阅

订阅专栏

Html

84 篇文章 1 订阅

订阅专栏

本文详细介绍了如何使用纯CSS实现各种加载动画效果，如平滑加载、按步骤加载、条纹样式等，同时展示了calc()函数在计算CSS属性值中的应用，以及steps函数在动画效果中的使用。

摘要由CSDN通过智能技术生成

web前端之css_color配色、各种颜色

安装

npm install colors.css
此命令会生成node_modules/colors.css/css/colors.css文件

style

/*
  COLORS
  Better default colors for the web
*/

/* 
   VARIABLES
   - Cool
   - Warm
   - Gray Scale
*/

/*
   SKINS
   - Backgrounds
   - Colors
   - Border colors
   - SVG fills
   - SVG Strokes
*/

/* Backgrounds */

.bg-navy {
   background-color: #001F3F;
}

.bg-blue {
   background-color: #0074D9;
}

.bg-aqua {
   background-color: #7FDBFF;
}

.bg-teal {
   background-color: #39CCCC;
}

.bg-olive {
   background-color: #3D9970;
}

.bg-green {
   background-color: #2ECC40;
}

.bg-lime {
   background-color: #01FF70;
}

.bg-yellow {
   background-color: #FFDC00;
}

.bg-orange {
   background-color: #FF851B;
}

.bg-red {
   background-color: #FF4136;
}

.bg-fuchsia {
   background-color: #F012BE;
}

.bg-purple {
   background-color: #B10DC9;
}

.bg-maroon {
   background-color: #85144B;
}

.bg-white {
   background-color: #FFFFFF;
}

.bg-gray {
   background-color: #AAAAAA;
}

.bg-silver {
   background-color: #DDDDDD;
}

.bg-black {
   background-color: #111111;
}

/* Colors */

.navy {
   color: #001F3F;
}

.blue {
   color: #0074D9;
}

.aqua {
   color: #7FDBFF;
}

.teal {
   color: #39CCCC;
}

.olive {
   color: #3D9970;
}

.green {
   color: #2ECC40;
}

.lime {
   color: #01FF70;
}

.yellow {
   color: #FFDC00;
}

.orange {
   color: #FF851B;
}

.red {
   color: #FF4136;
}

.fuchsia {
   color: #F012BE;
}

.purple {
   color: #B10DC9;
}

.maroon {
   color: #85144B;
}

.white {
   color: #FFFFFF;
}

.silver {
   color: #DDDDDD;
}

.gray {
   color: #AAAAAA;
}

.black {
   color: #111111;
}

/* Border colors 
   Use with another border utility that sets border-width and style 
   i.e .border { border-width: 1px); border-style: solid); }     
*/

.border--navy {
   border-color: #001F3F;
}

.border--blue {
   border-color: #0074D9;
}

.border--aqua {
   border-color: #7FDBFF;
}

.border--teal {
   border-color: #39CCCC;
}

.border--olive {
   border-color: #3D9970;
}

.border--green {
   border-color: #2ECC40;
}

.border--lime {
   border-color: #01FF70;
}

.border--yellow {
   border-color: #FFDC00;
}

.border--orange {
   border-color: #FF851B;
}

.border--red {
   border-color: #FF4136;
}

.border--fuchsia {
   border-color: #F012BE;
}

.border--purple {
   border-color: #B10DC9;
}

.border--maroon {
   border-color: #85144B;
}

.border--white {
   border-color: #FFFFFF;
}

.border--gray {
   border-color: #AAAAAA;
}

.border--silver {
   border-color: #DDDDDD;
}

.border--black {
   border-color: #111111;
}

/* Fills for SVG */

.fill-navy {
   fill: #001F3F;
}

.fill-blue {
   fill: #0074D9;
}

.fill-aqua {
   fill: #7FDBFF;
}

.fill-teal {
   fill: #39CCCC;
}

.fill-olive {
   fill: #3D9970;
}

.fill-green {
   fill: #2ECC40;
}

.fill-lime {
   fill: #01FF70;
}

.fill-yellow {
   fill: #FFDC00;
}

.fill-orange {
   fill: #FF851B;
}

.fill-red {
   fill: #FF4136;
}

.fill-fuchsia {
   fill: #F012BE;
}

.fill-purple {
   fill: #B10DC9;
}

.fill-maroon {
   fill: #85144B;
}

.fill-white {
   fill: #FFFFFF;
}

.fill-gray {
   fill: #AAAAAA;
}

.fill-silver {
   fill: #DDDDDD;
}

.fill-black {
   fill: #111111;
}

/* Strokes for SVG */

.stroke-navy {
   stroke: #001F3F;
}

.stroke-blue {
   stroke: #0074D9;
}

.stroke-aqua {
   stroke: #7FDBFF;
}

.stroke-teal {
   stroke: #39CCCC;
}

.stroke-olive {
   stroke: #3D9970;
}

.stroke-green {
   stroke: #2ECC40;
}

.stroke-lime {
   stroke: #01FF70;
}

.stroke-yellow {
   stroke: #FFDC00;
}

.stroke-orange {
   stroke: #FF851B;
}

.stroke-red {
   stroke: #FF4136;
}

.stroke-fuchsia {
   stroke: #F012BE;
}

.stroke-purple {
   stroke: #B10DC9;
}

.stroke-maroon {
   stroke: #85144B;
}

.stroke-white {
   stroke: #FFFFFF;
}

.stroke-gray {
   stroke: #AAAAAA;
}

.stroke-silver {
   stroke: #DDDDDD;
}

.stroke-black {
   stroke: #111111;
}

完整代码

gitee(码云) - mj01分支 - css/colors.css

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。