Membuat Efek Teks Berjalan - Marquee Effect dg css3 Animation

All this to the make the current text we always use javascript or marquee effect, this time we will make a different way. CSS3 animation has now evenly supported by almost all browsers will be utilized to create a text effect runs is quite interesting. Css code HAS ALSO been equipped with CSS3 transition to form a more attractive hover effect when the cursor is directed thereon. So that the effect of running text can also be used as a text link, it included Also a function that aims to create a text stop running when the cursor is over the text. You can use css code is in the blog with the store via the "Dashboard - Page Elements - Add a Gadget - HTML / Javascript" or above the code]]> roomates can be done through the box Edit Template "Dasboard - Design / Design - Edit HTML ". If the code is stored above css code]]> please remove the tag opening and closing his style ().



<style type = "text / css">
.boxwadahteks {
padding: 5px 10px;
width: 400px; / * Change the size of the width of the boss if needed * /
background: #aaa;
margin: 10px auto; / * Change the size of the margin if needed * /
border: 2px solid # 555;
overflow: hidden;
}
.GRwadahteks {
float: left;
}
keyframes GRanima_teks {
from {left: 0%;}
to {left: -100%;}
}
@ -o-Keyframes GRanima_teks {
from {left: 0%;}
to {left: -100%;}
}
@ -MS-Keyframes GRanima_teks {
from {left: 0%;}
to {left: -100%;}
}
@ -moz-Keyframes GRanima_teks {
from {left: 0%;}
to {left: -100%;}
}
@ -webkit-Keyframes GRanima_teks {
from {left: 0%;}
to {left: -100%;}
}
.GRwadahteks .GRmlaku {
animation: GRanima_teks 20s infinite linear; / * The greater the time, the more slowly * /
-o-animation: GRanima_teks 20s infinite linear; / * Replace all with the same value (numeral 20s) * /
-MS-Animation: GRanima_teks 20s infinite linear; / * O for opera, ms = IE, Mozilla moz =, = webkit Safari, Chrome * /
-moz-animation: GRanima_teks 20s infinite linear;
-webkit-animation: GRanima_teks 20s infinite linear;
font-size: 24px; / * Text size * /
font-family: arial; / * Font * /
margin-left: 100px;
font-weight: normal; / * Can replace normal with bold to bold text * /
text-shadow: 1px 1px 1px # 000;
color: red; / * Change the text color if desired * /
white-space: nowrap;
display: inline-block;
position: relative;
}
.GRwadahteks .GRmlaku Span {
color: magenta; / * Text color to two - change color if needed * /
font-style: italic; / * Style italic * /
font-family: Serif; / * Font * /
}
.GRwadahteks .GRmlaku A {
color: lime;
text-decoration: none;
}
.GRwadahteks .GRmlaku, .GRwadahteks .GRmlaku Span, .GRwadahteks .GRmlaku a {
transition: color 1s;
-o-transition: color 1s;
-MS-Transition: color 1s;
-moz-transition: color 1s;
-webkit-transition: color 1s;
}
.GRwadahteks: Hover .GRmlaku, .GRwadahteks: .GRmlaku hover span {
color: # fff; / * Text hover color - highlighted when the cursor * /
}
.GRwadahteks: Hover .GRmlaku a {
color: blue; / * Color hover link - highlighted when the cursor * /
}
.GRwadahteks: Hover {.GRmlaku
animation-play-state: paused;
-o-animation-play-state: paused;
-MS-Animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
</ Style>



Use xHTML as follows to write the text to be displayed.

<div class = "boxwadahteks">
<div class = "GRwadahteks">
<div class = "GRmlaku"> Please add here the text you want to display as the <a target="_blank" href="http://gubhugreyot.blogspot.com" title="Klik to be more tutorial!"> </a> running text. <span> In this section, the text will be shaped side with a different color and font type. </ Span> </ div>
</ Div>
</ Div>