We have seen in i-phones how the shine slides over the text,now we are going to create the same effect using CSS3 animations and gradient technique.
CSS3 animations using @keyframes Rule
To create animations in CSS3, you will have to learn about the @keyframes rule.
The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.
BASIC HTML
<html>
<head>
<title>Shine</title>
<style type="text/css" >
.shine
{
font-size: 60px;
margin:0 auto;
width:750px;
font-family:sans-serif;
}
.shine
{
background-color:#222 ;
background:-webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.7, #fff));
background-repeat:no-repeat;
-webkit-background-size: 100px;
color: rgba(255, 255, 255, 0.2);
-webkit-background-clip: text;
-webkit-animation-name: shining;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes shining
{
0%
{
background-position: left top;
}
100%
{
background: right bottom;
}
}
</style>
</head>
<body bgcolor="black">
<p class="shine">web designing tutorials</p>
</body>
</html>
