您的位置：首页 > 网站优化 > css  >  css实现文字发光效果方法汇总

css实现文字发光效果方法汇总

 更新时间：2016年9月14日 14:19  点击：2454
文字发光效果我们可以直接使用css来实现了今天我们来看一篇关于文字发光效果的例子，希望这篇文章能够帮助到各位朋友哦。

前言

我录制的慕课网视频一直没有上线，慕课网的消息说是可能加入就业课程或者系列课程。有可能年底上线，我等的花儿都谢了！因此，我昨天在看慕课网时，发现他们确实改版了，实战页面有图片扫光效果，地址我就不列了！感觉这个效果还蛮不错，其实，我之前也做过类似的效果。今天借着这个引子，来和大家一起探讨一下图片的扫光效果吧！

思路

其实扫光的思路都是一样的，不外乎是表层一个动态的光，从左往右进行一个动画运动！

但是这个运动的光，一般是用过伪元素来::after或者::before来实现的。

然后我们对这个伪元素用css的渐变gradient进行处理。

文字扫光

废话少说，我们接下来实现一个简单的扫光文字！

 代码如下 复制代码

  .sample{
    background-color: #0E1326;
    padding-top:30px;
    overflow: hidden;
  }
  .blank_text{
    position: relative;
    width:200px;
    margin:20px auto;
    color: #fff;
    line-height: 1;
    font-size: 50px;
    font-size: 0.74074rem;
    text-align: center;
    overflow: hidden;
    font-family: "icomoon";
  }
.blank_text:after{
    width: 300%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(15,20,40, 0.7)), color-stop(0.4, rgba(15,20,40, 0.7)), color-stop(0.5, rgba(15,20,40, 0)), color-stop(0.6, rgba(15,20,40, 0.7)), color-stop(1, rgba(15,20,40, 0.7)));
    -webkit-animation: slide ease-in-out 2s infinite;
}
@-webkit-keyframes slide{
    0%{-webkit-transform:translateX(-66.666%);}
    100%{-webkit-transform:translateX(0);}

html代码如下：

<div class="sample">
    <div class="blank_text">haorooms博客扫光测试</div>
</div>

预览效果如下：


图片扫光

慕课网是通过鼠标移上去，伪类位置发生变化，通过如下代码：

 代码如下 复制代码
.banner-bg .banner-box .right-pic:hover::before {
  -webkit-transition: left .8s;
  -moz-transition: left .8s;
  transition: left .8s;
  left: 480px;
}

位置发生改变。

我们不用慕课网的方式，我这里也简单的实现一下！

如下：


css代码如下：

 代码如下 复制代码
@keyframes aniBlink {
from {
margin-left:-440px
}
to {
    margin-left:500px
}
}
@-webkit-keyframes aniBlink {
from {
margin-left:-440px
}
to {
    margin-left:500px
}
}
.logo {
    position:relative;
    width:440px;
    height:160px;
    overflow:hidden;
}
.logo a {
    display:inline-block
}
.logo a:before {
    content:'';
    position:absolute;
    width:60px;
    height:160px;
    margin-top:0px;
    margin-left:-440px;
    overflow:hidden;
    z-index:6;
  overflow: hidden;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0)));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  -webkit-transform: skewX(-25deg);
  -moz-transform: skewX(-25deg);
}
.logo:hover a:before {
 -webkit-animation:aniBlink .8s ease-out forwards;
 -moz-animation:aniBlink .8s ease-out forwards;
 -o-animation:aniBlink .8s ease-out forwards;
 animation:aniBlink .8s ease-out forwards
}

html代码如下：

 代码如下 复制代码
<div class="logo">
    <a href="http://www.111cn.net"><img src="/0y89gzo2/banner03.jpg" /></a>
</div>

当然我们也可以用慕课网的那种位置偏移来做，都可以！

[!--infotagslink--]

相关文章

  • Painter绘制红衣喝酒男水粉画效果教程

    今天小编在这里就来给Painter的这一款软件的使用者们来说一说绘制红衣喝酒男水粉画效果的教程，各位想知道具体绘制步骤的使用者，那么下面就快来跟着小编一起看一看教程...2016-09-14

  • php 中file_get_contents超时问题的解决方法

    file_get_contents超时我知道最多的原因就是你机器访问远程机器过慢，导致php脚本超时了，但也有其它很多原因，下面我来总结file_get_contents超时问题的解决方法总结。...2016-11-25

  • php语言实现redis的客户端

    php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25

  • photoshop用各种素材合成闪电侠效果制作教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说说利用各种素材合成闪电侠效果的制作教程，各位想知道具体制作步骤的使用者们，那么下面就快来跟着小编一起看...2016-09-14

  • HTTP 408错误是什么 HTTP 408错误解决方法

    相信很多站长都遇到过这样一个问题，访问页面时出现408错误，下面一聚教程网将为大家介绍408错误出现的原因以及408错误的解决办法。 HTTP 408错误出现原因： HTT...2017-01-22

  • jQuery+jRange实现滑动选取数值范围特效

    有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15

  • php抓取网站图片并保存的实现方法

    php如何实现抓取网页图片，相较于手动的粘贴复制，使用小程序要方便快捷多了，喜欢编程的人总会喜欢制作一些简单有用的小软件，最近就参考了网上一个php抓取图片代码，封装了一个php远程抓取图片的类，测试了一下，效果还不错分享...2015-10-30

  • Android子控件超出父控件的范围显示出来方法

    下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法，希望这篇文章能够帮助到各位朋友，有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02

  • ps把文字背景变透明的操作方法

    ps软件是现在非常受大家喜欢的一款软件，有着非常不错的使用功能。这次文章就给大家介绍下ps把文字背景变透明的操作方法，喜欢的一起来看看。 1、使用Photoshop软件...2017-07-06

  • intellij idea快速查看当前类中的所有方法(推荐)

    这篇文章主要介绍了intellij idea快速查看当前类中的所有方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-09-02

  • JS实现的简洁纵向滑动菜单(滑动门)效果

    本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21

  • Mysql select语句设置默认值的方法

    1.在没有设置默认值的情况下： 复制代码 代码如下:SELECT userinfo.id, user_name, role, adm_regionid, region_name , create_timeFROM userinfoLEFT JOIN region ON userinfo.adm_regionid = region.id 结果：...2014-05-31

  • js导出table数据到excel即导出为EXCEL文档的方法

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht...2013-10-13

  • mysql 批量更新与批量更新多条记录的不同值实现方法

    批量更新mysql更新语句很简单，更新一条数据的某个字段，一般这样写：复制代码 代码如下:UPDATE mytable SET myfield = 'value' WHERE other_field = 'other_value';如果更新同一字段为同一个值，mysql也很简单，修改下where即...2013-10-04

  • js基础知识（公有方法、私有方法、特权方法）

    本文涉及的主题虽然很基础，在许多人看来属于小伎俩，但在JavaScript基础知识中属于一个综合性的话题。这里会涉及到对象属性的封装、原型、构造函数、闭包以及立即执行表达式等知识。公有方法 公有方法就是能被外部访问...2015-11-08

  • ps怎么制作倒影 ps设计倒影的方法

    ps软件是一款非常不错的图片处理软件，有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影，一起来看看设计倒影的方法。 用ps怎么做倒影最终效果&#819...2017-07-06

  • 美图秀秀把普通照片快速转换成卡通效果教程

    今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下把普通照片快速转换成卡通效果的教程，各位想知道具体制作步骤的使用者们，那么下面就快阿里跟着小编一起看一...2016-09-14

  • PHP 验证码不显示只有一个小红叉的解决方法

    最近想自学PHP ，做了个验证码，但不知道怎么搞的，总出现一个如下图的小红叉，但验证码就是显示不出来，原因如下 未修改之前，出现如下错误； （1）修改步骤如下，原因如下，原因是apache权限没开， （2）点击打开php.int.， 搜索extension=ph...2013-10-04

  • c#中分割字符串的几种方法

    单个字符分割 string s="abcdeabcdeabcde"; string[] sArray=s.Split('c'); foreach(string i in sArray) Console.WriteLine(i.ToString()); 输出下面的结果: ab de...2020-06-25

  • 安卓手机wifi打不开修复教程，安卓手机wifi打不开解决方法

    手机wifi打不开？让小编来告诉你如何解决。还不知道的朋友快来看看。 手机wifi是现在生活中最常用的手机功能，但是遇到手机wifi打不开的情况该怎么办呢?如果手机wifi...2016-12-21