Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 css实现文字发光效果方法汇总

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

发布时间:2020-05-07   编辑:www.jquerycn.cn
jquery中文网为您提供css实现文字发光效果方法汇总等资源,欢迎您收藏本站,我们将为您提供最新的css实现文字发光效果方法汇总资源
文字发光效果我们可以直接使用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>

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

您可能感兴趣的文章:
CSS 阴影效果(无需图片即可实现)
基于jQuery制作迷你背词汇工具
jQuery 动态酷效果实现总结
js中光标定位的方法
jQuery使用技巧简单汇总
jQuery实现可拖动的浮动层完整代码
PostgreSQL从菜鸟到专家系列教程(1)PostgreSQL介绍
JQuery上传插件Uploadify使用详解及错误处理
js光标定位的实例代码
php 当前时间、时间戳的获取方法汇总

[关闭]