<style>
.box
{
width:500px;margin:20px auto;
height:50px;
background-color:#000;
position:relative;
overflow:hidden;
color:#fff;font-size:24px;font-weight:700;padding:14px 0;box-sizing:border-box;line-height:1;text-align:center;text-transform:uppercase;animation-name:example1;animation-duration:4s;animation-iteration-count:infinite;}
.box::before{content:"";position:absolute;height:2px;width:100%;background: linear-gradient(to right, red , yellow);top:50%;visibility:hidden;}
.box:hover::before{animation-name:example;animation-duration:1s;}
@keyframes example {
0% {left:-100%;visibility:visible;}
100% {left:300%;visibility:visible;}
}
</style>
<html>
<div class="box">first line</div>
<div class="box">second line</div>
<div class="box">third line</div>
</html>
<!------------------------------------- second effect ------------------------------------------------------>
<style>
body{background-color:#16a085;}
a::before {
background: #ffffff none repeat scroll 0 0;
color: #0f7c67;
content: attr(data-hover);
height: 100%;
left: 0;
padding: 10px 20px;
position: absolute;
top: 0;
transition: transform 0.3s ease 0s;
width: 100%;
z-index: -1;
}
a {
color: #ffffff;
display: inline-block;
font-size: 1.35em;
font-weight: 400;
letter-spacing: 1px;
margin: 15px 25px;
outline: medium none;
position: relative;
text-decoration: none;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
text-transform: uppercase;
margin: 0 15px;
overflow: hidden;
}
a span {
background: #0f7c67 none repeat scroll 0 0;
display: block;
padding: 10px 20px;
transition: transform 0.3s ease 0s;
}
a:hover span, a:focus span {
transform: translateX(100%);
}
li {
display: inline-block;
}
</style>
<html>
<ul class="menu">
<li><a href="#" data-hover="home"><span>home</span></a></li>
<li><a href="#" data-hover="about"><span>about</span></a></li>
<li><a href="#" data-hover="services"><span>services</span></a></li>
<li><a href="#" data-hover="contact"><span>contact</span></a></li>
</ul>
</html>
