纯css实现炫酷的视频文本蒙版效果

南极一块修炼千年的大冰块
3,019 阅读4分钟

这是我参与更文挑战的第11天，活动详情查看： 更文挑战

前言

今天UI妹子给提了一个效果，要求视频上方有文字，只有文字部分可以看到下面的视频，非文字部分看到不到视频，类似于PS中的蒙版效果。我寻思着那要这这视频有何用？但看着UI妹子扑棱扑棱期待着的大眼睛，我没把自己的寻思说出口，而是说：成，等着瞧吧！

之所以这么有保证，是因为之前在codepen上看到过类似的效果，只不过是图片和文字的蒙版效果，其中用到了一个特别有意思的css属性，所以实现起来还是很简单的，我几分钟就搞定了，来跟我一起基于这个属性来做一个炫酷的纯css视频文本蒙版效果吧~

mix-blend-mode 属性

要实现蒙版效果，最重要的就是mix-blend-mode属性了，官方文档说：这个属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。是不是看不太明白一脸懵？没关系，让我们来看看它的属性值：

mix-blend-mode: normal; //正常

mix-blend-mode: multiply; //正片叠底

mix-blend-mode: screen; //滤色

mix-blend-mode: overlay; //叠加

mix-blend-mode: darken; //变暗

mix-blend-mode: lighten; //变亮

mix-blend-mode: color-dodge; //颜色减淡

mix-blend-mode: color-burn; //颜色加深

mix-blend-mode: hard-light; //强光

mix-blend-mode: soft-light; //柔光

mix-blend-mode: difference; //差值

mix-blend-mode: exclusion; //排除

mix-blend-mode: hue; //色相

mix-blend-mode: saturation; //饱和度

mix-blend-mode: color; //颜色

mix-blend-mode: luminosity; //亮度

mix-blend-mode: initial; //初始

mix-blend-mode: inherit; //继承

mix-blend-mode: unset; //复原

是不是更懵了？哈哈哈😵如果有PS基础的小伙伴应该很容易理解关于上面这些属性的含义，如果没有也没关系，可以一条条试试看效果。

由上面的属性我们可以判断出很多在线网站的照片滤镜，也是基于这个属性做出来的，所以应用还是蛮广的。了解了上面的属性，我们来搭建html结构：

DOM 结构

DOM页面结构应该是一个盒子里面包括了一个视频和一段文字，文字和视频应该是重叠的，且都应该占满盒子，所以盒子我给了相对定位，文字和视频都是绝对定位，且占满空间。因为文字要在视频上方，所以文字p标签应该在video标签的下面。所以我首先是这么写的：

  <style>
    .box{
      width: 700px;
      height: 500px;
      position: relative;
    }
    video,
    p{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    p{
      font-size: 200px;
      font-weight: 700;
      line-height: 500px;
      text-align: center;
      background: white;
    }
  </style>
  <div class="box">
    <video autoplay muted loop preload poster="https://www.apple.com.cn/v/iphone-12/g/images/overview/camera/night_mode_01__dg8mk3qbqhci_large.jpg">
      <source src="https://www.apple.com.cn/105/media/us/iphone-12/2020/7f5b7de7-9f8c-41eb-bf3b-f294773108e6/anim/video/large_2x.mp4" />
    </video>
    <p>PEPSI</p>
  </div>

运行看一下：

image.png

啊哈，已经成功一半了，我们给p标签加上mix-blend-mode: screen;看一下：

GIF 2021-6-11 22-38-13.gif

大功告成！！！

当然，作为一名优秀的前端开发者，即使是一个小demo，我们也要做的尽善尽美，比如现在这个字体看起来就比较丑，所以我想要再换个字体。

@font-face 规则

作为css3的高级属性，@font-face实在是太低调了，可是不得不承认它的强大，改版字体什么的轻轻松松。关于它详细的属性值含义，w3school有详细的介绍，这里我们来简单看一下它的设置：

font-family 必需。规定字体的名称。

src 必需。定义字体文件的 URL。

是不是特别简单？我又去阿里巴巴矢量图标库的iconfont-webfont平台找了一款在线字体，一番引入设置：

  <style>
    @font-face {
      font-family: 'webfont';
      src: url('//at.alicdn.com/t/webfont_9fm5seiutdt.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/webfont_9fm5seiutdt.svg#杨任东竹石体-Bold') format('svg');
    }
    .box{
      width: 700px;
      height: 500px;
      position: relative;
    }
    video,
    i {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    i{
      display: block;
      font-family: webfont;
      font-size: 200px;
      font-weight: 700;
      line-height: 500px;
      text-align: center;
      background: white;
      mix-blend-mode: screen;
    }
  </style>
  <div class="box">
      <video autoplay muted loop preload poster="https://www.apple.com.cn/v/iphone-12/g/images/overview/camera/night_mode_01__dg8mk3qbqhci_large.jpg">
          <source src="https://www.apple.com.cn/105/media/us/iphone-12/2020/7f5b7de7-9f8c-41eb-bf3b-f294773108e6/anim/video/large_2x.mp4" />
      </video>
    <i class="web-font">PEPSI</i>
  </div>

效果如下：

GIF 2021-6-11 22-53-07.gif

完美搞定啦！

后记

不得不说，css还是很强大的，很多意想不到的场景和效果都可以轻轻松松用css来实现。就比如今天这个视频蒙版的效果，放在过去，我肯定说前端实现不了，只能让ui切图，但是今天我成功装了一把，毕竟看似复杂的效果，谁能想到只用一个属性就能搞定呢？

PS: 今天是我参加掘金更文挑战的第11天，周五依旧努力淦文章，已经坚持11天啦！有志者，事竟成。大家一起加油~

更文挑战的文章目录如下：

avatar
文章
阅读
粉丝