关闭

CSS遮罩效果(模糊效果,阴影效果,毛玻璃效果)

时间: 2018-09-07阅读: 5822标签: 效果

一般遮罩   background : #000;

在body标签的最后加上div标签作为遮罩,如下:

<div class="mask"></div>

css样式:

  1. .mask{
  2. position:fixed;
  3. top : 0;
  4. left : 0;
  5. bottom : 0;
  6. right : 0;
  7. background:#000; /*一般遮罩随便设置一个颜色*/
  8. }

注意:一般遮罩加上透明度opacity就是阴影效果了。

 

阴影效果   background : rgba(0,0,0,0.5);hsla(0,100%,80%,0.5);

代码和一般遮罩一样,唯一不同的是设置.mask遮罩的背景色用rgba()表示,当然hsla()也是可以的。css如下:

  1. .mask{
  2. position:fixed;
  3. top : 0;
  4. left : 0;
  5. bottom : 0;
  6. right : 0;
  7. background:rgba(0,0,0,.5);
  8. /*background:hsla(0,100%,80%,0.5)*/
  9. /*background:#000; opacity:0.5; */
  10. }

CSS 中的颜色可以由RGB色彩空间和HSL色彩空间两种方式来表述。其中我们常用的是RGB色彩空间。

RGB色彩空间的颜色表示方式有:十六进制颜色(如红色:#FF0000)、RGB颜色(如红色:rgb(255,0,0)),RGBA颜色(如半透明的红色rgba(255,0,0,0.5)),此外常见的颜色可以直接写颜色名(如红色:red)。

HSL色彩,是一种工业界的色彩标准,因为它能涵盖到人类视觉所能感知的所有颜色,所以在工业界广泛应用。 HSL色彩空间中,H(Hue):代表色调,S(Saturation):代表饱和度,L(Lightness):代表亮度,(A(Alpha):代表不透明度)。

 

模糊效果(毛玻璃效果)  filter: blur(5px); 

  1. //css定义一个模糊效果类
  2. .blur{
  3. -webkit-filter: blur(5px); /* Chrome, Opera */
  4. -moz-filter: blur(5px);
  5. -ms-filter: blur(5px);
  6. filter: blur(5px);
  7. }
  1. //js 遮罩出现时给遮住对象加模糊效果
  2. if($(".mask").is(":visible")){
  3. $(".context").addClass("blur");
  4. }
  5. else{
  6. $(".context").removeClass("blur");
  7. }

注意:这个是给需要模糊的对象加blur类,而不是遮罩本身。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1061

关闭

JavaScript实现许愿墙效果

初始化自动生成两个愿望签;输入框失去焦点或者按回车键,会生成愿望签;点击关闭会删除愿望签;可以拖动愿望签,并且不能拖出可视窗口

Vue实现吸顶效果

因为项目需求,最近开始转到微信公众号开发,接触到了Vue框架,这个效果的实现虽说是基于Vue框架下实现的,但是同样也可以借鉴到其他地方,原理都是一样的。因为在css中我们可以设置一个元素的position: fixed;

纯CSS3制作3d网红热词盒子

今天给大家分享的是CSS3制作的带3d效果的方块,上面简单整理了一下2019年的网红热词。这个DEMO用到了CSS3的3d变化技巧,做出来的效果还不错。请注意,该3d效果依赖transform-style: preserve-3d属性

HTML Canvas如何实现线性渐变效果?

可以先使用HTML Canvas的线性渐变的函数createLinearGradient()来创建一个渐变色线性对象;然后使用addColorStop()方法定义渐变色颜色;最后将渐变颜色分配给strokeStyle或fillStyle属性进行填充

用CSS新属性实现特殊的图片显示效果

使用一个或多个图像相关的CSS属性(background-blend-mode, mix-blend-mode, or filter)可以实现许多特殊的图片显示效果。本文转载自Bennett Feely的个人网站,文中共列举了20种图片显示效果。

纯css实现彩虹效果

实现思路:使用box-shadow画赤橙黄绿蓝靛紫7个弧形,拼接在一起;after伪元素写投影样式;彩虹和投影都有动画,用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写彩虹的样式

Js实现时钟效果

在JavaScript中,有一个内置对象Date,它重要的一个作用就是实现了时间的时刻更新,通过代码来创造一个实实在在的时间表。

js之切换全屏和退出全屏实现

应用场景:比如很多网页游戏全屏之类的,或者是网上看小说等。核心代码:控制全屏,前端代码:document.exitFullscreen(); document.mozCancelFullScreen(); document.webkitCancelFullScreen();

css3实现半圆和圆效果

在css2中,如果需要失效一些圆角或者半圆等等效果,一般是要通过ps等软件来处理的,在CSS3中,则不需要了,只需要通过border-radius就可以实现,大大方便了开发的效率。

使用CSS实现逼真的水波纹点击效果

虽然webkit具有遮罩的能力(webkit mask),不过webkit虽然强大,但在跨浏览器上总是它的罩门,况且在性能上也是往往会造成困扰(这也是为什么chrome要这么吃资源了),因此撇开webkit不谈,我们该用什么方法,才可以做出水波纹的效果呢?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!