纵有疾风起
人生不言弃

css3 mask遮罩实现一些特效

声明:本文代码并非作者原创,是在开发过程中,感觉一些特效比较好,就收集一些mask的特效源码,以备将来查阅使用。所有的源码只要不是我自己写的,我会注明出处。如果原作者不愿意被转载使用,请联系我删除相关内容。
mask遮罩特效我会持续更新,方便自己以后查阅使用的同时,也希望能给大家带来便利。

遮罩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属性

【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

一,【转载】高斯模糊+mask遮罩

详细讲解,请查看原文

css3 mask遮罩实现一些特效插图
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(https://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>

二,【转载】窥见一点

出处忘记了 #-#,原作者看到后请联系我,我加上出处。

css3 mask遮罩实现一些特效插图(1)
mask遮罩特效2.gif

源码

<!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(https://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/dongzhi.jpg) lightblue;            -webkit-mask:  url(https://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>

三,【转载】镂空效果

详细讲解,请查看原文
这个效果是转载掘金上一位大神的,本文只做记录,方便以后查阅使用。如果大家想了解原理,请查看原文

css3 mask遮罩实现一些特效插图(2)
镂空效果

源码

<!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(https://static.w3ctrain.com/upload_dc601fca016e97ec2575565e7f0dcfb2-mask2.svg);            background-size: cover;        }        .ticket-mask {            width: 288px;            height: 176px;            -webkit-mask:                     url(https://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(https://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>

文章转载于:https://www.jianshu.com/p/df51eec03cd3

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » css3 mask遮罩实现一些特效

分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活