关闭

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

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

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

如何用 CSS Animations 实现滑动图片展现文字的效果

在这篇文章中,我希望能带领大家了解一下 CSS animation property ,以及详细地解释我的个人网站 中的一个效果:让文字在移动的物体后出现。如果你想要看最后的成果,这里有一个例子 。

遮罩层镂空效果的多种实现方法

原理:先截一张相同位置的图片,创建一个遮罩层,然后把图片定位在相应的位置上。优点:原理简单;兼容性好,可以兼容到IE6、IE7;可以同时实现镂空多个。

CSS 搞怪的 text-decoration

今天在改一个项目的时候却遇到了一个莫名其妙的属性:text-decoration,这个属性,其实就只是用来把一段文字加上上横线、删除线或底线的属性罢了,通常会用在移除超链接的底线、或一些特殊强调的效果里头

vue 实现文字无缝滚动效果(从下往上滚动)

这种效果需求还是蛮多的,想起之前用JQuery实现的一个无缝滚动( 缅怀过去),是通过jq的animate方法实现的,动画结束之后就将第一个元素appendTo追加到最后面,实现循环滚动特效,不得不感叹技术更新换代真的很快。

ES6前后实现排它的两种写法

排它思想:清除其它所有的没有选中元素的样式, 只设置当前选中元素的样式

jQuery 效果方法summary

定义和用法slideDown() 方法通过使用滑动效果,显示隐藏的被选元素。(被选元素的高度发生变化),该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素

css3实现半圆和圆效果

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

JavaScript实现许愿墙效果

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

一个简易的 LED 数字时钟Js实现方法

这个应该是已经有很多人做过的东西,我应该只是算手痒,想写一下,所以,花了点时间折腾了这个,顺便把 Dark Mode 的处理也加上了

position: sticky实现导航栏下滑吸顶效果

近期开发中遇到导航栏下滑吸顶的需求,经过方案调研,发现position:sticky可以简单快捷的实现功能。sticky(粘贴定位)可以被认为是相对定位和固定定位的混合,元素在跨越特定阀值前为相对定位

点击更多...

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