经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS3 » 查看文章
详解css3 mask遮罩实现一些特效
来源：jb51　　时间：2018/10/26 9:48:17　　对本文有异议

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

 

源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.  
  8.         * {
  9.             padding: 0;
  10.             margin: 0;
  11.         }
  12.  
  13.         html,
  14.         body {
  15.             height: 100vh;
  16.             width: 100vw;
  17.         }
  18.  
  19.         body {
  20.             display: flex;
  21.             justify-content: center;
  22.             align-items: center;
  23.             flex-direction: column;
  24.             font-family: "Open Sans","PingFang SC","Microsoft YaHei","Helvetica Neue","Hiragino Sans GB","WenQuanYi Micro Hei",Arial,sans-serif;
  25.         }
  26.  
  27.         @keyframes move {
  28.             0% {
  29.                 background-position: 0 0;
  30.             }
  31.             50% {
  32.                 background-position: 100% 0;
  33.             }
  34.         }
  35.  
  36.         .bg {
  37.             background: url(https://sp-webfront.skypixel.com/skypixel/v2/public/website/assets/1535027674204-f6eca6369ec03e70262b58b0e25cda7b.jpg);
  38.             background-size: cover;
  39.             position: fixed;
  40.             top: -20px;
  41.             left: -20px;
  42.             right: -20px;
  43.             bottom: -20px;
  44.             filter: blur(15px);
  45.             z-index: -1;
  46.         }
  47.  
  48.         .mask {
  49.             width: 340px;
  50.             height: 196px;
  51.             animation: move 40s infinite;
  52.             background-image: url(https://sp-webfront.skypixel.com/skypixel/v2/public/website/assets/1535027674204-f6eca6369ec03e70262b58b0e25cda7b.jpg);
  53.             background-size: cover;
  54.             -webkit-mask:
  55.                     url(http://static.w3ctrain.com/upload_cae6fcb079f57792a47202cb67bbc04a-dji-seeklogo.com.svg);
  56.             -webkit-mask-size: cover;
  57.         }
  58.  
  59.     </style>
  60. </head>
  61. <body>
  62. <div class="bg"></div>
  63. <div class="mask"></div>
  64. </body>
  65. </html>

二，窥见一点

源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         .wrap{
  8.             position:absolute;
  9.             width: 400px;
  10.             border:1px solid black;
  11.         }
  12.         #mask{
  13.             height: 300px;
  14.             background:url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/dongzhi.jpg) lightblue;
  15.             -webkit-mask:  url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/mask.png) no-repeat;
  16.             animation: 2s maskPosition infinite alternate ;
  17.         }
  18.         #mask:hover{
  19.             animation: none;
  20.         }
  21.         @keyframes maskPosition{
  22.             0%{-webkit-mask-position:0 0;}
  23.             100%{-webkit-mask-position:100% 100%;}
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28. <div class="wrap">
  29.     <div id="mask"></div>
  30. </div>
  31. <script>
  32.     var oBox = document.getElementById('mask');
  33.     oBox.onmousemove = function(e){
  34.         e = e || event;
  35.         oBox.style.WebkitMaskPosition=(e.clientX-50)+"px "+ (e.clientY-50)+"px";
  36.     }
  37. </script>
  38. </body>
  39. </html>

三，镂空效果

源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         * {
  8.             box-sizing: border-box;
  9.             padding: 0;
  10.             margin: 0;
  11.         }
  12.  
  13.         body {
  14.             background-image: linear-gradient(-45deg, #8067B7, #EC87C0);
  15.             min-height: calc(100vh - 40px);
  16.             margin: 20px;
  17.             font-family: 'Lato', sans-serif;
  18.             display: flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.         }
  22.  
  23.         .wrapper {
  24.             display: flex;
  25.             flex-direction: column;
  26.             align-items: center;
  27.         }
  28.  
  29.         .mask {
  30.             width: 288px;
  31.             height: 176px;
  32.             background: url(http://static.w3ctrain.com/upload_dc601fca016e97ec2575565e7f0dcfb2-mask2.svg);
  33.             background-size: cover;
  34.         }
  35.  
  36.         .ticket-mask {
  37.             width: 288px;
  38.             height: 176px;
  39.             -webkit-mask: 
  40.                     url(http://static.w3ctrain.com/upload_dc601fca016e97ec2575565e7f0dcfb2-mask2.svg);
  41.             mask-size: cover;
  42.         }
  43.  
  44.         .ticket {
  45.             width: 288px;
  46.             height: 176px;
  47.             border-radius: 4px;
  48.             overflow: hidden;
  49.             background-image: linear-gradient(134deg, #3023AE 0%, #C86DD7 100%);
  50.         }
  51.  
  52.         .info {
  53.             height: 120px;
  54.             background: url(http://static.w3ctrain.com/upload_9c0746a7eb377f304e733edc1effdb40-cover.jpeg);
  55.             padding: 24px 16px;
  56.             color: white;
  57.         }
  58.  
  59.         h3 {
  60.             font-size: 24px;
  61.             line-height: 32px;
  62.         }
  63.  
  64.         p {
  65.             margin: 16px 0 0 0;
  66.         }
  67.  
  68.         button {
  69.             background: transparent;
  70.             appearance: none;
  71.             display: flex;
  72.             border: none;
  73.             height: 56px;
  74.             justify-content: center;
  75.             align-items: center;
  76.             width: 100%;
  77.             font-size: 14px;
  78.             color: white;
  79.             outline: none;
  80.         }
  81.  
  82.         .symbol {
  83.             color: white;
  84.             font-size: 64px;
  85.             margin: 16px 40px;
  86.         }
  87.  
  88.         .addend {
  89.             display: flex;
  90.             align-items: center;
  91.         }
  92.  
  93.         @media (max-width: 800px) {
  94.             flex-direction: column
  95.  
  96.         ;
  97.         }
  98.  
  99.     </style>
  100. </head>
  101. <body>
  102. <div class="wrapper">
  103.     <div class="addend">
  104.         <div class="ticket">
  105.             <div class="info">
  106.                 <h3>打骨折</h3>
  107.                 <p>专治各种不服</p>
  108.             </div>
  109.             <button>
  110.                 买买买
  111.             </button>
  112.         </div>
  113.         <span class="symbol">+</span>
  114.         <div class="mask"></div>
  115.     </div>
  116.     <span class="symbol">=</span>
  117.     <div class="ticket-mask">
  118.         <div class="ticket">
  119.             <div class="info">
  120.                 <h3>打骨折</h3>
  121.                 <p>专治各种不服</p>
  122.             </div>
  123.             <button>
  124.                 买买买
  125.             </button>
  126.         </div>
  127.     </div>
  128. </div>
  129.  
  130. </body>
  131. </html>

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS3热门文章

  • CSS3选择器新增问题的实现_css3_CSS
  • CSS3实现列表无限滚动/轮播效果_css3_CSS
  • CSS3 Tab动画实例之背景切换动态效果_css3_CSS
  • Github上流行的CSS3动画效果库 animate.css
  • CSS3通过var()和calc()函数实现动画特效_css3_CSS
  • CSS3动画之DIY Loading动画
  • CSS中这个函数你会用吗？垂直居中都可以设置
  • 巧用 CSS3的webkit-box-reflect 倒影实现各类动效_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3过渡旋转透视2d3d动画等效果的实例代码_css3_CSS

    • CSS3推荐文章

  • 【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究
  • 可视化学习：如何生成简单动画让图形动起来
  • 【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果
  • 【动画进阶】神奇的背景，生化危机4日食 Loading 动画还原
  • 【动画进阶】神奇的 3D 磨砂玻璃透视效果
  • 快速构建页面结构的 3D Visualization
  • 详解CSS3.0(Cascading Style Sheet) 层叠级联样式表_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3实现的侧滑菜单_css3_CSS
  • CSS3常见动画的实现方式_css3_CSS

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号