html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: relative;
font: 150%/1.5 Helvetica Neue;
-webkit-font-smoothing: antialiased;
background-image: url(http://www.hdwallpapers.in/walls/ios_7_galaxy-wide.jpg);
background-size: cover;
background-color: #19385c;
color: #fff;
}
.shine {
position: absolute;
width: 400px;
top: 50%;
left: 50%;
height: 60px;
margin-left: -200px;
font-weight: 200;
text-align: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: #19385c;
background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.6) 30%, #aff0ff 50%, rgba(0, 0, 0, 0.6) 70%);
background-blend-mode: hard-light;
background-size: 200%;
-webkit-animation: shine 4s infinite;
}
@-webkit-keyframes shine {
from {
background-position: 150%;
}
to {
background-position: -50%;
}
}
@-webkit-keyframes hover {
from {
transform: translateY(-50%);
}
to {
transform: translateY(-75%);
}
}
@-webkit-keyframes hoverSmall {
from {
transform: translateY(30%) rotate(45deg);
}
to {
transform: translateY(-10%) rotate(45deg);
}
}
HTML
<span class="shine">slide to unlock</span>