|
你想要?jiǎng)?chuàng)建的霓虹燈效果嗎? 沒有? 嗯… 壞我將解釋如何創(chuàng)建它們,。 霓虹燈文本主要是通過使用CSS3 proporty“文本陰影”在多個(gè)層和飽和的顏色,以及一些動(dòng)畫看起來更真實(shí),。
生活的例子
這是基本的HTML,我們將使用,。 沒想到在這看到。
<html>
<head>
<style>
</style>
</head>
<body>
<div id="container">
<h1 class="neon">Neon Text</h1>
</div>
</body>
</html>
現(xiàn)在我們?nèi)ズ芸岬臇|西:CSS !
最重要的部分是“文本陰影”——我們不會(huì)用它來一個(gè)實(shí)際的影子但對文本的發(fā)光效果,。
每一行的值代表一個(gè)發(fā)光的半徑(即第一行創(chuàng)建發(fā)光10 px半徑),。
在大多數(shù)情況下我們希望內(nèi)心的陰影是一個(gè)光明的版本的甚至是白色,而出的霓虹顏色,。
body{
background-color:#424242;
}
.neon{
text-align:center;
font-size:40px;
margin:20px 0 20px 0;
color:#ffffff;
/*Glow*/
text-shadow: 0 0 10px #ffffff,
0 0 20px #ffffff,
0 0 30px #ffffff,
0 0 40px #228DFF,
0 0 70px #228DFF,
0 0 80px #228DFF,
0 0 100px #228DFF,
0 0 150px #228DFF;
}
如果我們想要,我們還可以激活這個(gè)!
我們想用一個(gè)“動(dòng)畫”屬性的發(fā)光效果,不要忘記你的前綴“webkit -”和“-moz——”!
現(xiàn)在其關(guān)鍵幀動(dòng)畫仍然需要工作
.neon{
text-align:center;
font-size:40px;
margin:20px 0 20px 0;
color:#ffffff;
text-shadow: 0 0 10px #ffffff,
0 0 20px #ffffff,
0 0 30px #ffffff,
0 0 40px #228DFF,
0 0 70px #228DFF,
0 0 80px #228DFF,
0 0 100px #228DFF,
0 0 150px #228DFF;
/*Animation*/
-webkit-animation: neonAnimation 1.5s ease-in-out infinite alternate;
-moz-animation: neonAnimation 1.5s ease-in-out infinite alternate;
animation: neonAnimation 1.5s ease-in-out infinite alternate;
}
的關(guān)鍵幀,我們需要再次使用前綴,像這樣:
/*Webkit prefix*/
@-webkit-keyframes neonAnimation {
from {
text-shadow: 0 0 10px #ffffff,
0 0 20px #ffffff,
0 0 30px #ffffff,
0 0 40px #228DFF,
0 0 70px #228DFF,
0 0 80px #228DFF,
0 0 100px #228DFF,
0 0 150px #228DFF;
}
to {
text-shadow: 0 0 5px #ffffff,
0 0 10px #ffffff,
0 0 15px #ffffff,
0 0 20px #228DFF,
0 0 35px #228DFF,
0 0 40px #228DFF,
0 0 50px #228DFF,
0 0 75px #228DFF;
}
}
/*Moz prefix*/
@-moz-keyframes neonAnimation {
from {
text-shadow: 0 0 10px #ffffff,
0 0 20px #ffffff,
0 0 30px #ffffff,
0 0 40px #228DFF,
0 0 70px #228DFF,
0 0 80px #228DFF,
0 0 100px #228DFF,
0 0 150px #228DFF;
}
to {
text-shadow: 0 0 5px #ffffff,
0 0 10px #ffffff,
0 0 15px #ffffff,
0 0 20px #228DFF,
0 0 35px #228DFF,
0 0 40px #228DFF,
0 0 50px #228DFF,
0 0 75px #228DFF;
}
}
/*No prefix*/
@keyframes neonAnimation {
from {
text-shadow: 0 0 10px #ffffff,
0 0 20px #ffffff,
0 0 30px #ffffff,
0 0 40px #228DFF,
0 0 70px #228DFF,
0 0 80px #228DFF,
0 0 100px #228DFF,
0 0 150px #228DFF;
}
to {
text-shadow: 0 0 5px #ffffff,
0 0 10px #ffffff,
0 0 15px #ffffff,
0 0 20px #228DFF,
0 0 35px #228DFF,
0 0 40px #228DFF,
0 0 50px #228DFF,
0 0 75px #228DFF;
}
}
|
