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    -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="sandbox.runjs/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="sandbox.runjs/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;
css特效文字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  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="www.haorooms"><img src="sandbox.runjs/uploads/rs/216/0y89gzo2/banner03.jpg" /></a>
</div>
当然我们也可以⽤慕课⽹的那种位置偏移来做，都可以！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。