• Locked
1 reply [Last post]
Sun, 2015-04-26 21:11
Cress
Cress's picture
Offline
newbie
Last seen: 7 years 48 weeks ago
Timezone: GMT+2
Joined: 2015-04-26
Posts: 1
Points: 2

Hi everybody, I found this shine effect on text http://www.zachstronaut.com/lab/shine-css3.html and I'd like to personalize it for my text but I don't actually know how. My text is white with 0.8 alpha and I'd like a shine to pass over it.
Can you explain how the .shine part works, please?

p.shine
{
    font-size: 3em;
    margin: 0 auto;
    width: 700px;
}
 
.shine
{
    background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
    -webkit-background-size: 125px;
 
    color: rgba(255, 255, 255, 0.1);
    -webkit-background-clip: text;
 
    -webkit-animation-name: shine;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}
 
@-webkit-keyframes shine
{
    0%
    {
        background-position: top left;
    }
    100%
    {
        background-position: top right;
    }
}

Top
Tags:
Mon, 2015-05-04 12:33
#1
VeeraM
VeeraM's picture
Offline
Enthusiast
bangalore
Last seen: 7 years 23 weeks ago
bangalore
Timezone: GMT+5.5
Joined: 2014-09-22
Posts: 59
Points: 59

hi the keyframe value are

hi the keyframe value are used in animations
@keyframes shine {
0% {background-color: red; left:0px; top:0px;}
25% {background-color: yellow; left:100px; top:0px;}
50% {background-color: green; left:100px; top:100px;}
75% {background-color: blue; left:0px; top:100px;}
100% {background-color: orange; left:0px; top:0px;}
}

separate div used it ans class name css are create in your coding

Web Design Company Bangalore

Top
  • Locked