其實(shí)掃光的思路都是一樣的，不外乎是表層一個(gè)動(dòng)態(tài)的光，從左往右進(jìn)行一個(gè)動(dòng)畫運(yùn)動(dòng)！

但是這個(gè)運(yùn)動(dòng)的光，一般是用過(guò)偽元素來(lái)::after或者::before來(lái)實(shí)現(xiàn)的。

然后我們對(duì)這個(gè)偽元素用css的漸變gradient進(jìn)行處理。

文字掃光

掃光效果如下：

  .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">亞網(wǎng)互聯(lián)掃光測(cè)試</div></div>

圖片掃光

亞網(wǎng)互聯(lián)是通過(guò)鼠標(biāo)移上去，偽類位置發(fā)生變化，通過(guò)如下代碼：

.banner-bg .banner-box .right-pic:hover::before {

  -webkit-transition: left .8s;

  -moz-transition: left .8s;

  transition: left .8s;

  left: 480px;}

位置發(fā)生改變。

我們不用亞網(wǎng)互聯(lián)的方式，我這里也簡(jiǎn)單的實(shí)現(xiàn)一下！

如下：

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.thewavecatchers.com"><img src="http://www.thewavecatchers.com/uppic/banner03.jpg" /></a></div>

當(dāng)然我們也可以用亞網(wǎng)互聯(lián)的那種位置偏移來(lái)做，都可以！