css3怎么构建阴影(详解css3 mask遮罩实现一些特效)
css3怎么构建阴影
详解css3 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遮罩
源码
<!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" alt="css3怎么构建阴影(详解css3 mask遮罩实现一些特效)" border="0" />
二,窥见一点
源码
<!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" alt="css3怎么构建阴影(详解css3 mask遮罩实现一些特效)" border="0" />
三,镂空效果
源码
<!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.jpg" alt="css3怎么构建阴影(详解css3 mask遮罩实现一些特效)" border="0" />
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
热门推荐
- html文字标签设置(如何给HTML标签中的文本设置修饰线)
- 何谓SQLSERVER参数嗅探问题(何谓SQLSERVER参数嗅探问题)
- 云服务器好在哪你知道吗(美国云服务器怎么选择?美国云服务器选择技巧分享)
- FileZilla Server搭建FTP服务器配置及425错误与TLS警告解决方法详解(FileZilla Server搭建FTP服务器配置及425错误与TLS警告解决方法详解)
- 将mysql中的表导出来(MySQL之导出整个及单个表数据的操作)
- css !important的用法
- dedecms调用原始图(DEDECMS点击图片进入下一页功能实现教程)
- nginx如何配置多个域名访问(Nginx同一个域名配置多个项目的实现方法)
- 修改ubuntu 18.04的sources.list源为阿里或清华镜像的方法(修改ubuntu 18.04的sources.list源为阿里或清华镜像的方法)
- 安装mysql中要注意什么问题(安装Mysql时可能会遇到的一些疑难杂症)