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.haorooms.com"><img src="http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/banner03.jpg" /></a></div>

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