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;
}

效果：

相关推荐
ayas123193 小时前
CSS学习
前端·css·学习
土族程序员3 小时前
JavaFX CSS @font-face 错误全面分析 loadStylesheetUnPrivileged / reportException
java·css·javafx
人生在勤，不索何获-白大侠3 小时前
day25——HTML & CSS 前端开发
前端·css·html
浩龙不eMo4 小时前
设置单行省略号后不生效？你肯定忘记了这几点！
前端·css
wordbaby6 小时前
关于 CSS 线性渐变角度（linear-gradient 角度含义及记忆方法）
前端·css
Ynov6 小时前
使用jQuery动态操作HTML和CSS
css·html·jquery
金金金__8 小时前
别再乱写 style 了！CSS 选择器才是正道
css
PineappleCoder11 小时前
前端面试秘籍：CSS那些你不得不懂的“潜规则”(三)
前端·css·面试
wordbaby12 小时前
CSS 环境变量 env() 与自定义变量 var() 全面解读及实用场景
前端·css
sunbyte13 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | VerifyAccountUi（验证码组件）
前端·javascript·css·vue.js·vue
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4，国内已可免费使用！（附教程）03MSPM0G3507——读取引脚的高低电平方法（数字信号循迹模块）04Coze 开源了，送上保姆级私有化部署方案【建议收藏】05腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）06扣子开源本地部署教程 丨Coze智能体小白喂饭级指南07KGG转MP3工具|非KGM文件|解密音频08【手把手攻略】国家育儿补贴正式开领！一键算清你能拿多少钱？附补贴领取计算器09coze 开源版本地部署及踩过的坑【喂饭级教程】10机器学习——多项式回归算法