主页 > 网站建设 >

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

网站建设 2023-01-28 21:38www.1681989.com免费网站

遮罩mask的功能就是使用透明的图片或渐变遮罩元素的背景。于是，遮罩mask与背景background非常类似，除了没有color子属性，背景background剩下的6个子属性，mask都有 遮罩mask是一个复合属性，包括mask-image、mask-mode、mask-repeat、mask-position、mask-clip、mask-orig、mask-size、mask-posite这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-orig】

默认值为border-box，可选值与background-orig相同

【mask-size】

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

【mask-mode】

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

【mask-posite】

默认值为add，可选值为add、subtract、tersect、exclude

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

一，高斯模糊+mask遮罩

 

源码

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

         {
            paddg: 0;
            marg: 0;
        }

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

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-family: "Open Sans","PgFang SC","Microsoft YaHei","Helvetica Neue","Hirago 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./skypixel/v2/public/website/assets/1535027674204-f6eca6369ec03e70262b58b0e25cda7b.jpg);
            background-size: cover;
            position: fixed;
            : -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            filter: blur(15px);
            z-dex: -1;
        }

        .mask {
            width: 340px;
            height: 196px;
            animation: move 40s fite;
            background-image: url(https://sp-webfront.skypixel./skypixel/v2/public/website/assets/1535027674204-f6eca6369ec03e70262b58b0e25cda7b.jpg);
            background-size: cover;
            -webkit-mask:
                    url(http://static.w3ctra./upload_cae6fcb079f57792a47202cb67bbc04a-dji-seeklogo..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./uploads/rs/142/wat3wtnz/dongzhi.jpg) lightblue;
            -webkit-mask:  url(http://sandbox.runjs./uploads/rs/142/wat3wtnz/mask.png) no-repeat;
            animation: 2s maskPosition fite 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-sizg: border-box;
            paddg: 0;
            marg: 0;
        }

        body {
            background-image: lear-gradient(-45deg, #8067B7, #EC87C0);
            m-height: calc(100vh - 40px);
            marg: 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.w3ctra./upload_dc601fca016e97ec2575565e7f0dcfb2-mask2.svg);
            background-size: cover;
        }

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

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

        .fo {
            height: 120px;
            background: url(http://static.w3ctra./upload_9c0746a7eb377f304e733edc1effdb40-cover.jpeg);
            paddg: 24px 16px;
            color: white;
        }

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

        p {
            marg: 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;
            outle: none;
        }

        .symbol {
            color: white;
            font-size: 64px;
            marg: 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="fo">
                <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="fo">
                <h3>打骨折</h3>
                <p>专治各种不服</p>
            </div>
            <button>
                买买买
            </button>
        </div>
    </div>
</div>

</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：css实现各种0.5px的线(小结) 下一篇：深入理解CSS 选择器

网站设计

Copyright © 2016-2025 www.1681989.com 推火网 版权所有 Power by