【纯CSS特效源码】(一)几款漂亮的文字特效-编程知识

【纯CSS特效源码】(一)几款漂亮的文字特效

1.渐变文字

使用background: -webkit-linear-gradient(#d8ecec, #2d888b);定义背景渐变色
并使用-webkit-text-fill-color: transparent;指定了文本字符的填充颜色
在这里插入图片描述

<!DOCTYPE html>
<html><style>body {background-color: #111;}#content {position: absolute;top: 50%;left: 0;right: 0;color: #fff;text-align: center;font-family: sans-serif;font-weight: 400;font-size: 50px;letter-spacing: 15px;margin-top: -60px;padding-left: 10px;}#content span {background: -webkit-linear-gradient(#d8ecec, #2d888b);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}</style><body><div id="content"><span>八荒我为王</span><br /><span>FOOLISHSUNDAY</span></div></body>
</html>

2.滤镜发光

这里使用background-image: -webkit-linear-gradient(#d5cabd 0%, #717597 100%);
设置元素背景图像为线性渐变
并用-webkit-filter: drop-shadow(2px 2px 15px #b052b0);给文字添加一层发光滤镜
在这里插入图片描述

<!DOCTYPE html>
<html><style>body {background: #111; }.center-container {position: absolute;top: 20%;left: 0;right: 0;text-align: center;}.color-text {position: relative;font-size: 60px;font-family: Verdana, Geneva, STCaiyun, sans-serif;background-image: -webkit-linear-gradient(#d5cabd 0%, #717597 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;margin: 0;-webkit-filter: drop-shadow(2px 2px 15px #b052b0);}</style><body><div class="center-container"><span class="color-text">八荒我为王</span><h1 class="color-text">foolishsunday</h1></div></body>
</html>

3.倒影

这里使用“:before” 伪元素在元素的内容前面插入内容
使用transform: rotateX(180deg);进行180度翻转实现倒影效果
在这里插入图片描述

<!DOCTYPE html>
<html><style>body {background-color: #4158d0;background-image: linear-gradient(43deg,#4158d0 0%,#c850c0 46%,#ffcc70 100%);}h1 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 60px;white-space: nowrap;}h1::before {content: attr(data-text);position: absolute;transform: rotateX(180deg);transform-origin: bottom;line-height: 52px;background: linear-gradient(0deg, #000 0, transparent 80%);-webkit-background-clip: text;color: transparent;opacity: 0.5;}</style><body><h1 data-text="foolishsunday">foolishsunday</h1>
</html>

镀金字体

这里使用两层文字特效

      <div class="bg"> FOOLISHSUNDAY </div><div class="fg"> FOOLISHSUNDAY </div>

背景特效使用transform: scaleY(1.05);进行放大，使背景特效稍微凸出，达到描边镀金效果
在这里插入图片描述

<!DOCTYPE html>
<html><style>* {box-sizing: border-box;}:root {--gold: #ffb338;--light-shadow: #77571d;--dark-shadow: #3e2904;}body {margin: 0;}.wrapper {background: radial-gradient(#272727, #1b1b1b);display: grid;grid-template-areas: 'overlap';place-content: center;text-transform: uppercase;height: 100vh;}.wrapper > div {background-clip: text;  -webkit-background-clip: text;color: #363833;font-family: 'PingFang SC', sans-serif;font-weight: 900;font-size: clamp( 1em, 8vw, 8rem);grid-area: overlap;letter-spacing: 1px;-webkit-text-stroke: 4px transparent;}div.bg {background-image: repeating-linear-gradient( 105deg, var(--gold) 0% , var(--dark-shadow) 5%,var(--gold) 12%);color: transparent;filter: drop-shadow(5px 12px 5px black);transform: scaleY(1.05);transform-origin: top;}div.fg{background-image: repeating-linear-gradient( 5deg,  var(--gold) 0% , var(--light-shadow) 23%, var(--gold) 31%);color: #1e2127;transform: scale(1);}</style><body><div class="wrapper"><div class="bg"> FOOLISHSUNDAY </div><div class="fg"> FOOLISHSUNDAY </div></div>
</html>