霓虹灯条 css_使用CSS创建闪烁的霓虹灯条

霓虹灯条 css

Demonstrating a neon tubing typographic effect to my 1^st year students last week, I realized that I had neglected to animate it as promised… so here it is.

演示霓虹灯管的排版效果上周我的第¹年的学生，我意识到，我忽略了它的动画如许......所以在这儿呢。

The base code of this example is very similar to the previous article: an embedded font, use of text-shadow, and a background-image:

此示例的基本代码与上一篇文章非常相似： 嵌入式字体 ， text-shadow使用和background-image ：

h1#neon-tubing {
	padding: 6rem;
	text-align: center;
	color: rgba(255,200,200,0.8);
	font-family: Neon80s, sans-serif;
	font-size: 11rem;
	letter-spacing: 2rem;
	background: url(brick-wall-texture-faded.jpg);
	background-size: cover;
}

There are two primary differences: a single letter of the neon sign is contained within a span element:

有两个主要区别： span元素内包含一个霓虹灯字母：

<h1 id="neon-tubing">B<span>A</span>R</h1>

… and there is a CSS keyframe animation sequence (shown sans vendor prefixes to save on space):

...并有一个CSS关键帧动画序列 (SANS显示供应商的前缀 ，以节省空间)：

@keyframes neonspark  {
	0% {
		text-shadow: none;
	}
	30% {
		text-shadow: 0 0 30px rgba(255,0,84,0.6);
	}
	60% {
		text-shadow: 0 0 30px rgba(255,0,84,0.6),
		  0 0 60px rgba(255,0,84,0.4);
	}
	80% {
		text-shadow: none;
	}
	100% {
		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);
	}
}

The sequence is simple, merely adding and removing a text-shadow to the letters. The trick is that both the <h1> element and the <span> use the keyframes in different ways:

序列很简单，只需在字母上添加和删除text-shadow 。 诀窍是<h1>元素和<span>以不同的方式使用关键帧：

h1#neon-tubing {
	animation: neonspark 1s 3s forwards;
	}
	h1#neon-tubing span {
		animation: neonspark 4s 3s infinite;
	}

The final effect is that the sign as a whole flickers into life once (as the default behaviour is for CSS animations to execute a single time) but the <span> element uses the same sequence repeatedly, flickering the "A" in the bar sign on and off forever.

最终效果是，整个符号闪烁一次(因为默认行为是CSS动画一次执行)，但是<span>元素重复使用相同的序列，从而使条形符号中的“ A”闪烁永远开启和关闭。

This example goes some way towards showing the flexibility and reusability of CSS keyframes: much like object-oriented classes, well-planned keyframes can be applied to multiple elements in different ways on your web pages.

该示例以某种方式展示了CSS关键帧的灵活性和可重用性： 与面向对象的类非常相似，精心设计的关键帧可以以不同的方式应用于网页上的多个元素。

翻译自: https://thenewcode.com/610/Create-A-Flickering-Neon-Bar-Sign-With-CSS

霓虹灯条 css