在DIV中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">亚网互联扫光测试</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.yanet.cn"><img src="http://www.yanet.cn/uppic/banner03.jpg" /></a></div>

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