'SELAMAT DATANG' di blog ianhacks. Semoga apa yang saya berikan bisa membuat sobat semua lebih maju dan lebih kreatif dalam segala hal..
  • Web
  • ianhacks
  • 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>

    Share this:

    Post a Comment

     
    Copyright © Sharing Ilmu Pengetahuan | Ianhacks. Designed by OddThemes & Best Wordpress Themes 2018