css mask

最新推荐文章于 2024-12-26 00:07:18 发布

前端菜菜

最新推荐文章于 2024-12-26 00:07:18 发布

阅读量765

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_25919495/article/details/125215098

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .box {
    background: #333;
    width: 600px;
    height: 400px;
    margin: 56px auto;
  }

  /* .main {
    background: url('./640.png');
    margin: auto;
    position: relative;
    width: 487px;
    height: 246px;
    background-size: cover;
    border: 5px solid #333;
    margin: 50px auto;
    -webkit-mask: linear-gradient(90deg, transparent, #fff);
  } */

  /* .main {
    background: url('./640.png');
    margin: auto;
    position: relative;
    width: 487px;
    height: 246px;
    background-size: cover;
    border: 5px solid #333;
    margin: 50px auto;
    -webkit-mask: linear-gradient(135deg, transparent 15px, #fff 0) top left,
      linear-gradient(-135deg, transparent 15px, #fff 0) top right,
      linear-gradient(-45deg, transparent 15px, #fff 0) bottom right,
      linear-gradient(45deg, transparent 15px, #fff 0) bottom left;
    -webkit-mask-size: 50% 50%;
    -webkit-mask-repeat: no-repeat;
  } */

  .main {
    background: url('./640.png');
    /* background: linear-gradient(0deg, red 0%, yellow 50%, green 75%, blue 80%, transparent); */
    position: relative;
    width: 487px;
    height: 246px;
    background-size: cover;
    border: 1px solid #fff;
    padding: 30px;
    margin: 50px auto;
    /* -webkit-mask: linear-gradient(45deg, #000 0%, transparent 5%, transparent 5%); */
    /* -webkit-mask: linear-gradient(90deg, transparent, #fff); */
    /* -webkit-mask-size: 50% 50%;
    -webkit-mask-repeat: no-repeat; */

    -webkit-animation: maskMove 1s linear;
  }


  @keyframes maskMove {
    0% {
      -webkit-mask: linear-gradient(0deg, #000 0%, transparent 5%, transparent 5%);
    }

    10% {
      -webkit-mask: linear-gradient(36deg, #000 10%, transparent 15%, transparent 15%);
    }

    20% {
      -webkit-mask: linear-gradient(72deg, #000 20%, transparent 25%, transparent 25%);
    }

    30% {
      -webkit-mask: linear-gradient(108deg, #000 30%, transparent 35%, transparent 35%);
    }

    40% {
      -webkit-mask: linear-gradient(144deg, #000 40%, transparent 45%, transparent 45%);
    }

    50% {
      -webkit-mask: linear-gradient(180deg, #000 50%, transparent 55%, transparent 55%);
    }

    60% {
      -webkit-mask: linear-gradient(210deg, #000 60%, transparent 65%, transparent 65%);
    }

    70% {
      -webkit-mask: linear-gradient(240deg, #000 70%, transparent 75%, transparent 75%);
    }

    80% {
      -webkit-mask: linear-gradient(270deg, #000 80%, transparent 85%, transparent 85%);
    }

    90% {
      -webkit-mask: linear-gradient(330deg, #000 90%, transparent 95%, transparent 95%);
    }

    100% {
      -webkit-mask: linear-gradient(360deg, #000 100%, transparent 105%, transparent 105%);
    }
  }

  .main::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('./1.jpeg');
    -webkit-mask: linear-gradient(0deg, transparent, #000 50%);
    /*-webkit-mask: linear-gradient(90deg, #666 50%, transparent 50%);
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
  }
</style>

<body>
  <div class="box">
    <p>180deg</p>
    <div class="main"></div>
    <p>0deg</p>
  </div>

</body>

</html>