码库记事本

码库记事本

详解css3 mask遮罩实现一些特效

小诸哥 0

遮罩mask的功能就是使用透明的图片或渐变遮罩元素的背景。于是,遮罩mask与背景background非常类似,除了没有color子属性,背景background剩下的6个子属性,mask都有 遮罩mask是一个复合属性,包括mask-image、mask-mode、mask-repeat、mask-position、mask-clip、mask-origin、mask-size、mask-composite这8个属性 注意: IE浏览器不支持,webkit内核的浏览器(包括chrome、safari、IOS、android)需要添加-webkit-前缀。要特别注意的是,firefox浏览器也支持webkit-mask属性

【mask-image】

默认值为none,值为透明图片,或透明渐变

【mask-repeat】

默认值为repeat,可选值与background-repeat相同

【mask-position】

默认值为0 0,可选值与background-position相同

【mask-clip】

默认值为border-box,可选值与background-clip相同

【mask-origin】

默认值为border-box,可选值与background-origin相同

【mask-size】

默认值为auto,可选值与background-size相同

【mask-mode】

默认值为match-source,可选值为alpha、luminance、match-source,或者它们的组合

【mask-composite】

默认值为add,可选值为add、subtract、intersect、exclude

[注意]只有firefox支持mask-mode和mask-composite

一,高斯模糊+mask遮罩

 

源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.  
  8.          * {
  9.              padding: 0;
  10.              margin: 0;
  11.          }
  12.  
  13.          html,
  14.          body {
  15.              height: 100vh;
  16.              width: 100vw;
  17.          }
  18.  
  19.          body {
  20.              display: flex;
  21.              justify-content: center;
  22.              align-items: center;
  23.              flex-direction: column;
  24.              font-family: "Open Sans","PingFang SC","Microsoft YaHei","Helvetica Neue","Hiragino Sans GB","WenQuanYi Micro Hei",Arial,sans-serif;
  25.          }
  26.  
  27.          @keyframes move {
  28.              0% {
  29.                  background-position: 0 0;
  30.              }
  31.              50% {
  32.                  background-position: 100% 0;
  33.              }
  34.          }
  35.  
  36.          .bg {
  37.              background: url(https://sp-webfront.skypixel.com/skypixel/v2/public/website/assets/1535027674204-f6eca6369ec03e70262b58b0e25cda7b.jpg);
  38.              background-size: cover;
  39.              position: fixed;
  40.              top: -20px;
  41.              left: -20px;
  42.              right: -20px;
  43.              bottom: -20px;
  44.              filter: blur(15px);
  45.              z-index: -1;
  46.          }
  47.  
  48.          .mask {
  49.              width: 340px;
  50.              height: 196px;
  51.              animation: move 40s infinite;
  52.              background-image: url(https://sp-webfront.skypixel.com/skypixel/v2/public/website/assets/1535027674204-f6eca6369ec03e70262b58b0e25cda7b.jpg);
  53.              background-size: cover;
  54.              -webkit-mask:
  55.                      url(http://static.w3ctrain.com/upload_cae6fcb079f57792a47202cb67bbc04a-dji-seeklogo.com.svg);
  56.              -webkit-mask-size: cover;
  57.          }
  58.  
  59.      </style>
  60. </head>
  61. <body>
  62. <div class="bg"></div>
  63. <div class="mask"></div>
  64. </body>
  65. </html>

二,窥见一点

源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style>
  7.          .wrap{
  8.              position:absolute;
  9.              width: 400px;
  10.              border:1px solid black;
  11.          }
  12.          #mask{
  13.              height: 300px;
  14.              background:url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/dongzhi.jpg) lightblue;
  15.              -webkit-mask: url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/mask.png) no-repeat;
  16.              animation: 2s maskPosition infinite alternate ;
  17.          }
  18.          #mask:hover{
  19.              animation: none;
  20.          }
  21.          @keyframes maskPosition{
  22.              0%{-webkit-mask-position:0 0;}
  23.              100%{-webkit-mask-position:100% 100%;}
  24.          }
  25.      </style>
  26. </head>
  27. <body>
  28. <div class="wrap">
  29.      <div id="mask"></div>
  30. </div>
  31. <script>
  32.      var oBox = document.getElementById('mask');
  33.      oBox.onmousemove = function(e){
  34.          e = e || event;
  35.          oBox.style.WebkitMaskPosition=(e.clientX-50)+"px "+ (e.clientY-50)+"px";
  36.      }
  37. </script>
  38. </body>
  39. </html>

三,镂空效果

源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style>
  7.          * {
  8.              box-sizing: border-box;
  9.              padding: 0;
  10.              margin: 0;
  11.          }
  12.  
  13.          body {
  14.              background-image: linear-gradient(-45deg, #8067B7, #EC87C0);
  15.              min-height: calc(100vh - 40px);
  16.              margin: 20px;
  17.              font-family: 'Lato', sans-serif;
  18.              display: flex;
  19.              justify-content: center;
  20.              align-items: center;
  21.          }
  22.  
  23.          .wrapper {
  24.              display: flex;
  25.              flex-direction: column;
  26.              align-items: center;
  27.          }
  28.  
  29.          .mask {
  30.              width: 288px;
  31.              height: 176px;
  32.              background: url(http://static.w3ctrain.com/upload_dc601fca016e97ec2575565e7f0dcfb2-mask2.svg);
  33.              background-size: cover;
  34.          }
  35.  
  36.          .ticket-mask {
  37.              width: 288px;
  38.              height: 176px;
  39.              -webkit-mask:
  40.                      url(http://static.w3ctrain.com/upload_dc601fca016e97ec2575565e7f0dcfb2-mask2.svg);
  41.              mask-size: cover;
  42.          }
  43.  
  44.          .ticket {
  45.              width: 288px;
  46.              height: 176px;
  47.              border-radius: 4px;
  48.              overflow: hidden;
  49.              background-image: linear-gradient(134deg, #3023AE 0%, #C86DD7 100%);
  50.          }
  51.  
  52.          .info {
  53.              height: 120px;
  54.              background: url(http://static.w3ctrain.com/upload_9c0746a7eb377f304e733edc1effdb40-cover.jpeg);
  55.              padding: 24px 16px;
  56.              color: white;
  57.          }
  58.  
  59.          h3 {
  60.              font-size: 24px;
  61.              line-height: 32px;
  62.          }
  63.  
  64.          p {
  65.              margin: 16px 0 0 0;
  66.          }
  67.  
  68.          button {
  69.              background: transparent;
  70.              appearance: none;
  71.              display: flex;
  72.              border: none;
  73.              height: 56px;
  74.              justify-content: center;
  75.              align-items: center;
  76.              width: 100%;
  77.              font-size: 14px;
  78.              color: white;
  79.              outline: none;
  80.          }
  81.  
  82.          .symbol {
  83.              color: white;
  84.              font-size: 64px;
  85.              margin: 16px 40px;
  86.          }
  87.  
  88.          .addend {
  89.              display: flex;
  90.              align-items: center;
  91.          }
  92.  
  93.      @media (max-width: 800px) {
  94.              flex-direction: column
  95.  
  96.          ;
  97.          }
  98.  
  99.      </style>
  100. </head>
  101. <body>
  102. <div class="wrapper">
  103.      <div class="addend">
  104.          <div class="ticket">
  105.              <div class="info">
  106.                  <h3>打骨折</h3>
  107.                  <p>专治各种不服</p>
  108.              </div>
  109.              <button>
  110.                  买买买
  111.              </button>
  112.          </div>
  113.          <span class="symbol">+</span>
  114.          <div class="mask"></div>
  115.      </div>
  116.      <span class="symbol">=</span>
  117.      <div class="ticket-mask">
  118.          <div class="ticket">
  119.              <div class="info">
  120.                  <h3>打骨折</h3>
  121.                  <p>专治各种不服</p>
  122.              </div>
  123.              <button>
  124.                  买买买
  125.              </button>
  126.          </div>
  127.      </div>
  128. </div>
  129.  
  130. </body>
  131. </html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

标签: 详解 实现