详解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-animation实现逐帧动画效果
Mar 10 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
css背景和边框标签实例详解
May 21 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 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
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
PHP生成唯一订单号
2015/07/05 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
DOM相关内容速查手册
2007/02/07 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
python解析中国天气网的天气数据
2014/03/21 Python
Python中有趣在__call__函数
2015/06/21 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
售后服务科岗位职责范文
2013/11/13 职场文书
老人祝寿主持词
2014/03/28 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
转让协议书
2015/01/27 职场文书
建议书格式
2015/02/04 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
详解python网络进程
2021/06/15 Python