平时网页上的字体需要重点展示的时候，加粗加大来显示，怎么看都不够档次，直接把产品的质量拉下来了，下面就为大家分享几款纯css实现的高大上的字体效果，帮助提高作品质量。

效果一

代码：

<div class="box_1">
  <span class="text" data-text="fly63前端">fly63前端</span>
  <span class="gradient"></span>
  <span class="spotlight"></span>
</div>
<style>
.box_1 {
    position: relative;
    overflow: hidden;
    filter: brightness(200%);
      background: #000;
    padding: 20px 0;
    text-align: center;
}
.box_1 .text {
    background-color: black;
    color: white;
    font-size: 80px;
    font-weight: bold;
    font-family: sans-serif;
    text-transform: uppercase;
    position: relative;
    user-select: none;
}
.box_1 .text::before {
    content: attr(data-text);
    position: absolute;
    color: white;
    filter: blur(0.02em);
    mix-blend-mode: difference;
}
.box_1 .gradient {
    position: absolute;
    background: linear-gradient(45deg, red, gold, lightgreen, gold, red);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    mix-blend-mode: multiply;
}
.box_1 .spotlight {
    position: absolute;
    top: -100%;
    left: -100%;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle,white,transparent 25%) center / 25% 25%,
		radial-gradient(circle,white,black 25%) center / 12.5% 12.5%;
    animation: light 5s linear infinite;
    mix-blend-mode: color-dodge;
}
@keyframes light {
    to {
        transform: translate(50%, 50%);
    }
}	
</style>

效果二

代码：

<div class="box_2">
	<p>fly63前端</p>
</div> 
<style>
.box_2 {
    position: relative;
    overflow: hidden;
    background: #000;
    padding: 20px 0;
    height: 100px;
    text-align: center;
}
.box_2 p {
  color: hsla(0, 0%, 0%, .9);
  font: normal 80px Varela Round, sans-serif;
  letter-spacing: 5px;
  text-align: center;
  text-transform: uppercase;
  animation: move linear 2000ms infinite;  
}
@keyframes move {
  0% {
    text-shadow:
      4px -4px 0 hsla(0, 100%, 50%, 1), 
      3px -3px 0 hsla(0, 100%, 50%, 1), 
      2px -2px 0 hsla(0, 100%, 50%, 1), 
      1px -1px 0 hsla(0, 100%, 50%, 1),
      -4px 4px 0 hsla(180, 100%, 50%, 1), 
      -3px 3px 0 hsla(180, 100%, 50%, 1), 
      -2px 2px 0 hsla(180, 100%, 50%, 1), 
      -1px 1px 0 hsla(180, 100%, 50%, 1);
  }
  25% {    
    text-shadow:      
      -4px -4px 0 hsla(180, 100%, 50%, 1), 
      -3px -3px 0 hsla(180, 100%, 50%, 1), 
      -2px -2px 0 hsla(180, 100%, 50%, 1), 
      -1px -1px 0 hsla(180, 100%, 50%, 1),
      4px 4px 0 hsla(0, 100%, 50%, 1), 
      3px 3px 0 hsla(0, 100%, 50%, 1), 
      2px 2px 0 hsla(0, 100%, 50%, 1), 
      1px 1px 0 hsla(0, 100%, 50%, 1);
  }
  50% {
    text-shadow:
      -4px 4px 0 hsla(0, 100%, 50%, 1), 
      -3px 3px 0 hsla(0, 100%, 50%, 1), 
      -2px 2px 0 hsla(0, 100%, 50%, 1), 
      -1px 1px 0 hsla(0, 100%, 50%, 1),
      4px -4px 0 hsla(180, 100%, 50%, 1), 
      3px -3px 0 hsla(180, 100%, 50%, 1), 
      2px -2px 0 hsla(180, 100%, 50%, 1), 
      1px -1px 0 hsla(180, 100%, 50%, 1);
  }
  75% {
    text-shadow:
      4px 4px 0 hsla(180, 100%, 50%, 1), 
      3px 3px 0 hsla(180, 100%, 50%, 1), 
      2px 2px 0 hsla(180, 100%, 50%, 1), 
      1px 1px 0 hsla(180, 100%, 50%, 1),
      -4px -4px 0 hsla(0, 100%, 50%, 1), 
      -3px -3px 0 hsla(0, 100%, 50%, 1), 
      -2px -2px 0 hsla(0, 100%, 50%, 1), 
      -1px -1px 0 hsla(0, 100%, 50%, 1);
  }
  100% {
    text-shadow:
      4px -4px 0 hsla(0, 100%, 50%, 1), 
      3px -3px 0 hsla(0, 100%, 50%, 1), 
      2px -2px 0 hsla(0, 100%, 50%, 1), 
      1px -1px 0 hsla(0, 100%, 50%, 1),
      -4px 4px 0 hsla(180, 100%, 50%, 1), 
      -3px 3px 0 hsla(180, 100%, 50%, 1), 
      -2px 2px 0 hsla(180, 100%, 50%, 1), 
      -1px 1px 0 hsla(180, 100%, 50%, 1);
  }  
}
</style>

效果三

代码：

<div class="box_3">
	<p>你已经不是小朋友了，就算撑不住也不能哭呀!</p>
</div> 
<style>
.box_3{
	background: #fff;
	text-align: center;
	padding: 10px 0;
}	
.box_3 p {
	font-size: 30px;
	font-weight: bold;
	background: rgb(155,93,229);
	background: linear-gradient(150deg, rgba(155,93,229,1) 0%, rgba(241,91,181,1) 20%, rgba(254,228,64,1) 40%, rgba(0,187,249,1) 60%, rgba(0,245,212,1) 80%);
	background-size: 20% 20%;
	background-color: #840b2a;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradient 5s linear infinite;
}
@keyframes gradient {
	0% {
		background-position: 0% 0%;
	}
	50% {
		background-position: 50% 50%;
	}
	100% {
		background-position: 100% 100%;
	}
}
</style>

效果四

代码：

<div class="box_4">
	<p>توسعه پیشینه وب</p>
</div> 
<style>
.box_4{
	background: #f1f2f3;
	text-align: center;
	padding: 30px 0;
}	
.box_4 p {
	font-size: 60px;
	font-weight: bold;
	background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
	background-size: cover;
	color: transparent;
	-moz-background-clip: text;
	-webkit-background-clip: text;
}
</style>

链接: https://fly63.com/article/detial/12309