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

八荒我为王

已于 2024-01-13 19:39:43 修改

阅读量2.5k

点赞数 26

分类专栏： CSS 文章标签： css css3 前端

于 2024-01-12 13:19:54 首次发布

本文链接：https://blog.csdn.net/u011340439/article/details/135549732

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS3技术，如Webkit的背景渐变、滤镜效果（发光）、倒影以及多层文字特效（镀金），实现独特的视觉效果，包括背景渐变色、文字发光和倒影等。

摘要由CSDN通过智能技术生成

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>