01/16/16 | Mys2010 on Codepen

keyframes Animations

Memasang Kode Animated Doraemon
Kode ini menanpilkan gambar Doraemon dengan Effect Hover.
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus smua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: -15px;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
margin-top: 5px;
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: -4px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom: 22px;
}

.doraemon {
  cursor: pointer;font-size:20px;width:10em;height:9.9em;
  margin:1.5em auto 10em;position:relative;border-radius:50%;
  background:#fff; 
  box-shadow:
  2.5em 10.7em 0 -3.5em #fff,
  2.5em 10.9em 0 -3.2em #ddd,
  2.5em 10.9em 0 -3.1em #000, 
  -5.9em 4.3em 0 -3.5em #fff,-5.7em 4.4em 0 -3.2em #ddd,
  0 5.5em 0 -4.5em #dd0,0 5.5em 0 -4.4em #000,  
  0 1.2em 0 -1em #000,0 2em 0 -1.3em #d00,0 2.1em 0 -1.3em #000, 
  0 7.1em 0 -1.8em #f8f8f8,0 7.1em 0 -1.2em #26f,-4.6em 5.0em 0 -3.8em #15e,
  -3.3em 5.4em 0 -4em #15e,-1.3em 10.8em 0 -3.6em #26f,-1.3em 11.8em 0 -3.6em #eee,
  3.2em 5.9em 0 -4.0em #26f,3.6em 6.0em 0 -4.0em #26f,3.9em 6.1em 0 -4.0em #26f,
  4.0em 6.2em 0 -4.0em #26f,4.1em 6.3em 0 -4.0em #26f,4.2em 6.4em 0 -4.0em #26f,
  4.3em 6.5em 0 -4.0em #26f,  
  5.4em 7.1em 0 -4.1em #eee,  
  0 1em 0 1em #26f inset,0 7.1em 0 -1.1em #000,0 0 0 0.1em #000,
  -5.7em 4.4em 0 -3.1em #000,5.4em 7.1em 0 -4.0em #000,
  -1.3em 11.8em 0 -3.5em #000,3.2em 5.9em 0 -3.9em #000,
  3.6em 6.0em 0 -3.9em #000,3.9em 6.1em 0 -3.9em #000,
  4.0em 6.2em 0 -3.9em #000,4.1em 6.3em 0 -3.9em #000,
  4.2em 6.4em 0 -3.9em #000,4.3em 6.5em 0 -3.9em #000,
  -4.6em 5.0em 0 -3.7em #000,-3.3em 5.4em 0 -3.9em #000,
  -1.3em 10.8em 0 -3.5em #000,0 0 0 0 transparent}

.doraemon:after {
  font-size:1em;display:block;width:1em;height:1em;position:absolute;
  top:3em;left:4.5em;border-radius:50%;content:"|";line-height:1;color:transparent; 
  text-shadow:0 0em 0 #000,0 0.74em 0 #000,0 0 0 transparent;
  text-align:center;line-height:2.8;
  background:#fff;
  box-shadow:-0.1em 0 0 0.3em #c00 inset, 
  0.9em -1.5em 0 -0.4em #fff,1em -1.3em 0 -0.2em #000,1.1em -1.3em 0 0.5em #fff,
  1.1em -1.3em 0 0.6em #333, 
  -1.1em -1.5em 0 -0.4em #fff,-1em -1.3em 0 -0.2em #000,
  -1em -1.3em 0 0.5em #fff,-1em -1.3em 0 0.6em #333,0 0 0 0 transparent}
.doraemon:before {
  font-size:1em;width:5em;height:2.5em;display:block;margin:5em auto;
  position:absolute;top:1em;left:2.5em;content:"-";color:transparent;
  letter-spacing:-0.26em;
  text-shadow:
  3em -2em 0 #000,3em -2.5em 0 #000,3em -3em 0 #000,
  -3em -2em 0 #000,-3em -2.5em 0 #000,-3em -3em 0 #000,0 0 0 transparent;
  text-align:center;border-radius:0 0 50% 50% / 0 0 100% 100%;
  background:#d33; 
  box-shadow:
  0 2em 0em -1em #c00 inset,0 6.2em 0 0 #f8f8f8,
  0 6.2em 0 0.1em #333,0 0 0 0 transparent}

 
.doraemon, .doraemon:before,
.doraemon:after {
  -webkit-transform: translate3d(0,0,0);-webkit-transition:0.5s;
  -moz-transform: translate3d(0,0,0);-moz-transition:0.5s;
  transform: translate3d(0,0,0);transition:0.5s}
.doraemon:hover, .doraemon:hover:before,
.doraemon:hover:after {
  border-radius: 0;box-shadow:none;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0)}

h3 {
  text-align: center;
  font: bold 30px Sans-Serif;
  padding: 0px 0;
}
.otto {  
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);}
</style>

<div class="doraemon">
</div>
<h3 class="otto">
DORAEMON SINGING</h3>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/01/doraemon.html" target="_blank" title="Menampilkan">
<h2>
<span style="color:orange; font-size: 9pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> DOWNLOAD <a href="https://sites.google.com/site/kodesite/animasi/Doraeomone-Mys2010s.css" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; ANIMATED </a>&nbsp; DORAEMON </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> SOURCE CODE<a href="http://codepen.io/ksksoft/pen/CLuwA" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; ANIMATED </a>&nbsp; DORAEMON </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/laguhiburan/mp3-1/Doraemon.mp3" controls="controls"></audio></div>
</h2>
</div>

<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>   
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>

<script>
      $(function () {
    $('video,audio').mediaelementplayer({
        success: function (mediaElement, domObject) {
            var audio_src = $('li.current').attr('data-url');
            mediaElement.setSrc(audio_src);
            mediaElement.addEventListener('ended', function (e) {
                mys2010PlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mys2010-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mys2010:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mys2010PlayNext(currentPlayer) {
    if ($('.mys2010-list li.current').length > 0) {
        var current_item = $('.mys2010-list li.current:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('if ' + audio_src);
    } else {
        var current_item = $('.mys2010-list li:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('elseif ' + audio_src);
    }
    if ($(current_item).is(':last-child')) {
        $(current_item).removeClass('current');
    } else {
        currentPlayer.setSrc(audio_src);
        currentPlayer.play();
    }
}  
</script>

Doraemon code by. keisuke Takahashi
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Animated Doraemon

Category: Doraemon

Popular Post 2

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

All Sources
Edited by. Myscript2010

LIHAT PADA GAMBAR

Category: Popular Post

Mys2010 on Codepen

keyframes Animations

Animated Doraemon

Popular Post

Popular Post 1

Popular Post 2

POPULAR

Blog Archive