CSS mask-position 及简易版聚光灯特效

mask-position

设置遮罩图像的初始位置, 这个位置是相对于遮罩位置层(由 mask-origin 确定)

语法

1. 一个或多个 <position> 值, 多个值需要用逗号分开
   • 📕目前浏览器, 除了 Safari, 几乎都不支持三值或四值语法, 因此这里也就不多分享😅.
   • IE 浏览器压根不支持该属性.
   • 在 Chrome, Edge, 和 Opera 要加上私有前缀 -webkit-. 79 及之后的 Edge 版本不需要私有前缀.
2. <position>
   • 代表一个 2D 位置, 可以使用相对或绝对值, 这个值也可能让位置跑到元素盒子之外.
3. 只有一个值

   • 可能的情况 :

     • 是 center. 垂直水平都居中显示.
     • 是 top, right, bottom, left 中的一个, 另一个默认为 center. 图片紧贴着指定的边居中显示.
     • <length> 或 <percentage>. 表示相对于盒子左边界的 x 轴坐标, y 轴默认 center.

   • <div class="container">
       <div class="box box1">Lorem...</div>
       <div class="box box2">Lorem...</div>
       <div class="box box3">Lorem...</div>
     </div>
     

   • :root {
       --box-size: 220px;
     }
     .box {
       width: var(--box-size);
       height: var(--box-size);
       padding: 5px;
       border: 3px solid black;
       -webkit-mask-repeat: no-repeat;
       mask-repeat: no-repeat;
       -webkit-mask-image: url(../../float/star.svg);
       mask-image: url(../../float/star.svg);
       background-color: salmon;
     }
     .box1 {
       -webkit-mask-position: center;
       mask-position: center;
     }
     .box2 {
       -webkit-mask-position: right;
       mask-position: right;
     }
     .box3 {
       -webkit-mask-position: 10px;
       mask-position: 10px;
     }
     

   • 

   • 解释一下, 因为设置遮罩, 会把 border, outline 等统统遮起来, 所以没办法情况看到盒子轮廓, 只能使用开发者工具选中元素方便看到 border 区域(黄色部分)

4. 两个属性值
   • 如果两个属性值都是关键字, 那么就要注意关键字的顺序. top, bottom 只能作为 y 方向的关键字. left, right 只能作为 x 方向的关键字. center 都可以
   • 如果两个属性值一个是关键字, 一个是数值, 同样注意顺序.
   • 如果两个属性值都是数值, 就没有顺序, 第一个值表示 x 方向坐标, 第二个表示 y 方向的坐标.

   • <div class="container">
       <div class="box box4">Lorem...</div>
       <div class="box box5">Lorem...</div>
       <div class="box box6">Lorem...</div>
     </div>
     

   • .box4 {
       -webkit-mask-position: bottom right;
       mask-position: bottom right;
     }
     .box5 {
       -webkit-mask-position: 30% top;
       mask-position: 30% top;
     }
     .box6 {
       -webkit-mask-position: 30% 70%;
       mask-position: 30% 70%;
     }
     

   • 

应用

1. 简易版聚光灯效果
   • 实现原理就是改变 mask-position

   • <div class="container">
       <div class="run-content">
         Hello, World
       </div>
     </div>
     

   • .container {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 20px;
     }
     .run-content {
       font-size: 10rem;
       background: linear-gradient(90deg, 
         #4fcf70, #fad648, #a767e5, #12bcfe, #eece7b
       );
       color: transparent;
       -webkit-background-clip: text;
       background-clip: text;
       font-family: Helvetica, sans-serif;
       -webkit-mask-image: url(../../float/star.svg);
       mask-image: url(../../float/star.svg);
       -webkit-mask-repeat: no-repeat;
       mask-repeat: no-repeat;
       -webkit-mask-size: 200% 200%;
       mask-size: 200% 200%;
       animation: light 1.2s ease-in-out infinite;
       animation-direction: alternate;
     }
     
     @keyframes light {
       from {
         -webkit-mask-position: 0%;
         mask-position: 0%;
       }
       to {
         -webkit-mask-position: 100%;
         mask-position: 100%;
       }
     }
     

2. 下面就是 star.svg 的代码

   	<?xml version="1.0" encoding="UTF-8" standalone="no"?>
   	<svg
   	   xmlns:dc="http://purl.org/dc/elements/1.1/"
   	   xmlns:cc="http://creativecommons.org/ns#"
   	   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   	   xmlns:svg="http://www.w3.org/2000/svg"
   	   xmlns="http://www.w3.org/2000/svg"
   	   version="1.1"
   	   id="svg2"
   	   viewBox="0 0 99.999997 99.999997"
   	   height="100"
   	   width="100">
   	  <defs
   	     id="defs4" />
   	  <metadata
   	     id="metadata7">
   	    <rdf:RDF>
   	      <cc:Work
   	         rdf:about="">
   	        <dc:format>image/svg+xml</dc:format>
   	        <dc:type
   	           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
   	        <dc:title></dc:title>
   	      </cc:Work>
   	    </rdf:RDF>
   	  </metadata>
   	  <g
   	     transform="translate(0,-952.36223)"
   	     id="layer1">
   	    <path
   	       d="M 50.000001,954.80939 65.450848,986.11624 100,991.13652 74.999998,1015.5055 80.901699,1049.915 50,1033.6691 19.098298,1049.915 25.000001,1015.5055 -1.2134336e-6,991.13652 34.549151,986.11624 Z"
   	       id="path4136"
   	       style="opacity:1;fill:#000000;fill-opacity:0.50222224;stroke:none;stroke-width:22.67716599;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
   	  </g>
   	</svg>