前言
今天来和大家一起探讨一下图片的扫光效果吧！
思路
其实扫光的思路都是一样的，不外乎是表层一个动态的光，从左往右进行一个动画运动！
但是这个运动的光，一般是用过伪元素来::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>
预览效果如下：
src="/show/k5k3s0y2" allowfullscreen="allowfullscreen">
图片扫光
慕课网是通过鼠标移上去，伪类位置发生变化，通过如下代码：
.banner-bg .banner-box .right-pic:hover::before {-webkit-transition: left .8s;-moz-transition: left .8s;transition: left .8s;left: 480px;}
位置发生改变。
我们不用慕课网的方式，我这里也简单的实现一下！
如下：
src="/show/gunlnisc" allowfullscreen="allowfullscreen">
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=""><img src="/uploads/rs/216/0y89gzo2/banner03.jpg" /></a></div>
当然我们也可以用慕课网的那种位置偏移来做，都可以！
如果觉得《css扫光效果总结 css文字扫光 css图片扫光》对你有帮助，请点赞、收藏，并留下你的观点哦！
