Mys2010 on Codepen: Happy Circles | SEO Friendly Responsive Blogger Myscript2010s

Memasang Kode Happy Circles
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 semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut : Get Blank Template. edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 50%, #B20000 0%, #333 100%);
}
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:-8px;
  width: 100%;
text-align: center;
font-size:  6px;
background: -moz-linear-gradient(top, #B20000 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom:-12px;
left: 0;
height: 70px;
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;
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%, #B20000 50%, transparent 90%); 
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#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:24px;
}

#Mys2010 a:hover { background-color: transparent;opacity:0.7; } #Mys2010 img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #Mys2010 img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
   background: #24006B;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}

main {
 margin-top:65px;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
main svg {
  width: 20em;
  height: 20em;
}
.circle-0 {
  stroke: #e27dae;
  stroke-dasharray: 283, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-0 4s 4s linear infinite alternate;
          animation: circleInMotion-0 4s 4s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-0 {
  0%, 40% {
    stroke-dasharray: 283, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -140;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-0 {
  0%, 40% {
    stroke-dasharray: 283, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -140;
    stroke-linecap: butt;
  }
}
.circle-1 {
  stroke: #e283a8;
  stroke-dasharray: 258, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-1 4s 1s linear infinite alternate;
          animation: circleInMotion-1 4s 1s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-1 {
  0%, 40% {
    stroke-dasharray: 258, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -120;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-1 {
  0%, 40% {
    stroke-dasharray: 258, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -120;
    stroke-linecap: butt;
  }
}
.circle-2 {
  stroke: #e289a2;
  stroke-dasharray: 233, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-2 4s 9s linear infinite alternate;
          animation: circleInMotion-2 4s 9s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-2 {
  0%, 40% {
    stroke-dasharray: 233, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -100;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-2 {
  0%, 40% {
    stroke-dasharray: 233, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -100;
    stroke-linecap: butt;
  }
}
.circle-3 {
  stroke: #e2909c;
  stroke-dasharray: 208, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-3 4s 1s linear infinite alternate;
          animation: circleInMotion-3 4s 1s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-3 {
  0%, 40% {
    stroke-dasharray: 208, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -80;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-3 {
  0%, 40% {
    stroke-dasharray: 208, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -80;
    stroke-linecap: butt;
  }
}
.circle-4 {
  stroke: #e29696;
  stroke-dasharray: 183, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-4 4s 2s linear infinite alternate;
          animation: circleInMotion-4 4s 2s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-4 {
  0%, 40% {
    stroke-dasharray: 183, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -60;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-4 {
  0%, 40% {
    stroke-dasharray: 183, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -60;
    stroke-linecap: butt;
  }
}
.circle-5 {
  stroke: #e29c90;
  stroke-dasharray: 158, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-5 4s 6s linear infinite alternate;
          animation: circleInMotion-5 4s 6s linear infinite alternate;
}

@-webkit-keyframes circleInMotion-5 {
  0%, 40% {
    stroke-dasharray: 158, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -40;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-5 {
  0%, 40% {
    stroke-dasharray: 158, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -40;
    stroke-linecap: butt;
  }
}
.circle-6 {
  stroke: #e3a289;
  stroke-dasharray: 133, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-6 4s 9s linear infinite alternate;
          animation: circleInMotion-6 4s 9s linear infinite alternate;
}

@-webkit-keyframes circleInMotion-6 {
  0%, 40% {
    stroke-dasharray: 133, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -20;
    stroke-linecap: butt;
  }
}

@keyframes circleInMotion-6 {
  0%, 40% {
    stroke-dasharray: 133, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -20;
    stroke-linecap: butt;
  }
}
.circle-7 {
  stroke: #e3a883;
  stroke-dasharray: 108, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-7 4s 7s linear infinite alternate;
          animation: circleInMotion-7 4s 7s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-7 {
  0%, 40% {
    stroke-dasharray: 108, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 0;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-7 {
  0%, 40% {
    stroke-dasharray: 108, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 0;
    stroke-linecap: butt;
  }
}
.circle-8 {
  stroke: #e3ae7d;
  stroke-dasharray: 83, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-8 4s 8s linear infinite alternate;
          animation: circleInMotion-8 4s 8s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-8 {
  0%, 40% {
    stroke-dasharray: 83, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 20;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-8 {
  0%, 40% {
    stroke-dasharray: 83, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 20;
    stroke-linecap: butt;
  }
}
.circle-9 {
  stroke: #e3b577;
  stroke-dasharray: 58, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-9 4s 3s linear infinite alternate;
          animation: circleInMotion-9 4s 3s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-9 {
  0%, 40% {
    stroke-dasharray: 58, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 40;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-9 {
  0%, 40% {
    stroke-dasharray: 58, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 40;
    stroke-linecap: butt;
  }
}
.circle-10 {
  stroke: #e3bb71;
  stroke-dasharray: 33, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-10 4s 5s linear infinite alternate;
          animation: circleInMotion-10 4s 5s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-10 {
  0%, 40% {
    stroke-dasharray: 33, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 60;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-10 {
  0%, 40% {
    stroke-dasharray: 33, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 60;
    stroke-linecap: butt;
  }
}
.circle-11 {
  stroke: #e3c16b;
  stroke-dasharray: 8, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-11 4s 4s linear infinite alternate;
          animation: circleInMotion-11 4s 4s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-11 {
  0%, 40% {
    stroke-dasharray: 8, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 80;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-11 {
  0%, 40% {
    stroke-dasharray: 8, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 80;
    stroke-linecap: butt;
  }
}

.circle {
  margin-left: -33px;
    margin-top:48px;
    border-radius: 200px;
  width: 300px;
  height: 300px;
  border: 20px solid #B20000;
  border-radius: 50%;
  position: absolute;
  top: 5%;
  left: 40%;
}
@keyframes circle {
 from {
  transform: scale(0)
 }
 to {
  transform: scale(6)
 }
}
.one {
  animation: circle 4s infinite linear;
}
.two {
  animation: circle 3s infinite linear;
}
.three {
  animation: circle 2s infinite linear;
}
img {
  position: absolute;
  top: 139px;
  left: 575px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ff0;
  width: 211px;
  height: 212px;
  z-index: 3;
  opacity: 1;
  animation: photo-ani 25s forwards;
}
/* Keyframes */
@keyframes line-ani {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes photo-ani {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>

<main rel="main">
  <svg viewBox="0 0 100 100">
    <circle class="circle-0" cx="50" cy="50" r="45" fill="none" stroke-width="3" />
    <circle class="circle-1" cx="50" cy="50" r="41" fill="none" stroke-width="3" />
    <circle class="circle-2" cx="50" cy="50" r="37" fill="none" stroke-width="3" />
    <circle class="circle-3" cx="50" cy="50" r="33" fill="none" stroke-width="3" />
    <circle class="circle-4" cx="50" cy="50" r="29" fill="none" stroke-width="3" />
    <circle class="circle-5" cx="50" cy="50" r="25" fill="none" stroke-width="3" />
    <circle class="circle-6" cx="50" cy="50" r="21" fill="none" stroke-width="3" />
    <circle class="circle-7" cx="50" cy="50" r="17" fill="none" stroke-width="3" />
    <circle class="circle-8" cx="50" cy="50" r="13" fill="none" stroke-width="3" />
    <circle class="circle-9" cx="50" cy="50" r="9" fill="none" stroke-width="3" />
    <circle class="circle-10" cx="50" cy="50" r="5" fill="none" stroke-width="3" />
    <circle class="circle-11" cx="50" cy="50" r="1" fill="none" stroke-width="3" /> 
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
  </svg>
</main>

<div id="image">
<div id="Mys2010">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcKKeko5hNyHpTLfZmUphk35IxjIZBUCCF3aM8Vm3b7xFt6mXadJATtOqj4eJ-g1DqRiYE3pZdNGjYfWzvMiwWrzBY49tyz-sawDkWpTXw3xr8MahxWx-_jkYXBQXaICWDjPrSs-jXvmrX/s1600-r/Jannine-Mys2010.png"  />
</div>
<div class="loader-2">
<div class="loader-text">
<div class="loader">
</div>
<div id='gif'>
</div>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<body translate="no" ><div align="center" style="margin-top:5px">
<audio id="mys2010" src="https://sites.google.com/site/gg1cover/music/Jannine-Weigel-Mys2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/07/happy-circles.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:#f00; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

<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>

Audio Code by. Jereme Causing
Happy Circles Code by. Jan Reimers

Circles ○ Code by. Radimir Bitsov
Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Happy Circles

Category: Happy Circles

Mys2010 on Codepen

Happy Circles

POPULAR

Blog Archive