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

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

一般遮罩   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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

js实现放大镜效果

使用电脑逛淘宝,京东等商城时,将鼠标移入图片中,图片会放大,之前一直在想这种是怎么实现的,前两天刚写出来,纯js实现的,无任何工具库。下面先来看下思路吧!刚学js的时候可能对于布局不是很重要

CSS3转换

改变元素在页面中位置,大小,角度以及形状的一种方式:2D转换:只在x轴和y轴上发生转换效果,3D转换:增加了z轴的转换效果

css制作从下往上逐渐显示的div

其中div1是整个容器,div2是需要从下往上显示的div。如果只是改变height高度的话,会导致div从上往下慢慢显示,所以并不能直接设置div2的高度来达成效果,此时我们需要一个遮罩mask来帮助div2达成想要的效果。

CSS如何在页面加载时创建淡入效果?

想要使用CSS在页面加载上创建淡入效果,可以使用css的animation属性或transition属性在页面加载时创建淡入效果。下面就来通过示例来介绍一下。通过2个关键帧来定义CSS动画:一个不透明度设置为0,另一个不透明度设置为1。

多种方式实现吸顶效果

还是前两天的那个唱歌中间页,上线前发现滚动时候体验不好。因为之前没有做吸顶效果,搜索内容然后滚下去,没有找到内容需要再手动划上来。

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

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

css3实现半圆和圆效果

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

Css3实现背景毛玻璃效果

ios里毛玻璃效果的使用非常多,本文介绍一个实现div毛玻璃背景的方法;CSS3的Filter主要用在图像的特效处理上,默认值为none,还有以下备选项:

纯css实现星级评分效果

纯css实现超酷炫的星级评分动画效果,实现思路:5个类型为radio的input,label标签修改样式背景图为星星,label标签给每个星星鼠标停留时加注名字,点击星星有放大旋转的动画

css实现开关效果

我们使用<input type=\\\\\\\"checkbox\\\\\\\">标签来实现这个效果。checkbox的选中、未选中的特性,刚好对应开关的打开、关闭;on:打开 off:关闭;开始画出off、on状态的草图

点击更多...

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