利用mask-image实现图片显示部分进度

最新推荐文章于 2024-09-10 22:50:51 发布

冷子夜

最新推荐文章于 2024-09-10 22:50:51 发布

阅读量416

点赞数

分类专栏：大前端 # CSS 文章标签： vue.js html css3

本文链接：https://blog.csdn.net/qq_29180565/article/details/107868180

版权

大前端同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

CSS

25 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

code

<html>
  <header>
    <style>
      .demo {
        position: relative;
      }
      .icon {
        width: 100px;
      }
      .icon2 {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        -webkit-mask-image: url(./mask.png);
        -webkit-mask-size: 200px 100%;
        mask-size: 200px 100%;
        mask-image: url(./mask.png);
        -webkit-mask-position-x: -80px;
      }
    </style>
  </header>
  <body>
    <div class="demo">
      <img class="icon" src="./woman_grey.png" alt="" />
      <img class="icon2" src="./woman_light.png" alt="" />
    </div>
  </body>
</html>