20#代码：
<style type="text/css">
.neiqian {
margin: auto;
width: 600px;
height: 150px;
line-height: 150px;
text-align: center;
color: #202020;
font-size: 4em;
background-color: #2d2d2d;
text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
}
</style>
<div class="neiqian">天下誰人不識君</div>
<p>CSS静态发光字：利用text-shadow巧妙营造——<br><br></p>
<style type="text/css">
.faguang {
margin: auto;
background: #000;
width: 760px;
height: 200px;
line-height: 200px; /* 单行文本重置居中: 与height值相等 */
color: #fff;
font-size: 4em;
text-align: center;
text-shadow: 0 0 10px#ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000;
}
</style>
<div class="faguang">
<p>藍田玉暖日生煙</p>
</div>
22#代码：
<style type="text/css">
.faguang {
margin: auto;
background: #000;
width: 760px;
height: 200px;
line-height: 200px; /* 单行文本重置居中: 与height值相等 */
color: #fff;
font-size: 4em;
text-align: center;
text-shadow: 0 0 10px#ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000;
}
</style>
<div class="faguang">
<p>藍田玉暖日生煙</p>
</div>
<p>CSS动态发光文字：仍然是利用 text-shadow 方法实现，我们使用了 @keyframes 设计动画，由目标盒子用 animation 调用。效果：<br><br></p>
<style type="text/css">
.tGlow {
margin: auto;
width: 600px;
height: 200px;
line-height: 200px;
background: #000;
font-size:60px;
font-weight: bold;
letter-spacing: 2px;
text-align: center;
color: olive;
animation: glow 1s linear infinite;
}
@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;
}
}
</style>
<div class="tGlow">只願君心似我心</div>
24#代码：
<style type="text/css">
.tGlow {
margin: auto;
width: 600px;
height: 200px;
line-height: 200px;
background: #000;
font-size:60px;
font-weight: bold;
letter-spacing: 2px;
text-align: center;
color: olive;
animation: glow 1s linear infinite;
}
@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;
}
}
</style>
<div class="tGlow">只願君心似我心</div>
<p>摇摆文字：实际上是盒子在做3d的rotate转换，是盒子在带着文字摇摆。效果如下，效果在下楼：<br><br></p>
<style type="text/css">
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
margin: auto;
width: 300px;
text-align: center;
font-size: 4rem;
font-weight: bold;
color: darkgreen;
transform-origin: top;
animation: yao 0.8s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
</style>
<div id="baiBox">花潮論壇</div>
代码：
<style type="text/css">
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
margin: auto;
width: 300px;
text-align: center;
font-size: 4rem;
font-weight: bold;
color: darkgreen;
transform-origin: top;
animation: yao 0.8s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
</style>
<div id="baiBox">花潮論壇</div>
<p>又是 text-shadow 营造的效果：<br><br></p>
<style type="text/css">
.fireBox {
margin: auto;
width: 500px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 4rem;
font-weight: bold;
color: #ff0000;
background: #000;
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}
</style>
<div class="fireBox">火一樣的熱情</div>
代码：
<style type="text/css">
.fireBox {
margin: auto;
width: 500px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 4rem;
font-weight: bold;
color: #ff0000;
background: #000;
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}
</style>
<div class="fireBox">火一樣的熱情</div>
红影 发表于 2022-3-10 10:33
@小辣椒亲爱的快来看，黑黑又出了很多字体效果
亲爱的~~~来了{:4_171:}
这个是太漂亮了，黑黑已经是系统性的制作了这么多的文字效果{:4_178:}
马黑黑 发表于 2022-3-10 16:53
代码在十三楼，非常简单的，我只用了 substring() 方法加个定时器。
JS处理文本的功能很强大，看看手 ...
嗯嗯，这么短的代码就能实现，太厉害了{:4_199:}
马黑黑 发表于 2022-3-10 17:16
CSS静态发光字：利用text-shadow巧妙营造——
这个的确有发光效果呢，太美了{:4_199:}
马黑黑 发表于 2022-3-10 17:41
CSS动态发光文字：仍然是利用 text-shadow 方法实现，我们使用了 @keyframes 设计动画，由目标盒子用 anima ...
还能动态发光，漂亮{:4_199:}
这里面的效果都太棒了，text-shadow竟能营造出这么多效果，太惊奇了{:4_199:}
小辣椒 发表于 2022-3-10 21:06
亲爱的~~~来了
亲爱的，这个帖子里好多好东西，你肯定会需要的{:4_187:}
红影 发表于 2022-3-10 21:56
这里面的效果都太棒了，text-shadow竟能营造出这么多效果，太惊奇了
嗯，现在需要的是想象力了
红影 发表于 2022-3-10 21:55
还能动态发光，漂亮
这个，@keyframes的功劳
红影 发表于 2022-3-10 21:53
这个的确有发光效果呢，太美了
还行吧
红影 发表于 2022-3-10 21:50
嗯嗯，这么短的代码就能实现，太厉害了
JS有时候可以很简洁