详解css3 mask遮罩完成1些殊效

日期：2020-12-10 类型：科技新闻 

关键词：小程序 活动，微信小程序demo，微信小程序游戏开发价格，手机小程序怎么做，视频播放微信小程序

遮罩mask的作用便是应用全透明的照片或渐变色遮罩元素的情况。因而，遮罩mask与情况background十分相近，除沒有color子特性，情况background剩余的6个子特性，mask都有 遮罩mask是1个复合型特性，包含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

1，高斯模糊不清+mask遮罩

 

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Title</title>
    <style>

        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100vh;
            width: 100vw;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-family: "Open Sans","PingFang SC","Microsoft YaHei","Helvetica Neue","Hiragino Sans GB","WenQuanYi Micro Hei",Arial,sans-serif;
        }

        @keyframes move {
            0% {
                background-position: 0 0;
            }
            50% {
                background-position: 100% 0;
            }
        }

        .bg {
            background: url(https://sp-webfront.skypixel.com/skypixel/v2/public/website/assets/04-f6eca6369ec03e70262b58b0e25cda7b.jpg);
            background-size: cover;
            position: fixed;
            top: ⑵0px;
            left: ⑵0px;
            right: ⑵0px;
            bottom: ⑵0px;
            filter: blur(15px);
            z-index: ⑴;
        }

        .mask {
            width: 340px;
            height: 196px;
            animation: move 40s infinite;
            background-image: url(https://sp-webfront.skypixel.com/skypixel/v2/public/website/assets/04-f6eca6369ec03e70262b58b0e25cda7b.jpg);
            background-size: cover;
            -webkit-mask:
                    url(http://static.w3ctrain.com/upload_cae6fcb079f57792a47202cb67bbc04a-dji-seeklogo.com.svg);
            -webkit-mask-size: cover;
        }

    </style>
</head>
<body>
<div class="bg"></div>
<div class="mask"></div>
</body>
</html>

2，窥见1点

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Document</title>
    <style>
        .wrap{
            position:absolute;
            width: 400px;
            border:1px solid black;
        }
        #mask{
            height: 300px;
            background:url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/dongzhi.jpg) lightblue;
            -webkit-mask:  url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/mask.png) no-repeat;
            animation: 2s maskPosition infinite alternate ;
        }
        #mask:hover{
            animation: none;
        }
        @keyframes maskPosition{
            0%{-webkit-mask-position:0 0;}
            100%{-webkit-mask-position:100% 100%;}
        }
    </style>
</head>
<body>
<div class="wrap">
    <div id="mask"></div>
</div>
<script>
    var oBox = document.getElementById('mask');
    oBox.onmousemove = function(e){
        e = e || event;
        oBox.style.WebkitMaskPosition=(e.clientX⑸0)+"px "+ (e.clientY⑸0)+"px";
    }
</script>
</body>
</html>

3，镂空实际效果

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        body {
            background-image: linear-gradient(⑷5deg, #8067B7, #EC87C0);
            min-height: calc(100vh - 40px);
            margin: 20px;
            font-family: 'Lato', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .mask {
            width: 288px;
            height: 176px;
            background: url(http://static.w3ctrain.com/upload_dc601fca016e97ec2575565e7f0dcfb2-mask2.svg);
            background-size: cover;
        }

        .ticket-mask {
            width: 288px;
            height: 176px;
            -webkit-mask: 
                    url(http://static.w3ctrain.com/upload_dc601fca016e97ec2575565e7f0dcfb2-mask2.svg);
            mask-size: cover;
        }

        .ticket {
            width: 288px;
            height: 176px;
            border-radius: 4px;
            overflow: hidden;
            background-image: linear-gradient(134deg, #3023AE 0%, #C86DD7 100%);
        }

        .info {
            height: 120px;
            background: url(http://static.w3ctrain.com/upload_9c0746a7eb377f304e733edc1effdb40-cover.jpeg);
            padding: 24px 16px;
            color: white;
        }

        h3 {
            font-size: 24px;
            line-height: 32px;
        }

        p {
            margin: 16px 0 0 0;
        }

        button {
            background: transparent;
            appearance: none;
            display: flex;
            border: none;
            height: 56px;
            justify-content: center;
            align-items: center;
            width: 100%;
            font-size: 14px;
            color: white;
            outline: none;
        }

        .symbol {
            color: white;
            font-size: 64px;
            margin: 16px 40px;
        }

        .addend {
            display: flex;
            align-items: center;
        }

        @media (max-width: 800px) {
            flex-direction: column

        ;
        }

    </style>
</head>
<body>
<div class="wrapper">
    <div class="addend">
        <div class="ticket">
            <div class="info">
                <h3>打骨折</h3>
                <p>专治各种各样不服</p>
            </div>
            <button>
                买买买
            </button>
        </div>
        <span class="symbol">+</span>
        <div class="mask"></div>
    </div>
    <span class="symbol">=</span>
    <div class="ticket-mask">
        <div class="ticket">
            <div class="info">
                <h3>打骨折</h3>
                <p>专治各种各样不服</p>
            </div>
            <button>
                买买买
            </button>
        </div>
    </div>
</div>

</body>
</html>

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：reset.css引进和1px边框难题的处理方式 返回下一篇：如何应用手机微信抽奖活动h5游戏快速提高粉絲？