Css： flex布局+趣味Demo

爱学习的小学渣2025-07-07 11:14

布局

flex

flex布局意为"弹性布局"，任何一个容器都可以指定flex布局。行内元素也可以使用。webkit内核浏览器必须加上-webkit前缀，且设置flex布局之后，子元素的float、clear和vertical-align属性将失效。

基本概念

使用flex布局的元素称为flex容器。所有的子元素会成为容器的成员目，称为flex item（项目），容器默认存在两条轴：水平的主轴和垂直的交叉轴。项目默认主轴排列。单项目占据的主轴空间较main size，占据的交叉轴空间称为cross size。

如果 flex-direction 是 row ，一般情况下，主轴的起始线是左边，终止线是右边。交叉轴的起始线是 flex 容器的顶部，终止线是底部。注意如果书写内容时阿拉伯文，那么主轴的起始线是右边，终止线是左边。

属性使用

容器上的属性：

  • flex-direction：决定主轴的方向，可选值：row | row-reverse | column | column-reverse

  • flex-wrap：默认情况下项目都排在一条轴线上，如果一条轴线排不下，配置如何换行，可选值：nowrap|warp|wrap-reverse。

    • 其中wrap-reverse项目会在换行时按相反的顺序排列。这意味着，项目首先填充最后一行，然后从右向左排列，而不是从左向右。

  • flex-flow：flex-direction 属性和flex-wrap属性的简写，默认为:flex-flow:row nowrap。

  • justify-content：定义了项目在主轴上的对齐方式，可选值：flex-start | flex-end | center | space-between | space-around;

    • flex-start（默认值）：左对齐
    • flex-end：右对齐
    • center： 居中
    • space-between：两端对齐，项目之间的间隔都相等。
    • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

  • align-items：定义项目在交叉轴上如何对齐，可选值flex-start | flex-end | center | baseline | stretch

    • flex-start：交叉轴的起点对齐。
    • flex-end：交叉轴的终点对齐。
    • center：交叉轴的中点对齐。
    • baseline: 项目的第一行文字的基线对齐。
    • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

  • align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。可选值：flex-start | flex-end | center | space-between | space-around | stretch

    那这个轴线数怎么确定呢？实际上这主要是由flex-wrap属性决定的，当flex-wrap 设置为 nowrap 时，容器仅存在一根轴线，因为项目不会换行，就不会产生多条轴线。当 flex-wrap 设置为 wrap 时，容器可能会出现多条轴线，这时就需要去设置多条轴线之间的对齐方式。

    • flex-start：与交叉轴的起点对齐。
    • flex-end：与交叉轴的终点对齐。
    • center：与交叉轴的中点对齐。
    • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    • stretch（默认值）：轴线占满整个交叉轴。

项目上属性：

  • order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。

  • flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

  • flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

  • flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size），默认值为auto，即项目的本来大小

    • 默认值是 auto

      • 元素设置了宽度，flex-basis 为设置的宽度
      • 元素未设置宽度，flex-basis 为元素内容的尺寸

    • flex-basis 属性优先于 width 属性；

    • 设为 0 ，则子元素的大小不在空间分配计算的考虑之内

  • align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

  • flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

    • 0 1 auto：不放大可缩小，项目占据主轴空间。
    • none：相当于0 0 auto,这表示子元素没有初始大小，它不会增长也不会收缩，不会根据可用空间进行伸缩调整。将保持其初始大小。
    • auto：相当于1 1 auto,这表示子元素可以根据其内容大小自动决定大小，它可以增长也可以收缩。但在尺寸不足时会优先最大化内容尺寸。
    • 0：相当于0 1 0%，这表示子元素不会增长也不会收缩，它将保持其初始大小。
    • 1：相当于1 1 0%，这表示子元素可以增长，占用主轴上的剩余空间。

    flex-0 与flex-none对比：flex-0会表现为最小内容宽度，会将高度撑高（当前没有设置高度，如果设置高度文字会超过设置的高度，如下图）flex-none时候会表现为最大内容宽度，字数过多时候会超过容器宽度

    flex:1和flex:auto的区别 ：虽然都是充分分配容器的尺寸，但是flex:1的尺寸表现更为内敛（优先牺牲自己的尺寸），flex:auto的尺寸表现则更为霸道（优先扩展自己的尺寸）。

flex布局应用

  1. 导航栏菜单

  2. 骰子布局

趣味CSS

Button集合

shareButton

描述：分享按钮，鼠标悬停，按钮将打开，展示出多个svg来进行分享选择。鼠标移开，恢复成share文字展示的按钮。

主要实现：

  • HTML
xml 复制代码 
 <button class="btn-share">
  <span class="btn-overlay">
    <svg t="1580465783605" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9773" width="20" height="20"><path d="M767.99994 585.142857q75.995429 0 129.462857 53.394286t53.394286 129.462857-53.394286 129.462857-129.462857 53.394286-129.462857-53.394286-53.394286-129.462857q0-6.875429 1.170286-19.456l-205.677714-102.838857q-52.589714 49.152-124.562286 49.152-75.995429 0-129.462857-53.394286t-53.394286-129.462857 53.394286-129.462857 129.462857-53.394286q71.972571 0 124.562286 49.152l205.677714-102.838857q-1.170286-12.580571-1.170286-19.456 0-75.995429 53.394286-129.462857t129.462857-53.394286 129.462857 53.394286 53.394286 129.462857-53.394286 129.462857-129.462857 53.394286q-71.972571 0-124.562286-49.152l-205.677714 102.838857q1.170286 12.580571 1.170286 19.456t-1.170286 19.456l205.677714 102.838857q52.589714-49.152 124.562286-49.152z" p-id="9774" fill="currentColor"></path></svg>&nbsp;
    Share
  </span>
  <a href="#"><svg t="1580195676506" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2099" width="28" height="28"><path d="M962.267429 233.179429q-38.253714 56.027429-92.598857 95.451429 0.585143 7.972571 0.585143 23.990857 0 74.313143-21.723429 148.260571t-65.974857 141.970286-105.398857 120.32-147.456 83.456-184.539429 31.158857q-154.843429 0-283.428571-82.870857 19.968 2.267429 44.544 2.267429 128.585143 0 229.156571-78.848-59.977143-1.170286-107.446857-36.864t-65.170286-91.136q18.870857 2.852571 34.889143 2.852571 24.576 0 48.566857-6.290286-64-13.165714-105.984-63.707429t-41.984-117.394286l0-2.267429q38.838857 21.723429 83.456 23.405714-37.741714-25.161143-59.977143-65.682286t-22.308571-87.990857q0-50.322286 25.161143-93.110857 69.12 85.138286 168.301714 136.265143t212.260571 56.832q-4.534857-21.723429-4.534857-42.276571 0-76.580571 53.979429-130.56t130.56-53.979429q80.018286 0 134.875429 58.294857 62.317714-11.995429 117.174857-44.544-21.138286 65.682286-81.115429 101.741714 53.174857-5.705143 106.276571-28.598857z" p-id="2100" fill="currentColor"></path></svg></a>
  <a href="#"><svg t="1580195734305" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2429" width="28" height="28"><path d="M123.52064 667.99143l344.526782 229.708899 0-205.136409-190.802457-127.396658zM88.051421 585.717469l110.283674-73.717469-110.283674-73.717469 0 147.434938zM556.025711 897.627196l344.526782-229.708899-153.724325-102.824168-190.802457 127.396658 0 205.136409zM512 615.994287l155.406371-103.994287-155.406371-103.994287-155.406371 103.994287zM277.171833 458.832738l190.802457-127.396658 0-205.136409-344.526782 229.708899zM825.664905 512l110.283674 73.717469 0-147.434938zM746.828167 458.832738l153.724325-102.824168-344.526782-229.708899 0 205.136409zM1023.926868 356.00857l0 311.98286q0 23.402371-19.453221 36.566205l-467.901157 311.98286q-11.993715 7.459506-24.57249 7.459506t-24.57249-7.459506l-467.901157-311.98286q-19.453221-13.163834-19.453221-36.566205l0-311.98286q0-23.402371 19.453221-36.566205l467.901157-311.98286q11.993715-7.459506 24.57249-7.459506t24.57249 7.459506l467.901157 311.98286q19.453221 13.163834 19.453221 36.566205z" p-id="2430" fill="currentColor"></path></svg></a>
  <a href="#"><svg t="1580195767061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2759" width="28" height="28"><path d="M950.930286 512q0 143.433143-83.748571 257.974857t-216.283429 158.573714q-15.433143 2.852571-22.601143-4.022857t-7.168-17.115429l0-120.539429q0-55.442286-29.696-81.115429 32.548571-3.437714 58.587429-10.313143t53.686857-22.308571 46.299429-38.034286 30.281143-59.977143 11.702857-86.016q0-69.12-45.129143-117.686857 21.138286-52.004571-4.534857-116.589714-16.018286-5.12-46.299429 6.290286t-52.589714 25.161143l-21.723429 13.677714q-53.174857-14.848-109.714286-14.848t-109.714286 14.848q-9.142857-6.290286-24.283429-15.433143t-47.689143-22.016-49.152-7.68q-25.161143 64.585143-4.022857 116.589714-45.129143 48.566857-45.129143 117.686857 0 48.566857 11.702857 85.723429t29.988571 59.977143 46.006857 38.253714 53.686857 22.308571 58.587429 10.313143q-22.820571 20.553143-28.013714 58.88-11.995429 5.705143-25.746286 8.557714t-32.548571 2.852571-37.449143-12.288-31.744-35.693714q-10.825143-18.285714-27.721143-29.696t-28.306286-13.677714l-11.410286-1.682286q-11.995429 0-16.603429 2.56t-2.852571 6.582857 5.12 7.972571 7.460571 6.875429l4.022857 2.852571q12.580571 5.705143 24.868571 21.723429t17.993143 29.110857l5.705143 13.165714q7.460571 21.723429 25.161143 35.108571t38.253714 17.115429 39.716571 4.022857 31.744-1.974857l13.165714-2.267429q0 21.723429 0.292571 50.834286t0.292571 30.866286q0 10.313143-7.460571 17.115429t-22.820571 4.022857q-132.534857-44.032-216.283429-158.573714t-83.748571-257.974857q0-119.442286 58.88-220.306286t159.744-159.744 220.306286-58.88 220.306286 58.88 159.744 159.744 58.88 220.306286z" p-id="2760" fill="currentColor"></path></svg></a>
  <a href="#"><svg t="1580195779874" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3041" width="28" height="28"><path d="M208.603429 808.009143l132.022857 0 0-396.580571-132.022857 0 0 396.580571zM349.110857 289.133714q-0.585143-29.696-20.553143-49.152t-53.174857-19.456-53.979429 19.456-20.845714 49.152q0 29.110857 20.260571 48.859429t52.882286 19.748571l0.585143 0q33.718857 0 54.272-19.748571t20.553143-48.859429zM683.446857 808.009143l132.022857 0 0-227.401143q0-87.990857-41.691429-133.12t-110.299429-45.129143q-77.677714 0-119.442286 66.852571l1.170286 0 0-57.709714-132.022857 0q1.682286 37.741714 0 396.580571l132.022857 0 0-221.696q0-21.723429 4.022857-32.036571 8.557714-19.968 25.746286-34.011429t42.276571-13.970286q66.267429 0 66.267429 89.746286l0 211.968zM950.857143 237.714286l0 548.571429q0 68.022857-48.274286 116.297143t-116.297143 48.274286l-548.571429 0q-68.022857 0-116.297143-48.274286t-48.274286-116.297143l0-548.571429q0-68.022857 48.274286-116.297143t116.297143-48.274286l548.571429 0q68.022857 0 116.297143 48.274286t48.274286 116.297143z" p-id="3042" fill="currentColor"></path></svg></a>
</button>
  • CSS
css 复制代码 
#hover之前
# hidden
.btn-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--btn-overlay-color);
    border-radius: inherit;
    transition: 2s linear;
  }

  a {
    padding: 14px;
    color: var(--icon-color);
    // 元素不可见
    opacity: 0;  
    // 向左平移自身宽度
    transform: translateX(-100%);
    transition: 0.5s;

    @for $i from 1 through 4 {
      &:nth-child(#{$i}) {
        // 过度延时，从左到右延迟时间逐渐减少
        transition-delay: 1s - 0.2s * ($i - 1);
      }
    }
  }

 # hover之后
&:hover {
    .btn-overlay {
      transform: translateX(-100%);
      // 黑色部分延迟0.25s开始往左移动
      transition-delay: 0.25s; 
    }

    a {
      opacity: 1;
      // 回到原本的位置
      transform: translateX(0);
    }
  }

效果：

loadingButton

描述：实现一个加载按钮，点击之后展示loding效果，加载结束显示成功状态。默认状态只有一个Login文字。

主要实现：

  • HTML
xml 复制代码 
 <!-- 按钮 -->
  <button class="login" @click="login" :class="[status==='loading' ? 'loading' :(status === 'success' ? 'success' : 'login') ]">
  <span>login</span>
  <!-- 加载效果 -->
  <div class="loader">
    <div class="line-scale-pulse-out-rapid">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <!-- 对勾 -->
  <svg class="tick" width="30px" height="30px" stroke="white" fill="none">
    <polyline points="2,10 12,18, 28,2"></polyline>
  </svg>
</button>
  • CSS
css 复制代码 
.line-scale-pulse-out-rapid div {
      display: inline-flex;
      width: 4px;
      height: 35px;
      margin: 2px;
      border-radius: 2px;
      background-color: white;
      // 该动画名为 line-scale-pulse-out-rapid，持续时间为 0.9 秒，
      // 延迟 0.5 秒后开始播放，无限循环，使用自定义的缓动函数来控制动画的速度变化。
      // 重复的脉动或脉冲效果
      animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(.11, .49, .38, .78);

      &:nth-child(2),
      &:nth-child(4) {
        animation-delay: -0.25s;
      }

      &:nth-child(1),
      &:nth-child(5) {
        animation-delay: 0s;
      }
    }
    
  .tick {
    position: absolute;
    left: 1.5em;
    bottom: 1.2em;
    opacity: 0;
    stroke: #eee;
    stroke-width: 5px;
    stroke-dasharray: 36px;
    stroke-dashoffset: 36px;
    transition: opacity 0.3s;
  }
  
  // 加载时，按钮的宽度为 4em，字体颜色为透明，不可点击，不可选中。加载条出现
.loading {
    width: 4em;
    color: transparent;
    pointer-events: none;
    user-select: none;

    .loader {
      opacity: 1;
    }
  }
.success {
  // 加载条消失
    .loader {
      opacity: 0;
    }
  // 对勾出现
    .tick {
      opacity: 1;
      animation: show-tick 0.8s 0.4s forwards;
    }
  }

// 元素在垂直方向上缩小到原来的30%高度。这是动画中的压缩状态。
@keyframes line-scale-pulse-out-rapid {

  from,
  90% {
    transform: scaleY(1);
  }

  80% {
    transform: scaleY(0.3);
  }
}
// 路径描边动画
@keyframes show-tick {
  to {
    stroke-dashoffset: 0;
  }
}

效果：

WaveButton

描述：扩散性按钮，像波浪一样

主要实现：

  • HTML
xml 复制代码 
   <ul>
      <li><a href="#"><svg t="1580189699029" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6908" width="20" height="20"><path d="M881.2 158.2v538.4c0 16.1-5.5 30.3-16.4 42.8-10.9 12.5-24.7 22.2-41.3 29.1-16.7 6.9-33.3 12-49.7 15.4-16.5 3.3-31.9 5.1-46.4 5.1s-29.9-1.7-46.4-5.1c-16.5-3.3-33.1-8.5-49.7-15.4s-30.4-16.6-41.3-29.1c-10.9-12.5-16.4-26.8-16.4-42.8s5.5-30.3 16.4-42.8c10.9-12.5 24.7-22.1 41.3-29.1 16.7-6.9 33.3-12 49.7-15.4 16.5-3.3 31.9-5.1 46.4-5.1 33.7 0 64.4 6.3 92.3 18.7V365L450.5 478.9v340.8c0 16-5.5 30.3-16.4 42.8-10.9 12.5-24.7 22.1-41.3 29.1-16.7 6.9-33.3 12-49.7 15.4-16.5 3.3-31.9 5.1-46.4 5.1s-29.9-1.7-46.4-5.1c-16.5-3.3-33.1-8.5-49.7-15.4s-30.4-16.6-41.3-29.1-16.4-26.8-16.4-42.8c0-16.1 5.5-30.3 16.4-42.8 10.9-12.5 24.7-22.1 41.3-29.1 16.7-6.9 33.3-12 49.7-15.4 16.5-3.3 31.9-5.1 46.4-5.1 33.7 0 64.4 6.3 92.3 18.7V281.2c0-9.9 3-19 9.1-27.2s14-13.9 23.6-17.1l399.9-123c3.8-1.3 8.3-1.9 13.4-1.9 12.8 0 23.8 4.4 32.7 13.4 9.1 9.1 13.5 20.1 13.5 32.8z" p-id="6909"></path></svg></a></li>
      <li><a href="#"><svg t="1580189904311" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4874" width="20" height="20"><path d="M897.9 290.2c-18.6-11.7-158.1 53.9-158.1 53.9v-6.9c0-57.3-48-103.7-107.3-103.7H219.3C160 233.6 112 280 112 337.3v348.6c0 57.3 48 103.7 107.3 103.7h413.3c59.3 0 107.3-46.4 107.3-103.7v-8.5s140.3 65.1 158.1 53.9c17.7-11.2 18.6-429.4-0.1-441.1z m-558.2 388V344.1l272.1 167-272.1 167.1z m0 0" p-id="4875"></path></svg></a></li>
    </ul>
  • CSS
css 复制代码 
@function glow(
  $inner-color: rgb(89, 89, 180),
  $outer-color: rgba(89, 89, 180, 0.5),
  $depth: 5,
  $delta: 15px
) {
  $shadows: ();

  // inner glow
  // 循环用于生成内部发光的阴影值。它从1循环到 ceil((5 / 2))，并将生成的阴影值附加到 $shadows 列表中
  @for $i from 1 through ceil((5 / 2)) {
    $shadows: append($shadows, 0 0 (($delta / 2) * $i) $inner-color, comma);
  }

  // outer glow,循环用于生成外部发光的阴影值
  @for $i from 1 through $depth {
    $shadows: append($shadows, 0 0 0 ($delta * $i) $outer-color, comma);
  }

  @return $shadows;
}

a {
      position: relative;
      display: block;
      padding: 4px;
      width: 100%;
      height: 100%;
      text-decoration: none;
      text-align: center;

      &::before {
        position: absolute;
        content: "";
        top: 50%;
        left:50%;
        transform: translate(-50%,-50%);
        z-index: -1;
        width: 100%;
        height: 100%;
        background: white;
        border-radius: 50%;
        transition: 0.8s;
      }

      &:hover::before {
        box-shadow: glow();
      }
    }

效果：

其他按钮

  • 大致实现
css 复制代码 
 &-jittery {
    animation: jittery 4s infinite;
  }

  // 创建了一个内阴影效果，该内阴影的主要特点是它在元素的内部并且具有较大的模糊半径
  &-fill {
    transition: 2s;
    &:hover {
      background: transparent;
      box-shadow: inset 0 0 0 36px var(--btn-bg);
    }
  }
  // 外阴影
  &-pulse {
    &:hover {
      box-shadow: 0 0 0 18px transparent;
      animation: pulse 1s;
    }
  }

 

  &-close {
    transition: 0.3s;

    &:hover {
      // 水平偏移的内阴影，使阴影位于元素的右侧，距离元素 54 像素的位置；
      // 水平偏移的内阴影，使阴影位于元素的左侧，距离元素 54 像素的位置
      box-shadow: inset 54px 0 0 0 var(--btn-bg),
        inset -54px 0 0 0 var(--btn-bg);
    }
  }


  &-slide {
    transition: 0.3s;

    &:hover {
      background: transparent;
      box-shadow: inset 100px 0 0 0 var(--btn-bg);
    }
  }


  &-marquee {
    font-weight: 600;
    border: none;
    overflow: hidden;
    transition: 0.3s;

    &:hover {
      transform: scale(1.1);
    }

    span {
      display: block;
      padding: 0 20px;
      animation: move-left 2s linear infinite;  // 左移
      // 选择器将目标应用到元素自身的伪元素，在原始元素的内容之后插入内容。
      &::after {
        position: absolute;
        content: 'hello';
        top: 0;
        left: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
      }
    }
  }


  &-open-line {
    border: none;
    transition: 0.3s;
    &:hover {
      letter-spacing: 5px;  //在鼠标悬停状态下，文本的字符间距将增加 5 像素
      color: var(--btn-bg);
    }
  }
}

@keyframes jittery {
  5%,
  50% {
    transform: scale(1);
  }

  10% {
    transform: scale(0.9);
  }

  15% {
    transform: scale(1.15);
  }

  20% {
    transform: scale(1.15) rotate(-5deg);
  }

  25% {
    transform: scale(1.15) rotate(5deg);
  }

  30% {
    transform: scale(1.15) rotate(-3deg);
  }

  35% {
    transform: scale(1.15) rotate(2deg);
  }

  40% {
    transform: scale(1.15) rotate(0);
  }
}


@keyframes pulse {
  from {
    box-shadow: 0 0 0 0 var(--btn-bg);
  }
}

@keyframes move-left {
  to {
    transform: translateX(-100%);
  }
}

Card

**描述：**图片卡片，悬停鼠标卡片打开，图片像上，卡片内容向下

主要实现：

  • HTML
ini 复制代码 
  <div class="card" v-for="(item,index) in data" :key="index">
      <img :src="item.url" alt="Sora" class="card-img-top">
      <div class="card-body">
              <h5 class="card-title">{{ item.name }}</h5>
              <p class="card-text">{{ item.info }}</p>
              <a href="#" class="btn">More</a>
      </div>
    </div>
  </div>
  • CSS
css 复制代码 
.card {
    margin: 1em;

    .card-img-top {
      position: relative;
      z-index: 2;
      width: 302px;
      height: 222px;
      // 下移一半
      transform: translateY(52%);
      transition: 0.5s;
    }

    .card-body {
      z-index: 1;
      box-sizing: border-box;
      padding: 1.25em;
      height: 220px;
      background: white;
      box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.056),
        0 6.7px 5.3px rgba(0, 0, 0, 0.081), 0 12.5px 10px rgba(0, 0, 0, 0.1),
        0 22.3px 17.9px rgba(0, 0, 0, 0.119),
        0 41.8px 33.4px rgba(0, 0, 0, 0.144), 0 100px 80px rgba(0, 0, 0, 0.2);
      // 上移一半
      transform: translateY(-50%);
      transition: 0.5s;
    }

    &:hover {
      // 回原位置
      .card-img-top {
        transform: translateY(0);
      }

      .card-body {
        transform: translateY(0);
      }
    }
  }

效果：

多行字体渐变

**描述：**多行文字渐变效果

主要实现：

  • HTML
xml 复制代码 
<div class="outer">
  <div class="bg-color">
  <div>纯CSS</div>
  <div>实现</div>
  <div>多行</div>
  <div>渐变</div>
  <div>文本</div>
</div>
</div>
  • CSS
css 复制代码 
.bg-color {
 // 渐变的方向是从 210 度角开始，顺时针方向旋转。
  // 在渐变的起始位置（0%）使用hsl(165, 58%, 55%)。然后，从 0% 到 20% 的范围内
  // 将颜色渐变为该颜色。接下来的 20% 到 21% 范围内，将颜色渐变为透明
  font-size: 36px;
  font-weight: 800;
  line-height: 36px;
  display:block;
  background-clip: text;  // 控制背景图片或颜色绘制区域的 CSS 属性
  color:transparent;
  background-image: linear-gradient(210deg,  
  hsl(165, 58%, 55%) 0 20%, transparent 20% 21%,
  hsl(214, 79%, 65%) 0 40%, transparent 40% 41%,
  hsl(43, 100%, 66%) 0 60%, transparent 60% 61%,
  hsl(354, 81%, 63%)  0 80%, transparent 80% 81%,
  hsl(196, 68%, 54%) 0 100%, transparent 100% 101%);
}

.outer {
  display: flex;
  width:500px;
  height: 500px;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: black;
}

效果：

相关推荐
Sapphire～43 分钟前
重学前端013 --- 响应式网页设计 CSS网格布局
前端·css
二十雨辰2 小时前
歌词滚动效果
前端·css
dllmayday9 小时前
FontForge 手工扩展 iconfont.ttf
css·qt
BUG创建者14 小时前
html获取16个随机颜色并不重复
css·html·css3
面向星辰16 小时前
html中css的四种定位方式
前端·css·html
Async Cipher17 小时前
CSS 权重（优先级规则）
前端·css
草字1 天前
css flex布局，设置flex-wrap：wrap换行后，如何保证子节点被内容撑高后，每一行的子节点高度一致。
前端·javascript·css
在芜湖工作的二狗子1 天前
如何用AI Agent提高程序员写作效率
css
信看1 天前
实用 html 小工具
前端·css·html
永日456701 天前
学习日记-CSS-day53-9.11
前端·css·学习
热门推荐
01conda中设置镜像地址（附所有可换的地址）02UV安装并设置国内源03GitHub 镜像站点04KGG转MP3工具|非KGM文件|解密音频05A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程06突破百度网盘的下载限速，两种方法教会你【超详细】07UV 工具安装与国内镜像源配置指南0846个Nano-banana 精选提示词，持续更新中09保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）10Spec-Kit 使用指南