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

柔光的暖阳◎ 2024-05-24 04:16 52阅读 0赞

## `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;
            }
     *  ![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_20_color_FFFFFF_t_70_g_se_x_16]
     *  解释一下, 因为设置遮罩, 会把 `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%;
            }
     *  ![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_20_color_FFFFFF_t_70_g_se_x_16 1]

#### 应用 ####

1.  简易版聚光灯效果
    
     *  实现原理就是改变 `mask-position`![请添加图片描述][f98b4337c08441fea85739de6eb7b1ab.gif]
     *      <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>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/958d3ad8c3284ee3afe8acdb34b63b84.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/3e15670b8054425198376ddb0a0bc079.png
[f98b4337c08441fea85739de6eb7b1ab.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/40d255aa35944407a3982f2bce7f79d0.gif