用css3实现高亮发光文字特效 - Web前端

作者：98wpeu发布时间：2026-09-23分类：网页前端技术浏览：8

导读：用css3实现高亮发光文字特效，一起来学习下吧！先来看下效果：代码直接奉上了，请接招！！！<!DOCtype html><HTML><head&g...

用css3实现高亮发光文字特效，一起来学习下吧！先来看下效果：

图片.png

代码直接奉上了，请接招！！！

<!DOCtype html>
<HTML>
<head>
    <meta charset="UTF-8">
    <title>用CSS3实现高亮发光文字特效 - Web前端之家</title>
    <style>
        body{
          background: #111;
        }
          
        .TERRY{
          color: #F5C21B;
          background: -WEBkit-gradient(linear, left top, left bottom, from(#F5C21B), to(#D17000));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          display:block;
          width:610px;
          margin:auto;
          font-family: "Source Sans PRo", sans-serif;
          font-size: 13em;
          font-weight: 900;
          position: relative;
          text-transform: uppercase;
        }
          
        .TERRY::before
        {
            background-position: -180px;
            -webkit-Animation: flare 5s infinite;
          -webkit-animation-timing-function: linear;
          background-image: linear-gradIEnt(65deg, transparent 20%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.3) 27%, transparent 27%, transparent 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          content: "TERRY";
          color: #FFF;
          display: block;
          padding-right: 140px;
          position: absolute;
        }
          
        .TERRY::after
        {
          content: "TERRY";
          color: #FFF;
          display: block;
          position: absolute;
          text-shadow: 0 1px #6E4414, 0 2px #6E4414, 0 3px #6E4414, 0 4px #6E4414, 0 5px #6E4414, 0 6px #6E4414, 0 7px #6E4414, 0 8px #6E4414, 0 9px #6E4414, 0 10px #6E4414;
          top: 0;
          z-index: -1;
        }
          
        .inner-TERRY::after, .inner-TERRY::before
        {
                -webkit-animation: sparkle 5s infinite;
          -webkit-animation-timing-function: linear;
            background: #FFF;
          border-radius: 100%;
          box-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #FFF, 0 0 25px #FFF, 0 0 30px #FFF, 0 0 35px #FFF;
          content: "";
          display: block;
          height: 10px;
          opacity: 0.7;
          position: absolute;
          width: 10px;
        }
          
        .inner-TERRY::before
        {
            -webkit-animation-delay: 0.2s;
          height: 7px;
          left: 0.12em;
          top: 0.8em;
          width: 7px;
        }
          
        .inner-TERRY::after
        {
          top: 0.32em;
          right: -5px;
        }
          
        @-webkit-keyframes flare
        {
          0%   { background-position: -180px; }
          30%  { background-position: 500px; }
          100% { background-position: 500px; }
        }
          
        @-webkit-keyframes sparkle
        {
          0%   { opacity: 0; }
          30%  { opacity: 0; }
          40%  { opacity: 0.8; }
          60%  { opacity: 0; }
          100% { opacity: 0; }
        }
    </style>
</head>
<body>
    <span class="TERRY"><span class="inner-TERRY">TERRY</span> </span>
</body>
</html>

是不是很酷炫。

标签：高亮文字特效 Web css3

上一篇：H5之Canvas绘制时指定颜色 - Web前端
下一篇：学习下javascript运算符 - Web前端

用css3实现高亮发光文字特效 - Web前端

相关推荐