css3 mask遮罩實現一些特效，mask經常使用特效彙總

時間 2019-11-24

標籤 css3 css mask 實現一些特效經常使用彙總欄目 CSS 简体版

原文原文鏈接

聲明：本文代碼並不是做者原創，是在開發過程當中，感受一些特效比較好，就收集一些mask的特效源碼，以備未來查閱使用。全部的源碼只要不是我本身寫的，我會註明出處。若是原做者不肯意被轉載使用，請聯繫我刪除相關內容。 mask遮罩特效我會持續更新，方便本身之後查閱使用的同時，也但願能給你們帶來便利。html

遮罩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屬性android

【mask-image】web

默認值爲none，值爲透明圖片，或透明漸變chrome

【mask-repeat】瀏覽器

默認值爲repeat，可選值與background-repeat相同，詳細狀況移步至此bash

【mask-position】app

默認值爲0 0，可選值與background-position相同，詳細狀況移步至此svg

【mask-clip】post

默認值爲border-box，可選值與background-clip相同，詳細狀況移步至此flex

【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遮罩

詳細講解，請查看原文

源碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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/1535027674204-f6eca6369ec03e70262b58b0e25cda7b.jpg);
            background-size: cover;
            position: fixed;
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            filter: blur(15px);
            z-index: -1;
        }

        .mask {
            width: 340px;
            height: 196px;
            animation: move 40s infinite;
            background-image: url(https://sp-webfront.skypixel.com/skypixel/v2/public/website/assets/1535027674204-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>
複製代碼

二，【轉載】窺見一點

出處忘記了 #-#，原做者看到後請聯繫我，我加上出處。

源碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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-50)+"px "+ (e.clientY-50)+"px";
    }
</script>
</body>
</html>
複製代碼

三，【轉載】鏤空效果

詳細講解，請查看原文這個效果是轉載掘金上一位大神的，本文只作記錄，方便之後查閱使用。若是你們想了解原理，請查看原文

源碼

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

        body {
            background-image: linear-gradient(-45deg, #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>
複製代碼

持續收集更新中。。。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。