神奇的css之mask

最新推荐文章于 2024-08-25 20:15:05 发布

土豆Coder

最新推荐文章于 2024-08-25 20:15:05 发布

阅读量366

点赞数

分类专栏： CSS 文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_43443341/article/details/120159667

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

神奇的css之mask

动画转场

线性转场

请添加图片描述

<div class="mask-box"></div>

@keyframes maskMove {
  0% {-webkit-mask: -webkit-linear-gradient(45deg, #000 0%, transparent 10%);}
  10% {-webkit-mask: -webkit-linear-gradient(45deg, #000 10%, transparent 20%);}
  20% {-webkit-mask: -webkit-linear-gradient(45deg, #000 20%, transparent 30%);}
  30% {-webkit-mask: -webkit-linear-gradient(45deg, #000 30%, transparent 40%);}
  40% {-webkit-mask: -webkit-linear-gradient(45deg, #000 40%, transparent 50%);}
  50% {-webkit-mask: -webkit-linear-gradient(45deg, #000 50%, transparent 60%);}
  60% {-webkit-mask: -webkit-linear-gradient(45deg, #000 60%, transparent 70%);}
  70% {-webkit-mask: -webkit-linear-gradient(45deg, #000 70%, transparent 80%);}
  80% {-webkit-mask: -webkit-linear-gradient(45deg, #000 80%, transparent 90%);}
  90% {-webkit-mask: -webkit-linear-gradient(45deg, #000 90%, transparent 100%);}
  100% {-webkit-mask: -webkit-linear-gradient(45deg, #000 100%, transparent 100%);}
}
.mask-box{
  position: relative;
  width: 1000px;
  height: 667px;
  background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg01.jituwang.com%2F170706%2F256752-1FF613260070.jpg&refer=http%3A%2F%2Fimg01.jituwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633593174&t=324acbe5a821d9147826a9ba6c27b5ba');
  &::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.juimg.com%2Ftuku%2Fyulantu%2F140203%2F328979-14020304134069.jpg&refer=http%3A%2F%2Fwww.juimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633593228&t=62e3d9c9afdae5e9e47d603928d89737');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: maskMove 1s ease-in-out;
  }
}

角向转场

请添加图片描述
将 mask 的值都替换成 conic-gradient ，例如

-webkit-mask: -webkit-linear-gradient(45deg, #000 0%, transparent 10%);
// 替换成
-webkit-mask: conic-gradient(#000 0%, transparent 10%);

两张图片融合

在这里插入图片描述
将两张图片融合一起，首先容器的背景图放一张图片，然后使用伪元素再添加一张图片，并将其右上角使用渐变色遮住 mask 。

.mask-box{
  position: relative;
  width: 1000px;
  height: 667px;
  background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg01.jituwang.com%2F170706%2F256752-1FF613260070.jpg&refer=http%3A%2F%2Fimg01.jituwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633593174&t=324acbe5a821d9147826a9ba6c27b5ba');
  &::before{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.juimg.com%2Ftuku%2Fyulantu%2F140203%2F328979-14020304134069.jpg&refer=http%3A%2F%2Fwww.juimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633593228&t=62e3d9c9afdae5e9e47d603928d89737');
    -webkit-mask: -webkit-linear-gradient(45deg, #000 40%, transparent 60%);
  }
}