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

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

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

实现一个div的拖拽效果

实现思路:鼠标按下开始拖拽,记录摁下鼠标时的鼠标位置以及元素位置,拖动鼠标记下当前鼠标的位置,鼠标当前位置-摁下时鼠标位置= 鼠标移动距离

Vue实现吸顶效果

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

css文字选中效果

文字选中效果,这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的,不过可以通过CSS进行设置。::selection定义元素上的伪选择器,以便在选定元素时设置其中文本的样式。

CSS :placeholder-shown伪类实现输入框浮动文字效果

当我们处理输入框时,会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的:label标签是关联表单元素,提供说明信息最适合的元素。输入框的placeholder属性允许您指定没有输入内容时出现在<input>元素内的文本

纯css实现星级评分效果

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

css3 斜切角/斜边的实现方式

设计图含有斜切角的效果时,我们一般想到的方法是切出四个角为背景,然后用border连起来,这样就能显示出该效果了,那么直接使用css呢?下面就整理css做斜边的效果。

css左边竖条的实现方法

问题描述:在只使用一个标签的情况下实现左边竖线。使用border;使用伪元素来实现;内/外阴影;drop-shadow;渐变 linearGradient

canvas实现刮刮卡效果

最近手机应用和网页都有很多类似刮刮卡抽奖效果,所以我花了点时间来写这个特效,单页面实现刮刮卡效果

css实现中间文字,两边横线效果

vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。

js实现拖拽效果

定义全局变量用于接收鼠标坐标的变量,事件的执行函数,事件的执行函数自带参数e。自带参数e注意:div元素要设置定位才可以进行移动。

点击更多...

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