详解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 相关文章推荐
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
Nov 10 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 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
实用函数9
2007/11/08 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
javascript编程起步(第二课)
2007/01/10 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
JSON 数据格式详解
2017/09/13 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
深入理解Django中内置的用户认证
2017/10/06 Python
python的dict判断key是否存在的方法
2020/12/09 Python
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
关于安全演讲稿
2014/05/09 职场文书
政风行风整改报告
2014/11/06 职场文书
实践论读书笔记
2015/06/29 职场文书
婚庆主持词大全
2015/06/30 职场文书
升学宴来宾致辞
2015/07/27 职场文书
生日寿星公答谢词
2015/09/29 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
SQL语句多表联合查询的方法示例
2022/04/18 MySQL
mysql sock文件存储了什么信息
2022/07/15 MySQL