弹幕不遮挡人物效果实现

易小哼唧

已于 2022-12-09 09:30:25 修改

阅读量398

点赞数 3

文章标签： html css 前端

于 2022-12-08 18:38:37 首次发布

本文链接：https://blog.csdn.net/qq_42529835/article/details/128241644

版权

在 B 站看视频的时候发现当字幕遇到人物的时候就被裁切了，不会挡住人物，觉得很神奇。

实现方式（一张图片+一个属性，搞定）

一行css代码：

mask-image: url(img/head.png);

为了更好的兼容性，你可以补一个带 -webkit- 前缀的样式：

-webkit-mask-image: url(img/head.png);
-moz-mask-image: url(img/head.png);
-ms-mask-image: url(img/head.png);
-o-mask-image: url(img/head.png);

一张图片：

具体demo实现：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>mask</title>
  </head>
  <style type="text/css">
    .mask {
      width: 240px;
      height: 240px;
      color: #fff;
      background-color: red;
      /* background-image: url(img/head.png); */
      -webkit-mask-image: url(img/head.png);
      -webkit-mask-size: 100% 100%;
      position: relative;
      margin: auto;
    }
    p {
      white-space: nowrap;
      color: black;
    }
    .text {
      position: absolute;
      left: 240px;
      animation: sport 15s linear infinite;
    }
    /* 鼠标经过停止运动 */
    .text:hover {
      animation-play-state: paused;
    }
    @keyframes sport {
      0% {
      }
      100% {
        /* 父盒子宽度减去100% */
        transform: translateX(-1000px);
      }
    }
  </style>
  <body>
    <div class="mask">
      <p>
        高端的效果，往往只需要采用最朴素的实现方式。一张图片+一个属性，直接搞定
      </p>
      <p>
        高端的效果，往往只需要采用最朴素的实现方式。一张图片+一个属性，直接搞定
      </p>
      <p class="text">
        高端的效果，往往只需要采用最朴素的实现方式。一张图片+一个属性，直接搞定
      </p>
    </div>
  </body>
</html>