文字效果集中营

马黑黑 · 发表于 2022-3-10 16:59

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>

马黑黑 · 发表于 2022-3-10 17:16

CSS静态发光字：利用text-shadow巧妙营造——

藍田玉暖日生煙

马黑黑 · 发表于 2022-3-10 17:17

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>

马黑黑 · 发表于 2022-3-10 17:41

CSS动态发光文字：仍然是利用 text-shadow 方法实现，我们使用了 @keyframes 设计动画，由目标盒子用 animation 调用。效果：

只願君心似我心

马黑黑 · 发表于 2022-3-10 17:42

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>

马黑黑 · 发表于 2022-3-10 20:15

摇摆文字：实际上是盒子在做3d的rotate转换，是盒子在带着文字摇摆。效果如下，效果在下楼：

花潮論壇

马黑黑 · 发表于 2022-3-10 20:16

代码：

<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>

马黑黑 · 发表于 2022-3-10 20:30

又是 text-shadow 营造的效果：

火一樣的熱情

马黑黑 · 发表于 2022-3-10 20:30

代码：

<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>