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


Posted in HTML / CSS onOctober 24, 2018

遮罩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遮罩实现一些特效

源码

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

二,窥见一点

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

源码

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

三,镂空效果

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

源码

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
css3绘制百度的小度熊
Oct 29 #HTML / CSS
css3实现信纸/同学录效果的示例代码
Dec 11 #HTML / CSS
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 #HTML / CSS
详解Css3新特性应用之过渡与动画
Jan 10 #HTML / CSS
CSS3样式linear-gradient的使用实例
Jan 16 #HTML / CSS
纯CSS3实现表单验证效果(非常不错)
Jan 18 #HTML / CSS
使用CSS实现阅读进度条
Feb 27 #HTML / CSS
You might like
配置支持SSI
2006/11/25 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
xml转json的js代码
2012/08/28 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
Move.js入门
2017/02/08 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
Python入门篇之对象类型
2014/10/17 Python
Python查找相似单词的方法
2015/03/05 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
django创建超级用户过程解析
2019/09/18 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
车贷收入证明范本
2014/01/09 职场文书
工作交流会欢迎词
2014/01/12 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
2014年采购员工作总结
2014/11/18 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js