CSS字体样式

收藏了几个CSS字体样式

打开Web 编辑器进行调试

一. CSS字体颜色渐变

示例: CSS字体颜色渐变,注意调整width

CSS字体颜色渐变
<p class="myStyle"> 示例: CSS字体颜色渐变,注意调整width </p>
<style>
.myStyle{
	background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
    -webkit-background-clip: text;
    animation: move 5s infinite;
    color: transparent;
    width: 330px;
}
@keyframes move{
  0%{
    background-position: 0 0;
  }
  100% {
      background-position: -330px 0;
  }
}
</style>

---

二. CSS 文字动画

CSS 文字动画
<svg width="100%" height="80">
<text text-anchor="middle" x="50%" y="70%" class="text text-1">一段文字</text>
<text text-anchor="middle" x="50%" y="70%" class="text text-2">一段文字</text>
<text text-anchor="middle" x="50%" y="70%" class="text text-3">一段文字</text>
<text text-anchor="middle" x="50%" y="70%" class="text text-4">一段文字</text>
</svg>
<style>
.text {
	font-size: 44px;
	font-weight: bold;
	text-transform: uppercase;
	fill: none;
	stroke-width: 2px;
	stroke-dasharray: 90 310;
	animation: stroke 6s infinite linear;
	background:#000;
}
.text-1 {
	stroke: #3498db;
	text-shadow: 0 0 5px #3498db;
	animation-delay: -1.5s;
}
.text-2 {
	stroke: #f39c12;
	text-shadow: 0 0 5px #f39c12;
	animation-delay: -3s;
}
.text-3 {
	stroke: #e74c3c;
	text-shadow: 0 0 5px #e74c3c;
	animation-delay: -4.5s;
}
.text-4 {
	stroke: #9b59b6;
	text-shadow: 0 0 5px #9b59b6;
	animation-delay: -6s;
}
@keyframes stroke {
	100% {
		stroke-dashoffset: -400;
	}
}
</style>

---