前端代码生涯

Appearance

css 实现故障风格 [2023-03-03] ​

视频地址

关键词 ​

  • background-blend-mode 定义元素的背景图片，以及背景色如何混合
    • lighten: 最终颜色是每个颜色通道下，顶底两层颜色中的最亮值所组成的颜色
  • mix-blend-mode 定义元素的内容应该与元素的直系父元素的内容和元素的背景如何混合
    • darken: 最终颜色是由每个颜色通道下，顶底两层颜色中的最暗值所组成的颜色
    • multiply: 最终颜色为顶层颜色与底层颜色相乘的结果。 如果叠加黑色层，则最终层必为黑色层，叠加白色层不会造成变化。 其效果类似于在透明薄膜上重叠印刷的两个图像
    • hard-light: 如果顶层颜色比底层颜色深，则最终颜色是 multiply 的结果，如果顶层颜色比底层颜色浅，则最终颜色是 screen 的结果。此混合模式相当于顶层与底层互换后的 overlay。 其效果类似于在背景层上（用前景层）打出一片刺眼的聚光灯
  • filter 滤镜
    • contrast(): 函数可调整输入图像的对比度。值是 0% 的话，图像会全黑。值是 100%，图像不变。值可以超过 100%，意味着会运用更低的对比。若没有设置值，默认是 1
    • grayscale(): 函数将改变输入图像灰度。amount 的值定义了转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0
  • background-clip
    • text: 背景被裁剪成文字的前景色(实验性，考虑兼容性)
查看代码
vue
<template>
  <div class="container">
    <div class="img sample1" />
    <div class="img sample2" />
    <div class="img sample3" />
    <div class="sample4-box" style="background-color: black">
      <div class="sample4" v-text="text" />
    </div>
  </div>
</template>
<script setup lang="ts">
const text = new Array(1800).fill(0).join('')
</script>
<style lang="less" scoped>
@keyframes shake {
  50% {
    transform: translateX(1%);
  }
}

.container {
  display: flex;
  flex-flow: row wrap;

  .img {
    margin: 10px;
  }

  .sample1 {
    width: 300px;
    height: 400px;
    background: center/cover url(./assets/gqq.jpg) #0ff;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: center/cover url(./assets/gqq.jpg) #f00;
    }

    &:hover {
      background-blend-mode: lighten; // 图片混合模式

      &::after {
        margin-left: 4px;
        background-blend-mode: lighten; // 图片混合模式
        mix-blend-mode: darken; // 子元素的整体混合模式
        animation: shake 60ms infinite;
      }
    }
  }

  .sample2 {
    width: 500px;
    height: 400px;
    background: center/cover url(./assets/vsgif.gif) #0ff;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: center/cover url(./assets/vsgif.gif) #f00;
    }

    &:hover {
      background-blend-mode: lighten; // 图片混合模式

      &::after {
        margin-left: 4px;
        background-blend-mode: lighten; // 图片混合模式
        mix-blend-mode: darken; // 子元素的整体混合模式
        animation: shake 60ms infinite;
      }
    }
  }

  .sample3 {
    width: 100%;
    height: 500px;
    background: center/cover url(./assets/bg.png);
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 20%;
      left: calc(50% - 100px);
      width: 120px;
      height: 120px;
      background: center/cover url(./assets/vsgif.gif);
    }

    &:hover::after {
      mix-blend-mode: multiply; // 子元素的整体混合模式
      filter: contrast(3); // 调整对比度
    }
  }

  .sample4-box {
    width: calc(100% - 20px);
    margin: 0 10px;

    .sample4 {
      word-break: break-all;
      background: center 80% / cover url(./assets/vsgif.gif);

      &:hover {
        background-clip: text; // 背景图覆盖范围改为文字
        -webkit-background-clip: text;
        word-wrap: break-word;
        color: transparent; // 文字透明
        filter: grayscale(1); // 调整灰度变成黑白风格
        mix-blend-mode: hard-light; // 和背景进行融合
      }
    }
  }
}
</style>

效果(鼠标悬浮查看) ​

000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000