zoukankan      html  css  js  c++  java
  • 纯css3实现的文字亮光特效

    今天给大家分享一款纯css3实现的文字亮光特效。这款特效文字上一道亮光逐渐扫过文字。效果非常漂亮。一起看下效果:

    在线预览   源码下载

    实现的代码。

    html代码:

       <span class="shiny"><span class="inner-shiny">Shiny</span> </span>

    css3代码:

            body
    {
      background: #111;
    }
    
    .shiny
    {
      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;
    }
    
    .shiny::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: "Shiny";
      color: #FFF;
      display: block;
      padding-right: 140px;
      position: absolute;
    }
    
    .shiny::after
    {
      content: "Shiny";
      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-shiny::after, .inner-shiny::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-shiny::before
    {
        -webkit-animation-delay: 0.2s;
      height: 7px;
      left: 0.12em;
      top: 0.8em;
      width: 7px;
    }
    
    .inner-shiny::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; }
    }

    注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/11098

  • 相关阅读:
    68
    56
    Django manager 命令笔记
    Django 执行 manage 命令方式
    Django 连接 Mysql (8.0.16) 失败
    Python django 安装 mysqlclient 失败
    H.264 SODB RBSP EBSP的区别
    FFmpeg—— Bitstream Filters 作用
    MySQL 远程连接问题 (Windows Server)
    MySQL 笔记
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4117918.html
Copyright © 2011-2022 走看看