The sweeping effect includes: css text sweeping, css image sweeping
ideas
In fact, the idea of sweeping the light is the same, nothing more than a dynamic light on the surface, performing an animation movement from left to right!
However, this moving light is generally implemented using pseudo-elements ::after or ::before.
Then we use CSS gradient gradient to process this pseudo element.
text scan
Without further ado, let's implement a simple sweep text!
.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);}
<div class="sample"> <div class="blank_text">haorooms blog sweep test</div> </div>
The preview effect is as follows:
<iframe style="width: 780px; height: 100px;" src="http://sandbox.runjs.cn/show/k5k3s0y2" frameborder="0"></iframe>
Picture sweep
By moving the mouse up, the pseudo-class position changes, through the following code:
.banner-bg .banner-box .right-pic:hover::before { -webkit-transition: left .8s; -moz-transition: left .8s; transition: left .8s; left: 480px; }
The location has changed.
I am here to implement it simply!
as follows:
<iframe style="color: #444444; font-family: 'Microsoft Yahei', 'Trebuchet MS', Georgia, 'Times New Roman', Times, sans-serif; background-color: #fcfcfa; width: 780px; height: 180px;" src="http://sandbox.runjs.cn/show/gunlnisc" frameborder="0"></iframe>
@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; } .soon to { 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 }
<div class="logo"> <a href="http://www.haorooms.com"><img src="http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/banner03.jpg" /></a> </div>
Of course, we can also do it with that kind of position offset.
.