css 文字动画霓虹灯_CSS动画霓虹灯

css 文字动画霓虹灯

The text-shadow property can be used for many purposes in web page design: I’ve demonstrated stroked text, 3D effects, and more. It’s logical to take the multi-shadows aspect of text-shadow even further, into effects like neon glows.

text-shadow属性可以在网页设计中用于许多目的：我已经演示了描边文本 ， 3D效果等。 将text-shadow阴影的多阴影方面进一步带入霓虹发光等效果是合乎逻辑的。

While there are a few lessons of this kind available on the web, most of them use a thick font with a diffuse glow of solid colors. Here we want to simulate a real neon sign, so I will use a thin rounded display font (the appropriately named Neon 80’s by Essqué Productions) and a little more subtlety on the colors.

虽然网上有一些此类课程，但大多数课程使用的是带有浓淡散光的纯色粗字体。 在这里，我们要模拟一个真正的霓虹灯标志，因此我将使用一种薄的圆形显示字体(由EssquéProductions适当地命名为Neon 80's )，并在颜色上稍加精巧。

First I needed to convert the font into webfont formats (via FontSquirrel) and embed it onto the page:

首先，我需要将字体转换为webfont格式(通过FontSquirrel )并将其嵌入到页面中：

@font-face {
	font-family: 'Neon80sRegular';
	src: url('neon-webfont.woff') format('woff'),
         url('neon-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

The HTML is a simple <h1> element with the word “Diner”. The black brick texture behind it is from Photos Public Domain, licensed under Creative Commons. The CSS:

HTML是一个简单的<h1>元素，带有单词“ Diner”。 它后面的黑砖纹理来自“ 照片公共领域” ，由知识共享许可。 CSS：

h1 { 
	background: #000;
	background-image:
		radial-gradient(center, ellipse farthest-corner, rgba(0,0,0,0), rgba(0,0,0,1)), 
		url(/assets/images/black-brick-wall-texture.jpg);
		width: 768px;
		text-align: center;
		font-family: Neon80sRegular, Arial Narrow, sans-serif;
		color: #fee;
		width: 768px;
		padding: 2rem;
		text-transform: uppercase;
		font-size: 6rem;
		letter-spacing: 2rem;
		text-shadow: 0 0 30px rgba(255,0,84,0.6),
			0 0 60px rgba(255,0,84,0.4),
			0 0 100px rgba(255,0,84,0.2),
			0 0 90px rgba(255,0,84,0.1);
}

I’ve used an elliptical gradient in the background of the <h1>, using a similar idea to my advanced CSS photo vignette technique to darken the bricks around the text. (I’ve covered gradients in Webkit-based browsers and Firefox in the code above, with a catch-all at the end; if you were using this in real-life, full CSS vendor support should be present).

我在<h1>的背景中使用了椭圆形渐变 ，使用了与我的高级CSS照片晕影技术类似的想法来加深文本周围的砖块。 (我在上面的代码中介绍了基于Webkit的浏览器和Firefox中的渐变，并在最后进行了全面介绍；如果您在现实中使用它，则应该提供完整的CSS供应商支持 )。

The part that creates the neon glow is the multi-layered text-shadow. Note that none of the applied shadows have any kind of offset (the first two values for each shadow are always left at 0), but they do increase in blurriness (the third value). All of the shadows are the same color, set using rgba, but they decrease in opacity as they grow, approximating the inverse square law that all light obeys and enabling the viewer to glimpse the bricks through the neon glow.

产生霓虹光的部分是多层text-shadow 。 请注意，所应用的阴影都没有任何偏移(每个阴影的前两个值始终保留为0)，但它们的模糊度确实会增加(第三个值)。 所有阴影都是使用rgba设置的相同颜色，但是随着opacity增长，它们的opacity会降低，近似于所有光线都遵循的平方反比定律，并使观看者可以通过霓虹灯瞥见砖块。

If you’re inspired to recreate this effect I’d encourage you take the idea and  experiment with your own values, rather than copying what you see here. It’s also possible to make the neon flicker by using CSS keyframe animation.

如果您受到启发来重现这种效果，我鼓励您采用这种想法并尝试自己的价值观，而不是复制此处看到的内容。 也可以使用CSS关键帧动画使霓虹灯闪烁 。

翻译自: https://thenewcode.com/477/CSS-Animated-Neon-Sign

css 文字动画霓虹灯