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

前端  /  管理员 发布于 7年前   201

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

 

源码

<!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>

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


  • 上一条：
    深入理解CSS 选择器
    下一条：
    使用CSS transition和animation改变渐变状态的实现方法

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客