精华内容
下载资源
问答
  • CSS 发光字体

    2018-03-19 18:52:00
    CSS3字体发光效果 CSS3 并没有直接设置发光效果的属性,但是可以利用 text-shadow 属性实现此效果 text-shadow 该属性为文本添加阴影效果 text-shadow: h-shadow v-shadow blur color; h-shadow: 水平...

    CSS3字体发光效果

    CSS3 并没有直接设置发光效果的属性,但是可以利用 text-shadow 属性实现此效果

    text-shadow

    该属性为文本添加阴影效果

    text-shadow: h-shadow v-shadow blur color;

    h-shadow: 水平阴影的位置(阴影水平偏移量),可为负值,必需

    v-shadow: 垂直阴影的位置(阴影垂直偏移量),可为负值,必需

    blur: 阴影模糊的距离(默认为0),可选

    color: 阴影颜色(默认为当前字体颜色),可选

    乍一看,text-shadow 属性仅仅是用来设置文本阴影的,似乎并不能实现字体发光效果。

    其实不然,这正是 text-shadow 属性的精妙之处。

    当阴影的水平偏移量和垂直偏移量都为0时,阴影就和文本重合了

    这时,如果增大阴影模糊的距离,就可以达到字体外发光的效果了。

    当然,为了使外发光更加酷炫,还需要使用到 text-shadow 的另一个特性: 同时设置多个阴影(使用逗号分隔设置多个阴影)

    代码实例

    HTML Code

    <div class="container">
        <p>xinpureZhu</p>
    </div>

    CSS Code

    body {
        background: #000;
    }
    .container {
        width: 600px;
        margin: 100px auto 0;
    }
    p {
        font-family: 'Audiowide';
        text-align: center;
        color: #00a67c;
        font-size: 7em;
        -webkit-transition: all 1.5s ease;
                transition: all 1.5s ease;
    }
    p:hover {
        color: #fff;
        -webkit-animation: Glow 1.5s ease infinite alternate;
                animation: Glow 1.5s ease infinite alternate;
    
    }
    @-webkit-keyframes Glow {
        from {
            text-shadow: 0 0 10px #fff,
                         0 0 20px #fff,
                         0 0 30px #fff,
                         0 0 40px #00a67c,
                         0 0 70px #00a67c,
                         0 0 80px #00a67c,
                         0 0 100px #00a67c,
                         0 0 150px #00a67c;
        }
        to {
            text-shadow: 0 0 5px #fff,
                         0 0 10px #fff,
                         0 0 15px #fff,
                         0 0 20px #00a67c,
                         0 0 35px #00a67c,
                         0 0 40px #00a67c,
                         0 0 50px #00a67c,
                         0 0 75px #00a67c;
        }
    }
    @keyframes Glow {
        from {
            text-shadow: 0 0 10px #fff,
                         0 0 20px #fff,
                         0 0 30px #fff,
                         0 0 40px #00a67c,
                         0 0 70px #00a67c,
                         0 0 80px #00a67c,
                         0 0 100px #00a67c,
                         0 0 150px #00a67c;
        }
        to {
            text-shadow: 0 0 5px #fff,
                         0 0 10px #fff,
                         0 0 15px #fff,
                         0 0 20px #00a67c,
                         0 0 35px #00a67c,
                         0 0 40px #00a67c,
                         0 0 50px #00a67c,
                         0 0 75px #00a67c;
        }
    }

     

    效果示图

    CSS3字体发光效果

     

    文章转载:https://xinpure.com/the-css3-font-glow-effect/

    转载于:https://www.cnblogs.com/blackfriday/p/8603984.html

    展开全文
  • 让我们看一下使用CSS实现反射的方法,我们还将研究发光和跨浏览器的模糊效果。 假设条件 按照本教程进行操作可遵循多种假设: 您知道您HTML。 您熟悉CSSCSS2选择器。 如果您想精确地重新创建示例,则...

    css 发光

    反射可以为对象增加一个有趣的维度,给人一种真实感,并为它们提供周围环境的上下文。 让我们看一下如何使用CSS实现反射,我们还将研究发光和跨浏览器的模糊效果。


    假设条件

    按照本教程进行操作可遵循多种假设:

    • 您知道您HTML。
    • 您熟悉CSS和CSS2选择器。
    • 如果您想精确地重新创建示例,则应了解box-shadow工作方式。 这不是本教程的关键,因此您需要自己弄清楚。 如果您需要解释,建议您看看CSS3与Photoshop:圆角和盒子阴影

    盒子反射与“我的方法”

    Box-reflect是CSS属性,正是出于这个目的:进行反射。 我们将不使用box-reflectmask-image ,因为:

    • 在撰写本文时,这两个属性仅受webkit支持(Chrome和Safari)。
    • 至少可以说,该实现存在很多问题。

    当微软推出其滤镜效果时(例如IE 4时代,嵌套表用于布局,图像用于反射),肮脏的滤镜不适用于任何给定的元素。 我的猜测是,他们从元素的左上角到右下角使用了某种边界框,这是有道理的,因为据我所知,没有办法超越此框。 但是,他们从未纠正过它。

    现在,在Chrome 17时代,webkit犯了同样的错误。 遮罩图像是-webkit-box-reflect的关键,它会在边界框中创建某种动态快照,然后将其粘贴到下面并更改其不透明度。 我试图使用-webkit-box-reflect重新创建演示:

    顽皮的思考...

    我还没有完成,但是问题很明显。 ETBR具有border-radiusbox-shadow 框阴影在边界框内可见,但在边界框外不可见。

    在我的方法矩阵转换中,插入框阴影和不透明度将替换框反射和蒙版图像。 局限性:

    • 最大的限制是,内嵌的阴影框不能使反射完全透明。 它是真实和虚假透明性的结合,将在大多数情况下有效,但并非总是如此。
    • ETBR中的文本不受插入框阴影的影响。 如果文本的颜色与表面的背景颜色不同,则会发生这种情况。

    小提琴 | 全屏

    文字颜色不会在背景处变暗。 因此,似乎您不能同时使用其他颜色矩形阴影。


    选择…

    当我们讨论矩阵和反射的主题时..

    很棒的思考...

    您服用蓝色药丸–我向您展示如何重新创建演示单词。 您服用红色药丸-我将向您展示如何对任何事物进行反射,并告诉您在哪里可以以非常有趣的价格购买这些反射阴影。

    简单地说; 以下某些步骤是可选的,具体取决于您是否要为像素重新创建演示像素。


    可选:准备

    该演示以HTML5模板开始...

    index.html

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    		<title>CSS3 Reflections</title>
    		<meta name="description" content="Reflection..." />
    		<meta name="author" content="Bob de Ruiter" />
    		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
    		<link rel="shortcut icon" href="/favicon.ico" />
    		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    	</head>
        <body>
    	</body>
    </html>

    ...以及这个CSS文件。

    style.css

    html {
    	height: 100%;
    }
    body {
    	text-align: center;
    	line-height: 1;
    	margin: 0;
    	padding: 0;
    	height: 100%;
    }
    p {
    	line-height: 1.2;
    }

    并且,当然,我们将添加一个指向样式表的链接:

    <head>
    		<meta charset="utf-8" />
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    		<title>CSS reflections!</title>
    		<meta name="description" content="" />
    		<meta name="author" content="Bob" />
    		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
    		
    		<link rel="stylesheet" href="style.css" />
    		
    		<link rel="shortcut icon" href="/favicon.ico" />
    		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    	</head>

    2D,但3D

    该演示是2D的。 不是单个3D元素。 我们知道这一点,但是我们的目标是让他们认为我们建立了这个,然后拍摄了前视图。

    3D反射...

    如果我们希望他们相信3D,则应该确定对象在3D空间中的放置和旋转方式。 演示有一个视野。 前10%为黑色“天空”,其余90%为假3D平面。 要反射的元素(此后在我们的演示中称为ETBR )与平面彼此垂直(角度为90°),反射要与ETBR平行。


    步骤1:可选的飞机和ETBR

    HTML:

    <body>  
    	<div id="plane">
    		<header><span id="ETBR">reflection</span></header>
    	</div>
    </body>

    ETBR是飞机的孩子。 这样,它保持在从平面看的相同位置,并且辉光停留在平面中。

    body {
    	text-align: center;
    	line-height: 1;
    	margin: 0;
    	padding: 0;
    	background-color: #000;
    	height: 100%;
    }
    p {
    	line-height: 1.2;
    }
    #plane {
    	left: 0;
    	top: 10%;
    	width: 100%;
    	bottom: 0;
    	min-width: 1080px;
    	min-height: 600px;
    	position: absolute;
    	overflow: hidden;
    	overflow-x: visible;
    }

    注意:

    • 该平面具有最小宽度和最小高度,因此ETBR始终可见。
    • 溢出y设置为隐藏,因此ETBR的辉光停留在平面中。 (天空必须是黑色的。)
    • 飞机没有背景色,但会从发光中获取颜色,这在任何级别上都没有意义,但看起来是最好的。

    步骤2:反射标记

    找到对象(ETBR),将其复制,粘贴到自身中,然后将其重命名为refl(ection):

    <span id="ETBR">reflection<span id="refl">reflection</span></span>

    现在,在css中创建对象的选择器。 将#refl添加到选择器,以便将我们的样式应用于这两个元素:

    #ETBR, #refl {
    	
    }

    基本上,反射CSS和HTML必须与ETBRCSS和HTML相同。 我们将定位,镜像和整理第5步中的反射。但是,暂时,我们将隐藏该反射。

    #ETBR, #refl {
    	
    }
    #refl {
    	display: none;
    }

    Internet Explorer是Internet Explorer,我们必须添加一些条件HTML:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    		<title>CSS3 Reflections</title>
    		<meta name="description" content="Reflection..." />
    		<meta name="author" content="Bob de Ruiter" />
    		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
    		
    		<link rel="stylesheet" href="style.css" />
    		
    		<link rel="shortcut icon" href="/favicon.ico" />
    		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    	</head>
    	<!--[if lt IE 9 ]> <body class="oldie"> <![endif]-->
    	<!--[if IE 9 ]> <body class="ie9"> <![endif]-->	
    	<!--[if (gt IE 9)|!(IE)]><!--> <body class="modern"> <!--<![endif]-->   
    		<div id="plane">
    			<header><span id="ETBR">reflection<span id="refl">reflection</span></span></header>
    		</div>
    	</body>
    </html>

    您可能想知道为什么,只是跟我裸露。 因为您在住院,所以第一个小提琴将完全变成黑色。 您是否想看看飞机的影响? 调整大小。

    小提琴 | 全屏


    步骤3:可选的基本样式

    这不需要解释:

    #ETBR, #refl {
    	color: #004;
    	
    	font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
    	text-transform: uppercase;
    	font-size: 200px;
    	background-color: #FFE;
    	font-weight: bold;
    	padding: 30px;
    	display: inline-block;
    }
    #refl {
    	display: none;
    }

    好,稍作解释。 text-align: center;的组合text-align: center; display: inline-block; 使元素古板居中 ,但这不是圣杯; 内联项不能包含阻止项。 我使用了它,因为我不想为该示例添加数千个浮动容器。 通常, 是要走的路。

    小提琴 | 全屏


    步骤4:可选的圆角和发光

    辉光由三个阴影组成:大的拉伸阴影(看起来更像是平面上的光的反射),真实的辉光(模糊范围更短的白色阴影)和黑色镶嵌阴影(使ETBR看起来像在发光)。 正如我之前提到的,这些天我将不解释盒子阴影如何工作以及边界半径如何说话。

    #ETBR, #refl {
    	color: #004;
    	
    	font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
    	text-transform: uppercase;
    	font-size: 200px;
    	background-color: #FFE;
    	font-weight: bold;
    	padding: 30px;
    	display: inline-block;
    	
    	box-shadow: rgba(255,255,240,.2) 0 0 200px 100px, rgba(255,255,240,.3) 0 0 40px, inset rgba(0,0,0,.8) 0 0 20px;
    	border-radius: 30px;
    }

    小提琴 | 全屏


    步骤5:反射定位

    清空#refl选择器,使反射可见。 由于反射不是“真实的”,因此我们的反射不会成为文档流的一部分。 它应该浮动。 显而易见的选择是将位置设置为绝对位置,这意味着该元素相对于其第一个定位(非静态)祖先元素进行了定位。 由于没有反射的第一个定位祖先,因此它将相对于主体标签定位。

    相对于真实文本放置反射要容易得多,这也是反射的祖先(巧合?)。 为此,我们首先必须“定位” ETBR:

    #ETBR, #refl {
    	color: #004;
    	
    	font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
    	text-transform: uppercase;
    	font-size: 200px;
    	background-color: #FFE;
    	font-weight: bold;
    	padding: 30px;
    	display: inline-block;
    	
    	box-shadow: rgba(255,255,240,.2) 0 0 200px 100px, rgba(255,255,240,.3) 0 0 40px, inset rgba(0,0,0,.8) 0 0 20px;
    	border-radius: 30px;
    	
    	position: relative;
    }

    这实际上并不会改变位置,但是会定位。 现在:

    #refl {
    	position: absolute;
    	
    	top: 100%;
    	left: 0;
    }

    反射的顶部相对于ETBR的高度和位置。 0%将给它们相同的顶部,200%将留下与ETBR高度一样大的间隙,100%将反射的顶部放在ETBR的底部。 左是相同的,但是占宽度的百分比。

    小提琴 | 全屏


    第6步:现代镜像,模糊和透明度

    从IE6到Google Chrome,几乎每种常用的浏览器都具有这些功能。 但是,实现方式有所不同。 现代浏览器非常简单明了,每种功能都有一个特性:变换,模糊和不透明。 我们也将使用box-shadow,但首先进行镜像。

    镜射

    #refl {
    	position: absolute;
    	
    	top: 100%;
    	left: 0;
    	
    	-moz-transform: scaleY(-1);
    	-webkit-transform: scaleY(-1);
    	-ms-transform: scaleY(-1);
    }

    通过转换,我们可以将元素修改为您可以想象的每个平行四边形。 我知道很多平行四边形。 但是我们只需要镜像反射,因此我们将不使用大多数变换函数。

    任何设计人员都应该知道在Y轴上按-1缩放与镜像相同。 Y轴上的缩放比例是顶部(和底部)与中心之间的距离乘以。 如果我们在Y轴上按2比例缩放,则顶部到中心的距离将是原来的两倍。 如果按-1缩放,则距离将相同,但是top是底部所在的位置,bottom是顶部所在的位置。 恭喜,您知道如何镜像!

    模糊

    所有现代的浏览器都将很快支持过滤器-webkit-filter或SVG过滤器。 FF,Opera和IE10已经支持后者,而Safari和Chrome只是在发布之前建立了张力。 SVG滤镜之一是良好的旧高斯模糊。 它很慢,但是有点...

    在style.css所在的文件夹中创建文件“ filter.svg”。 其内容:

    <?xml version="1.0" standalone="no"?>
    <svg width="1" height="1" version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <filter id="blur">
          <feGaussianBlur in="SourceGraphic" stdDeviation="2 3" />
        </filter>
      </defs>
    </svg>

    除规则6至8以外的形式。称为“模糊”的过滤器(您可以称其为“任意”)会水平模糊2个像素,垂直模糊3个像素。 回到样式表!

    #refl {
    	position: absolute;
    	
    	top: 100%;
    	left: 0;
    	
    	-moz-transform: scaleY(-1);
    	-webkit-transform: scaleY(-1);
    	-ms-transform: scaleY(-1);
    	
    	filter: url(filter.svg#blur); /* FF, IE10 & Opera */
    	-webkit-filter: blur(2px);
    }

    filter.svg#blur表示filter.svg#blur的元素“ blur”。 如果过滤器的ID为“ anything”,则网址为filter.svg#anything 模糊半径在SVG文件中定义。 Webkit浏览器将所有这些都放在一条规则中。

    透明度

    透明度已经更长了,因此我们只需要指定一个属性即可:

    #refl {
    	position: absolute;
    	
    	top: 100%;
    	left: 0;
    	
    	-moz-transform: scaleY(-1);
    	-webkit-transform: scaleY(-1);
    	-ms-transform: scaleY(-1);
    	
    	filter: url(filter.svg#blur); /* FF, IE10 & Opera */
    	-webkit-filter: blur(2px);
    	
    	opacity: .25;
    }

    我无法将SVG文件放在小提琴中。 (我必须以身作则,以免混淆语义和表示。总之会使事情变得更复杂...)但是我并没有使SVG模糊化……

    小提琴 | 全屏

    还不完整 苹果在第三天创建反射时,原本打算减少反射。 远离表面的反射应该不太清晰。 让那里黑暗!

    这仅在表面具有纯色且字体颜色与此颜色相似时才起作用:我们将通过添加另一个框阴影来使其变暗。 此框阴影将覆盖#ETBR, #refl选择器中的旧阴影。 我们将通过重新声明旧选择器的插入阴影来解决此问题。 第二个阴影是新阴影。 记住,我们添加到反射中的每个阴影都是镜像的。

    #refl {
    	position: absolute;
    	
    	top: 100%;
    	left: 0;
    	
    	-moz-transform: scaleY(-1);
    	-webkit-transform: scaleY(-1);
    	-ms-transform: scaleY(-1);
    	
    	filter: url(filter.svg#blur); /* FF, Opera + IE10*/
    	-webkit-filter: blur(2px); /* webkit */
    	
    	opacity: .25;
    	
    	box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px; /* first shadow is old */
    }

    第二个阴影的OffsetY为50像素,但是在应用阴影 ,该元素始终是镜像的。 阴影不会向下移动,而是向上移动。

    看看这个:

    小提琴 | 全屏

    大! 现在,用IE8来看看它(或者说我的话):基本上是ETBR的两个副本,它们不是镜像,透明或模糊的。


    步骤7:肮脏的过滤

    开始时我们添加了一些条件注释。 三组。

    • 现代的浏览器和IE10不支持旧的IE过滤器(已放弃IE10的支持),但确实支持新的IE过滤器。
    • IE8及更低版本的旧IE支持肮脏的过滤器,不支持新的过滤器。
    • IE9,两者都支持一点点。

    如果IE9不支持新的东西,那就容易多了。 (不要误会我的意思,我很高兴Internet Explorer尝试进行更改。但这会更容易...。)并且使其变得更加复杂,IE9和IE8中的肮脏过滤器之间也存在差异。 抱怨够了,让我们来做些什么。 为每个组添加一个#refl选择器,并将opacity属性移动到modern。

    #refl {
    	position: absolute;
    	
    	top: 100%;
    	left: 0;
    	
    	-moz-transform: scaleY(-1);
    	-webkit-transform: scaleY(-1);
    	-ms-transform: scaleY(-1);
    	
    	filter: url(filter.svg#blur); /* FF, Opera + IE10*/
    	-webkit-filter: blur(2px); /* webkit */
    	
    	box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px;
    }
    .modern #refl {
    	opacity: .25;
    }
    .ie9 #refl {
    	
    }
    .oldie #refl {
    	
    }

    肮脏的过滤器不喜欢CSS2不透明度。 说到肮脏的过滤器,我们将使用这些过滤器:

    • DXImageTransform.Microsoft.BasicImage使我们能够镜像图像并更改其不透明度
    • DXImageTransform.Microsoft.MotionBlurDXImageTransform.Microsoft.MotionBlur很棒。
    • DXImageTransform.Microsoft.Gradient替代第二个盒子阴影。

    镜射

    第一个过滤器BasicImage实际上具有“ mirror”属性! 是! 不幸的是,将此属性设置为1会在水平而非垂直方向上镜像内容。 但这并不意味着它对我们没有用。 将元素旋转180°并水平镜像与垂直镜像相同。 这是可能的:

    .oldie #refl {
    	filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2);
    }

    此旋转的度数不是:0是0°,1是90°,2是180°,而3是270°。 只有老歌需要这个。 IE9支持-ms-transform

    不透明度

    我们可以在同一过滤器中指定不透明度...

    .ie9 #refl {
    	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25);"
    }
    .oldie #refl {
    	filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2,  opacity=.35);
    }

    IE9(和IE8,但我认为Internet Explorer已经引起足够的重视)支持-ms-filter。 该值是一个大字符串。 这会引起其他浏览器的理解(由于Internet Explorer,Firefox每个星期五都会去看心理医生)。

    模糊

    ...但是我们需要一个用于模糊的新滤镜。 多个过滤器,如果我们想使其看起来更好。 没有逗号,没有filter:过滤器之间只有一个空格或一个新行。 -ms-filter不再换行...

    .ie9 #refl {
    	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
    }
    .oldie #refl {
    	filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35)
    	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false')
    	progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0)
    	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');
    }

    如果我们以6像素的半径对其进行一次模糊处理,则好像有人拍摄了4个反射副本,并在上方移动了6个像素,在下方移动了6个像素,向左移动了6个像素,向右移动了6个像素。 如果要在酒吧炫耀,您应该知道名称:Box Blur。 添加迭代(对模糊对象进行模糊处理)会使“盒子模糊”看起来像普通的模糊。 第二个迭代是运动模糊,因为它看起来不错。

    小提琴 | 全屏

    这次,不是一回事,而是两件事是错误的:

    1. 模糊在IE9中将反射向上和向右移动了几个像素,但在IE8中,它将反射向下移动了。 为什么? 这是一个谜。
    2. 在IE7和IE8中,反射到处都是透明的。

    首先要解决的第二个问题:由于旧版本不支持盒阴影,因此我们将使用肮脏的alpha渐变作为替换。 据我所知,这些是CSS中的第一个类似RGBA的值,但是如果w3c规范在那个时候完全说不出rgba值的话,Internet Explorer不会听。 他们使用8个十六进制位代替6。前两个代表字母。 肮脏的渐变采用ARGB而不是RGBA,我必须承认,这听起来要好得多:

    .ie9 #refl {
    	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
    }
    .oldie #refl {
    	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#99000000, endColorstr=#00000000)
    	progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35)
    	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false')
    	progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0)
    	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');
    }

    渐变也必须模糊,所以首先。 默认情况下,污秽过滤器梯度是垂直的。 startColorstr是在顶部和渐变色startColorstr的颜色在底部,但它的镜像! #99000000与rgba(0,0,0,153)相同。 请记住:设置渐变的不透明度越高,反射的不透明度似乎越低。

    定位只是反复试验的问题。 由于反射已经以百分比设置了位置,因此无法使用left和top属性将其调整到像素内。 相反,我们将使用margin:

    .ie9 #refl {
    	margin-top: 20px;
    	margin-left: -10px;
    	
    	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
    }
    .oldie #refl {
    	margin-top: -20px;
    	margin-left: -7px;
    	
    	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#99000000, endColorstr=#00000000)
    	progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35)
    	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false')
    	progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0)
    	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');
    }

    小提琴 | 全屏


    步骤8:完成修饰

    在您花一些时间做一些更好的事情之前,我们将做两件事,例如在youtube上打喷嚏的熊猫

    • 将反射放置在ETBR之外(在z空间中),因为模糊的反射位于ETBR上方和辉光上方。
    • 向下移动ETBR。 ETBR的顶部与地平线完美对齐,这看起来很奇怪。

    解决方案:

    • 通常,我们将ETBR和反射的z-index分别设置为2和1。但是由于在此演示中,反射中没有其他元素(同样在z空间中),因此我们可以简单地将z-反射的索引为-1。
    • 在平面的顶部添加填充。 由于ETBR是飞机的子代,它将向下移动。

    这是CSS文件。 最后的更改突出显示:

    style.css

    html {
    	height: 100%;
    }
    body {
    	text-align: center;
    	line-height: 1;
    	margin: 0;
    	padding: 0;
    	background-color: #000;
    	height: 100%;
    }
    p {
    	line-height: 1.2;
    }
    #plane {
    	padding-top: 5%;
    	
    	left: 0;
    	top: 10%;
    	width: 100%;
    	bottom: 0;
    	min-width: 1080px;
    	min-height: 600px;
    	position: absolute;
    	overflow: hidden;
    	overflow-x: visible;
    }
    #ETBR, #refl {
    	color: #004;
    	
    	font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
    	text-transform: uppercase;
    	font-size: 200px;
    	background-color: #FFE;
    	font-weight: bold;
    	padding: 30px;
    	display: inline-block;
    	
    	box-shadow: rgba(255,255,240,.2) 0 0 200px 100px, rgba(255,255,240,.3) 0 0 40px, inset rgba(0,0,0,.8) 0 0 20px;
    	border-radius: 30px;
    	
    	position: relative;
    }
    #refl {
    	position: absolute;
    	z-index: -1;
    	
    	top: 100%;
    	left: 0;
    	
    	-moz-transform: scaleY(-1);
    	-webkit-transform: scaleY(-1);
    	-ms-transform: scaleY(-1);
    	
    	filter: url(filter.svg#blur); /* FF, Opera + IE10*/
    	-webkit-filter: blur(2px); /* webkit */
    	
    	box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px;
    }
    .modern #refl {
    	opacity: .25;
    }
    .ie9 #refl {
    	margin-top: 20px;
    	margin-left: -10px;
    	
    	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
    }
    .oldie #refl {
    	margin-top: -20px;
    	margin-left: -7px;
    	
    	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#99000000, endColorstr=#00000000)
    	progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35)
    	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false')
    	progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0)
    	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');
    }

    index.html

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    		<title>CSS3 Reflections</title>
    		<meta name="description" content="Reflection..." />
    		<meta name="author" content="Bob de Ruiter" />
    		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
    		
    		<link rel="stylesheet" href="style.css" />
    		
    		<link rel="shortcut icon" href="/favicon.ico" />
    		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    	</head>
    	<!--[if lt IE 9 ]> <body class="oldie"> <![endif]-->
    	<!--[if IE 9 ]> <body class="ie9"> <![endif]-->	
    	<!--[if (gt IE 9)|!(IE)]><!--> <body class="modern"> <!--<![endif]-->   
    		<div id="plane">
    			<header><span id="ETBR">reflection<span id="refl">reflection</span></span></header>
    		</div>
    	</body>
    </html>

    filter.svg

    <?xml version="1.0" standalone="no"?>
    <svg width="1" height="1" version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <filter id="blur">
          <feGaussianBlur in="SourceGraphic" stdDeviation="2 3" />
        </filter>
      </defs>
    </svg>

    结论

    就这样! 这是最后的小提琴没有 SVG滤镜模糊。

    小提琴 | 全屏

    另外,这是使用此技术的纯CSS(背景中的星号除外) Mac Dock

    我希望您喜欢本教程,也希望您学到新知识。 随时在评论中留下任何问题!

    翻译自: https://webdesign.tutsplus.com/tutorials/cross-browser-css-reflections-glows-and-blurs--webdesign-6294

    css 发光

    展开全文
  • CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知识。如右图,想要获得这样的文本框其实一点也不难的。 需要注意...
    7,166 次阅读  ‹ NSH Blog 网页设计
    CSS发光边框文本框效果
    
    或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知识。如右图,想要获得这样的文本框其实一点也不难的。
    
    需要注意的是,这并不是单纯的box-shadow属性而已,它的发光是像四周均匀发光,它还包含一个缓慢发光过渡效果。
    
    下面就给大家介绍如何创造出这样别致的文本框。
    
    指引 / 跳至 [收缩]
    1 了解CSS3的Shadow、Transition属性
    2 制作发光边框文本框效果
    3 为全局所有input组件添加边框发光效果
    了解CSS3的Shadow、Transition属性
    在继续学习之前,你必须要有一些Css3的基础知识。做出这一切需要你了解CSS3的Shadow和RGBa、Transition属性,否则就无法理解了。
    
    另外,这种CSS制作的发光效果并不适合于所有浏览器,你可以到这里去了解一下浏览器的支持情况。
    
    制作发光边框文本框效果
    
    首先,拿一个input元素举例:
    
    <input type="text" class="sdw" />
    
    现在我们要让这个input组件在被成为焦点(点击)时向四周发光,并且为粉色,我只需添加一段CSS代码:
    
    .sdw:focus{
    
     transition:border linear .2s,box-shadow linear .5s;
     -moz-transition:border linear .2s,-moz-box-shadow linear .5s;
     -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
     outline:none;border-color:rgba(241,39,242,.75);
     box-shadow:0 0 8px rgba(241,39,232,.5);
     -moz-box-shadow:0 0 8px rgba(241,39,232,.5);
     -webkit-box-shadow:0 0 8px rgba(241,39,232,3);
    }
    
    就可以了。其中靛蓝色部分的文字是利用了Transition属性产生一个过渡效果,而其中的RGB色彩可以根据个人口味进行改变。预览效果如下:
    
    
    点击看看,是不是出现了闪光的效果呢?
    
    为全局所有input组件添加边框发光效果
    如果希望一个网页中所有的文字输入框出现这种效果,只需CSS全局设定即可。
    
    在你的CSS文件中添加这么一句:
    
    input[type=text]:focus,input[type=password]:focus,textarea:focus{
    
     transition:border linear .2s,box-shadow linear .5s;
     -moz-transition:border linear .2s,-moz-box-shadow linear .5s;
     -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
     outline:none;border-color:rgba(241,39,242,.75);
     box-shadow:0 0 8px rgba(241,39,232,.5);
     -moz-box-shadow:0 0 8px rgba(241,39,232,.5);
     -webkit-box-shadow:0 0 8px rgba(241,39,232,3);
    现在你也可以拥有类似Twitter的那样发光文本框效果。
    
    谢谢收看。
    
    参考资料:
    
    几个高级CSS属性技巧美化网站显示、CSS Transition (变换动画)、CSS实现模拟漫画气泡对话效果

     

    转载于:https://www.cnblogs.com/ganler1988/p/3259417.html

    展开全文
  • css发光动画

    2019-10-08 10:24:08
    <style type="text/css"> .Twinkle { animation: mytwinkle 1s infinite; -moz-animation: mytwinkle 1s infinite; -webkit-animation: mytwinkle 1s infinite; -o-animation: mytwinkle 1s infinite; } ...

    <!DOCTYPE html>
    <html>
     
    <head>
    <meta charset="UTF-8">
        <title>横向滑动</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
         .Twinkle {
    	  animation: mytwinkle 1s infinite;
    	  -moz-animation: mytwinkle 1s infinite;
    	  -webkit-animation: mytwinkle 1s infinite;
    	  -o-animation: mytwinkle 1s infinite;
    	}
    	
    	@keyframes mytwinkle
    	{
    	0% {box-shadow:0 0 5px 0px #FF4500;}
    	25% {box-shadow:0 0 15px 2px #FF4500;}
    	50% {box-shadow:0 0 25px 10px #FF4500;}
    	75% {box-shadow:0 0 15px 2px #FF4500;}
    	100% {box-shadow:0 0 5px 0px #FF4500;}
    	}
    	
    	@-moz-keyframes mytwinkle /* Firefox */
    	{
    	0% {box-shadow:0 0 5px 0px #FF4500;}
    	25% {box-shadow:0 0 15px 2px #FF4500;}
    	50% {box-shadow:0 0 25px 10px #FF4500;}
    	75% {box-shadow:0 0 15px 2px #FF4500;}
    	100% {box-shadow:0 0 5px 0px #FF4500;}
    	}
    	
    	
    	@-webkit-keyframes mytwinkle /* Safari and Chrome */
    	{
    	0% {box-shadow:0 0 5px 0px #FF4500;}
    	25% {box-shadow:0 0 15px 2px #FF4500;}
    	50% {box-shadow:0 0 25px 10px #FF4500;}
    	75% {box-shadow:0 0 15px 2px #FF4500;}
    	100% {box-shadow:0 0 5px 0px #FF4500;}
    	}
    	
    	@-o-keyframes mytwinkle /* Opera */
    	{
    	0% {box-shadow:0 0 5px 0px #FF4500;}
    	25% {box-shadow:0 0 15px 2px #FF4500;}
    	50% {box-shadow:0 0 25px 10px #FF4500;}
    	75% {box-shadow:0 0 15px 2px #FF4500;}
    	100% {box-shadow:0 0 5px 0px #FF4500;}
    	} 
    	</style>
    </head>
    <body>
    <div class="Twinkle" style="width: 200px;">
     123
    </div>
    
    </body>
    </html> 

    <!DOCTYPE html>
    <html>
     
    <head>
    <meta charset="UTF-8">
        <title>横向滑动</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
    	.radius{
        width: 100px;
        height: 100px;
        margin: 100px auto;
        border-radius: 50%;
        text-align: center;
        color: #fff;
        background-color: red;
        position: relative;
    }
    .animate-radius{
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0;
        border-radius: 50%;
        background-color: #ff8533;
        animation:radius 1.5s ease-out infinite forwards;
        -webkit-animation: radius 1.5s ease-out infinite forwards;
        -moz-animation:radius 1.5s ease-out infinite forwards;
        -ms-animation:radius 1.5s ease-out infinite forwards;
    }
    @keyframes radius {
        0%{  transform: scale(1,1);
            -webkit-transform:scale(1,1) ;
            -moz-transform:scale(1,1) ;
            -ms-transform:scale(1,1) ;
            opacity: 0.6;
            }
        50%{
            transform: scale(1.4,1.4);
            -webkit-transform:scale(1.4,1.4) ;
            -moz-transform:scale(1.4,1.4) ;
            -ms-transform:scale(1.4,1.4) ;
            opacity: 0;
        }
    }
    @-webkit-keyframes radius {
        0%{
            transform: scale(1,1);
            -webkit-transform:scale(1,1) ;
            -moz-transform:scale(1,1) ;
            -ms-transform:scale(1,1) ;
            opacity: 0.6;
        }
        100%{
            transform: scale(1.4,1.4);
            -webkit-transform:scale(1.4,1.4) ;
            -moz-transform:scale(1.4,1.4) ;
            -ms-transform:scale(1.4,1.4) ;
            opacity: 0;
        }
    }
    @-moz-keyframes radius {
        0%{  transform: scale(1,1);
            -webkit-transform:scale(1,1) ;
            -moz-transform:scale(1,1) ;
            -ms-transform:scale(1,1) ;
            opacity: 0.6;
        }
        50%{
            transform: scale(1.4,1.4);
            -webkit-transform:scale(1.4,1.4) ;
            -moz-transform:scale(1.4,1.4) ;
            -ms-transform:scale(1.4,1.4) ;
            opacity: 0;
        }
    }
    @-ms-keyframes radius {
        0%{  transform: scale(1,1);
            -webkit-transform:scale(1,1) ;
            -moz-transform:scale(1,1) ;
            -ms-transform:scale(1,1) ;
            opacity: 0.6;
        }
        50%{
            transform: scale(1.4,1.4);
            -webkit-transform:scale(1.4,1.4) ;
            -moz-transform:scale(1.4,1.4) ;
            -ms-transform:scale(1.4,1.4) ;
            opacity: 0;
        }
    }
    
        </style>
    </head>
    <body>
    <div class="radius">
        <span class="animate-radius"></span>
        888
    </div>
    </body>
    </html> 

     

    展开全文
  • css 发光样式

    2017-08-17 14:11:00
    结果: ...css/style1.css: /*setup*/ *{ margin: 0; padding: 0; } @font-face { font-family: 'Monoton'; font-style: normal; font-weight: 400; src: local('Mo...
  • 很酷的CSS发光按钮实现方法用CSS3实现的发光按钮效果,虽然只能在safari 4和chrome中才能看到最终效果,但我们还是能享受到css3带给我们的美好憧憬。对每一个按钮,所作的只需三件事:定义动画的名字;定义动画的...
  • css 发光字效果

    2016-09-24 21:16:00
    <!DOCTYPE html> <... <...-- 超酷炫的CSS3发光字体,可自定义喔!!--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>[CSS3] Neon Glow - Co...
  • 锦上添花
  • CSS 发光文本悬停效果

    2020-08-07 22:21:53
    效果图 HTML部分 <html lang="en"> <head> <meta charset="UTF-8"> , initial-scale=1.0"> <title>Documenttitle> <link rel="stylesheet" href="style.css"> head> <body> <h2><span>Visualspan><span>Studiospan>...
  • 查看效果:CSS3发光渐变加载器环动画效果下载源码:叁贰壹/CSS 发光渐变加载动画 纯 CSS 实现发光渐变加载动画https://www.zhihu.com/video/1244214628710031360源码分析:(1)只有一个盒子,其 class = "loader";...
  • css3 发光效果

    千次阅读 2019-02-15 18:38:18
    css3模拟发光的效果
  • css文字发光

    2020-09-06 22:05:39
    续期办公地址凭证的pdf生成 } 我是发光/边框的文字
  • 表单编辑框点击后发出红光 <!DOCTYPE html><html> <head>...meta charset="UTF-8">...发光输入框<...style type="text/css"> input{width: 280px;height: 30px;} textarea{...
  • CSS3发光登录表单

    2019-08-23 17:15:03
    我们见过很多CSS3表单,制作都非常精美,今天介绍的这款CSS3表单不但外观华丽,而且伴有颜色发光动画。当鼠标激活表单时,表单周围就会出现颜色渐变的发光动画,配合黑色的背景,整个CSS3表单显得格外亮丽。更重要的...
  • css3发光搜索表单分享

    2020-09-25 03:35:14
    是一款CSS3发光搜索表单,利用CSS3的glow属性,设置0%和100%时的颜色样式,让其渐变,再配合有明显对比的背景,就能模拟出发光的效果了,下面是详细代码讲解加下载地址
  • css 边缘闪光_css3发光

    2020-12-22 20:03:08
    图解css3:核心技术与案例实战. 1.4 CSS3的现状及未来1.4 CSS3的现状及未来了解到使用CSS3会带来很多好处,哪些网站在使用CSS3?这很容易,打开计算机随处可见。既然这样,就一起来看几个网站吧。1.4.1 谁在使用...
  • CSS3发光按钮特效代码

    2020-06-12 00:33:49
    CSS3 Animation属性发光按钮代码,不兼容Firefox浏览器。
  • 一款纯CSS3实现可爱的发光流星CSS3动画效果特效代码。
  • CSS3 发光边框

    2019-04-26 01:19:54
    NULL 博文链接:https://onestopweb.iteye.com/blog/2367136
  • CSS发光字体

    2019-11-16 11:33:18
    CSS中有一种字体阴影的功能text-shadow可以对字体文字添加阴影。text-shadow共有4个属性: 可以通过多个阴阳颜色叠加产型文字光晕的效果 <!DOCTYPE html> <html lang="en"> <head> <meta...
  • CSS 文字的发光效果通过 text-shadow 实现起来很方便的。text-shadow: 1px 0 1px #8B4513, 0 1px 1px #8B4513,0 -1px 1px #8B4513, -1px 0 1px #8B4513;在 Firefox, Chrome, Opera, Safari 中的效果:看上去这几款...
  • 鼠标悬停css3发光效果特效是一款纯css3实现图片发光动画特效代码。
  • 今天我们要分享一款与众不同的CSS3 Loading动画效果,它是由几个不同的动画效果组合而成的,像文字打印效果、发光效果、飞入飞出效果,这几种效果都非常酷。另外我们可以再回顾一下其他的CSS3 Loading效果:...
  • CSS边框发光

    2015-11-01 15:44:45
    input[type=text]:focus,input[type=password]:focus,textarea:focus,textarea:hover,input:hover{ transition:border linear .2s,box-shadow linear .5s; -moz-transition:border linear .2s,-moz-box-shadow linea
  • css3发光 在我以前CSS3文章中,我们使用阴影和透明的文本颜色创建了模糊的文本 。 今天,我们将使用类似的技术来创建动画发光链接。 文本阴影是通用CSS3属性,所有不带供应商前缀的浏览器都支持。 除了一个。 抱歉...
  • 鼠标悬停css3发光效果特效是一款纯css3实现图片发光动画特效代码。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 761
精华内容 304
关键字:

css发光