Mys2010 on Codepen

HomeAll Tutorials

Animated Jam

Memasang Kode Digital Clock
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 {
  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:-4px;
  width: 100%;
text-align: center;
font-size: 6px;
background: linear-gradient(270deg,#660099, #660099,#24006B, #660099, #660099);
border-bottom: 3px solid #333;  
-webkit-animation: shadow 6s ease-in-out infinite;
animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height:80px;
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: linear-gradient(270deg,#660099, #660099,#24006B, #660099,#24006B, #660099, #660099);
border-top: 2px solid #24006B;
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #333 50%, transparent 90%); 
-webkit-animation: shadow 1s ease-in-out infinite;
animation: shadow 1s ease-in-out infinite;
}
M-2010, #teks, #posisi, #dibawah, span {
  font: 900 15vw Raleway;
  position: relative;
  display: inline-block;
}
#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:40px;
 -webkit-animation: shadow 16s ease-in-out infinite;
          animation: shadow 16s ease-in-out infinite;
}
@keyframes shadow {
  0% {
    text-shadow: 0 0 2px  #B0E0E6 , 
0 0 8px  #B0E0E6  , 0 0 10px  #B0E0E6 , 
0 0 20px  #B0E0E6 , 0 0 30px  #B0E0E6 , 
0 0 40px  #B0E0E6, 0 0 50px  #B0E0E6 , 
0 0 80px  #B0E0E6;
  }
  50% {
      text-shadow: 0 12px 7px #1919B3, 
0 0 8px     #1919B3, 0 0 10px     #1919B3, 
0 0 20px    #1919B3, 0 0 30px     #1919B3, 
0 0 40px    #1919B3, 0 0 50px     #1919B3, 
0 0 80px    #1919B3;
  }
 100% {
    text-shadow: 0 0 2px     #800080  , 
0 0 8px     #800080  , 0 0 10px     #800080  , 
0 0 20px     #800080  , 0 0 30px     #800080  , 
0 0 40px     #800080  , 0 0 50px     #800080  , 
0 0 80px     #800080  ;
  } 
}

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

html,
body {
  height: 100%;
  background-color: #000;
}
.screen {
  width: 100%;
  height: 100%;
  display: table;
}
.time-display {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
@media only screen and (max-width:3839px) {
  .digit:not(:last-of-type) {
    margin-right: 31.5px;
  }
  .digit {
    width: 192px;
    height: 378px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 150px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 150px;
    height: 21px;
  }
  .digit .vertical {
    width: 21px;
    height: 157.5px;
  }
  .digit .a {
    top: 0;
    left: 21px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -11px;
    border-left: 11px solid #000;
    border-right: 11px solid transparent;
    border-bottom: 21px solid #000;
  }
  .digit .a:after {
    right: -11px;
    border-right: 11px solid #000;
    border-left: 11px solid transparent;
    border-bottom: 21px solid #000;
  }
  .digit .b {
    top: 21px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -11px;
    border-bottom: 11px solid transparent;
    border-left: 21px solid #000;
    border-top: 11px solid #000;
  }
  .digit .b:after {
    bottom: -11px;
    border-top: 11px solid transparent;
    border-left: 21px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .c {
    top: 199.5px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -11px;
    border-bottom: 11px solid transparent;
    border-left: 21px solid #000;
    border-top: 11px solid #000;
  }
  .digit .c:after {
    bottom: -11px;
    border-top: 11px solid transparent;
    border-left: 21px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 21px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -11px;
    border-left: 11px solid #000;
    border-right: 11px solid transparent;
    border-top: 21px solid #000;
  }
  .digit .d:after {
    right: -11px;
    border-right: 11px solid #000;
    border-left: 11px solid transparent;
    border-top: 21px solid #000;
  }
  .digit .e {
    top: 199.5px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -11px;
    border-bottom: 11px solid transparent;
    border-right: 21px solid #000;
    border-top: 11px solid #000;
  }
  .digit .e:after {
    bottom: -11px;
    border-top: 11px solid transparent;
    border-right: 21px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .f {
    top: 21px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -11px;
    border-bottom: 11px solid transparent;
    border-right: 21px solid #000;
    border-top: 11px solid #000;
  }
  .digit .f:after {
    bottom: -11px;
    border-top: 11px solid transparent;
    border-right: 21px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .g {
    top: 178.5px;
    left: 21px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 11px solid transparent;
    border-top: 11px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 11px solid transparent;
    border-top: 11px solid #000;
    border-bottom: 11px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
  }
  .separator {
    width: 21px;
    height: 378px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 42px;
  }
  .separator .dot {
    background: #071205;
    width: 21px;
    height: 21px;
    border-radius: 21px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
@media only screen and (max-width:1519px) {
  .digit:not(:last-of-type) {
    margin-right: 27px;
  }
  .digit {
    width: 156px;
    height: 306px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 120px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 120px;
    height: 18px;
  }
  .digit .vertical {
    width: 18px;
    height: 126px;
  }
  .digit .a {
    top: 0;
    left: 18px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -9px;
    border-left: 9px solid #000;
    border-right: 9px solid transparent;
    border-bottom: 18px solid #000;
  }
  .digit .a:after {
    right: -9px;
    border-right: 9px solid #000;
    border-left: 9px solid transparent;
    border-bottom: 18px solid #000;
  }
  .digit .b {
    top: 18px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -9px;
    border-bottom: 9px solid transparent;
    border-left: 18px solid #000;
    border-top: 9px solid #000;
  }
  .digit .b:after {
    bottom: -9px;
    border-top: 9px solid transparent;
    border-left: 18px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .c {
    top: 162px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -9px;
    border-bottom: 9px solid transparent;
    border-left: 18px solid #000;
    border-top: 9px solid #000;
  }
  .digit .c:after {
    bottom: -9px;
    border-top: 9px solid transparent;
    border-left: 18px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 18px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -9px;
    border-left: 9px solid #000;
    border-right: 9px solid transparent;
    border-top: 18px solid #000;
  }
  .digit .d:after {
    right: -9px;
    border-right: 9px solid #000;
    border-left: 9px solid transparent;
    border-top: 18px solid #000;
  }
  .digit .e {
    top: 162px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -9px;
    border-bottom: 9px solid transparent;
    border-right: 18px solid #000;
    border-top: 9px solid #000;
  }
  .digit .e:after {
    bottom: -9px;
    border-top: 9px solid transparent;
    border-right: 18px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .f {
    top: 18px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -9px;
    border-bottom: 9px solid transparent;
    border-right: 18px solid #000;
    border-top: 9px solid #000;
  }
  .digit .f:after {
    bottom: -9px;
    border-top: 9px solid transparent;
    border-right: 18px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .g {
    top: 144px;
    left: 18px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 9px solid transparent;
    border-top: 9px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 9px solid transparent;
    border-top: 9px solid #000;
    border-bottom: 9px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
  }
  .separator {
    width: 18px;
    height: 306px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 36px;
  }
  .separator .dot {
    background: #071205;
    width: 18px;
    height: 18px;
    border-radius: 18px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
@media only screen and (max-width:1259px) {
  .digit:not(:last-of-type) {
    margin-right: 22.5px;
  }
  .digit {
    width: 110px;
    height: 205px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 80px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 80px;
    height: 15px;
  }
  .digit .vertical {
    width: 15px;
    height: 80px;
  }
  .digit .a {
    top: 0;
    left: 15px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -8px;
    border-left: 8px solid #000;
    border-right: 8px solid transparent;
    border-bottom: 15px solid #000;
  }
  .digit .a:after {
    right: -8px;
    border-right: 8px solid #000;
    border-left: 8px solid transparent;
    border-bottom: 15px solid #000;
  }
  .digit .b {
    top: 15px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -8px;
    border-bottom: 8px solid transparent;
    border-left: 15px solid #000;
    border-top: 8px solid #000;
  }
  .digit .b:after {
    bottom: -8px;
    border-top: 8px solid transparent;
    border-left: 15px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .c {
    top: 110px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -8px;
    border-bottom: 8px solid transparent;
    border-left: 15px solid #000;
    border-top: 8px solid #000;
  }
  .digit .c:after {
    bottom: -8px;
    border-top: 8px solid transparent;
    border-left: 15px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 15px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -8px;
    border-left: 8px solid #000;
    border-right: 8px solid transparent;
    border-top: 15px solid #000;
  }
  .digit .d:after {
    right: -8px;
    border-right: 8px solid #000;
    border-left: 8px solid transparent;
    border-top: 15px solid #000;
  }
  .digit .e {
    top: 110px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -8px;
    border-bottom: 8px solid transparent;
    border-right: 15px solid #000;
    border-top: 8px solid #000;
  }
  .digit .e:after {
    bottom: -8px;
    border-top: 8px solid transparent;
    border-right: 15px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .f {
    top: 15px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -8px;
    border-bottom: 8px solid transparent;
    border-right: 15px solid #000;
    border-top: 8px solid #000;
  }
  .digit .f:after {
    bottom: -8px;
    border-top: 8px solid transparent;
    border-right: 15px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .g {
    top: 95px;
    left: 15px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 8px solid transparent;
    border-top: 8px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 8px solid transparent;
    border-top: 8px solid #000;
    border-bottom: 8px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
  }
  .separator {
    width: 15px;
    height: 205px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 30px;
  }
  .separator .dot {
    background: #071205;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
@media only screen and (max-width:929px) {
  .digit:not(:last-of-type) {
    margin-right: 12px;
  }
  .digit {
    width: 56px;
    height: 104px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 40px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 40px;
    height: 8px;
  }
  .digit .vertical {
    width: 8px;
    height: 40px;
  }
  .digit .a {
    top: 0;
    left: 8px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -4px;
    border-left: 4px solid #000;
    border-right: 4px solid transparent;
    border-bottom: 8px solid #000;
  }
  .digit .a:after {
    right: -4px;
    border-right: 4px solid #000;
    border-left: 4px solid transparent;
    border-bottom: 8px solid #000;
  }
  .digit .b {
    top: 8px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -4px;
    border-bottom: 4px solid transparent;
    border-left: 8px solid #000;
    border-top: 4px solid #000;
  }
  .digit .b:after {
    bottom: -4px;
    border-top: 4px solid transparent;
    border-left: 8px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .c {
    top: 56px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -4px;
    border-bottom: 4px solid transparent;
    border-left: 8px solid #000;
    border-top: 4px solid #000;
  }
  .digit .c:after {
    bottom: -4px;
    border-top: 4px solid transparent;
    border-left: 8px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 8px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -4px;
    border-left: 4px solid #000;
    border-right: 4px solid transparent;
    border-top: 8px solid #000;
  }
  .digit .d:after {
    right: -4px;
    border-right: 4px solid #000;
    border-left: 4px solid transparent;
    border-top: 8px solid #000;
  }
  .digit .e {
    top: 56px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -4px;
    border-bottom: 4px solid transparent;
    border-right: 8px solid #000;
    border-top: 4px solid #000;
  }
  .digit .e:after {
    bottom: -4px;
    border-top: 4px solid transparent;
    border-right: 8px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .f {
    top: 8px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -4px;
    border-bottom: 4px solid transparent;
    border-right: 8px solid #000;
    border-top: 4px solid #000;
  }
  .digit .f:after {
    bottom: -4px;
    border-top: 4px solid transparent;
    border-right: 8px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .g {
    top: 48px;
    left: 8px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 4px solid transparent;
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 4px solid transparent;
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
    white-space: nowrap;
  }
  .separator {
    width: 8px;
    height: 104px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 16px;
    white-space: nowrap;
  }
  .separator .dot {
    background: #071205;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
@media only screen and (max-width: 500px) {
  .digit:not(:last-of-type) {
    margin-right: 6px;
  }
  .digit {
    width: 24px;
    height: 44px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 16px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 16px;
    height: 4px;
  }
  .digit .vertical {
    width: 4px;
    height: 16px;
  }
  .digit .a {
    top: 0;
    left: 4px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -2px;
    border-left: 2px solid #000;
    border-right: 2px solid transparent;
    border-bottom: 4px solid #000;
  }
  .digit .a:after {
    right: -2px;
    border-right: 2px solid #000;
    border-left: 2px solid transparent;
    border-bottom: 4px solid #000;
  }
  .digit .b {
    top: 4px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -2px;
    border-bottom: 2px solid transparent;
    border-left: 4px solid #000;
    border-top: 2px solid #000;
  }
  .digit .b:after {
    bottom: -2px;
    border-top: 2px solid transparent;
    border-left: 4px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .c {
    top: 24px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -2px;
    border-bottom: 2px solid transparent;
    border-left: 4px solid #000;
    border-top: 2px solid #000;
  }
  .digit .c:after {
    bottom: -2px;
    border-top: 2px solid transparent;
    border-left: 4px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 4px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -2px;
    border-left: 2px solid #000;
    border-right: 2px solid transparent;
    border-top: 4px solid #000;
  }
  .digit .d:after {
    right: -2px;
    border-right: 2px solid #000;
    border-left: 2px solid transparent;
    border-top: 4px solid #000;
  }
  .digit .e {
    top: 24px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -2px;
    border-bottom: 2px solid transparent;
    border-right: 4px solid #000;
    border-top: 2px solid #000;
  }
  .digit .e:after {
    bottom: -2px;
    border-top: 2px solid transparent;
    border-right: 4px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .f {
    top: 4px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -2px;
    border-bottom: 2px solid transparent;
    border-right: 4px solid #000;
    border-top: 2px solid #000;
  }
  .digit .f:after {
    bottom: -2px;
    border-top: 2px solid transparent;
    border-right: 4px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .g {
    top: 20px;
    left: 4px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 2px solid transparent;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 2px solid transparent;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
    white-space: nowrap;
  }
  .separator {
    width: 4px;
    height: 44px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 8px;
    white-space: nowrap;
  }
  .separator .dot {
    background: #071205;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
/*Material Card*/
.m-card {
  position: relative;
  overflow: hidden;
  margin: 3em auto 1em auto;
  padding: 1em;
  background-color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  max-width: 450px;
  z-index: 1;
}
.m-card:hover {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.m-card h1 {
  border-bottom: 1px solid #311b92;
}
.m-card h1 #because {
  font-size: 0.35em;
  text-align: center;
  display: block;
  margin-bottom: 0.5em;
  font-weight: 300;
}
.m-card #logo {
  max-width: 300px;
  margin: 0 auto;
  display: block;
}
.m-card h5 {
  margin: 0.5em 0 0.7em;
}
.m-card #file-upload-container {
  cursor: pointer;
  border: 3px dashed #311b92;
  display: block;
  width: 100%;
  height: 200px;
  border-radius: 25px;
  text-align: center;
}
.m-card #file-upload-container input {
  display: none;
}
.m-card #file-upload-container #add-symbol {
  display: block;
  margin: 0 auto;
  height: 70%;
  fill: #616161;
  max-width: 40px;
}
.m-card #file-upload-container #add-symbol:hover {
  fill: #311b92;
}
.m-card #file-upload-container #file-name {
  display: block;
  margin: 0 auto;
  color: #616161;
  max-width: 90%;
  word-break: break-all;
}
.m-card #file-upload-container .file-added {
  color: #212121 !important;
}
.m-card #file-upload-container:hover #add-symbol {
  fill: #311b92;
}
.m-card button {
  width: 100%;
  padding-top: 1.3em;
}
.m-card button #upload-symbol {
  fill: #311b92;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  max-width: 36px;
  max-height: 36px;
  display: inline;
  vertical-align: middle;
  margin-top: -4px;
}
.m-card button span {
  display: inline-block;
}
.m-card button:hover #upload-symbol {
  fill: #fff;
}
.m-card button:hover #upload-symbol #arrow {
  top: -12px;
}
.m-card button.disabled {
  pointer-events: none;
  cursor: default;
  color: #616161;
  border-color: #616161;
  background: #eeeeee;
}
.m-card button.disabled #upload-symbol {
  fill: #616161;
}
.m-card .how-to {
  display: block;
  text-align: center;
  width: 100%;
  margin-top: 1em;
  padding: 0.75em 0;
  font-weight: 300;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.m-card .how-to:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.m-card #how-to {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0!important;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 3;
  padding: 1em;
  display: none;
}
.m-card #how-to h3 {
  border-bottom: 1px solid #212121;
  padding-bottom: 0.25em;
}
.m-card #how-to #close {
  position: absolute;
  top: 1em;
  right: 1em;
}
.m-card #how-to #close #close-symbol {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  max-width: 20px;
  max-height: 20px;
  fill: #616161;
}
.m-card #how-to #close:hover #close-symbol {
  fill: #311b92;
}
.m-card .step {
  float: left;
  width: 100%;
}
.m-card .step img {
  max-width: 120px;
  display: block;
  float: left;
  margin-right: 0.5em;
  border: 1px solid #212121;
}
.m-card .step h6 {
  margin-bottom: 0.5em;
}
.m-card #upload-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 4;
  padding: 1em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
.m-card #upload-animation h3 {
  margin-bottom: 0px;
}
.m-card #upload-animation.show {
  opacity: 1;
}
</style>

<div align="center" style="margin-top:110px">
<div class="screen" id="app">
<div class="time-display">
<div class="hours">
<div class="digit h1">
<div class="segment horizontal a">
</div>
<div class="segment vertical b">
</div>
<div class="segment vertical c">
</div>
<div class="segment horizontal d">
</div>
<div class="segment vertical e">
</div>
<div class="segment vertical f">
</div>
<div class="segment horizontal g">
</div>
</div>
<div class="digit h2">
<div class="segment horizontal a">
</div>
<div class="segment vertical b">
</div>
<div class="segment vertical c">
</div>
<div class="segment horizontal d">
</div>
<div class="segment vertical e">
</div>
<div class="segment vertical f">
</div>
<div class="segment horizontal g">
</div>
</div>
</div>
<div class="separator">
<div class="dot">
</div>
<div class="dot">
</div>
</div>
<div class="minutes">
<div class="digit m1">
<div class="segment horizontal a">
</div>
<div class="segment vertical b">
</div>
<div class="segment vertical c">
</div>
<div class="segment horizontal d">
</div>
<div class="segment vertical e">
</div>
<div class="segment vertical f">
</div>
<div class="segment horizontal g">
</div>
</div>
<div class="digit m2">
<div class="segment horizontal a">
</div>
<div class="segment vertical b">
</div>
<div class="segment vertical c">
</div>
<div class="segment horizontal d">
</div>
<div class="segment vertical e">
</div>
<div class="segment vertical f">
</div>
<div class="segment horizontal g">
</div>
</div>
</div>
<div class="separator">
<div class="dot">
</div>
<div class="dot">
</div>
</div>
<div class="seconds">
<div class="digit s1">
<div class="segment horizontal a">
</div>
<div class="segment vertical b">
</div>
<div class="segment vertical c">
</div>
<div class="segment horizontal d">
</div>
<div class="segment vertical e">
</div>
<div class="segment vertical f">
</div>
<div class="segment horizontal g">
</div>
</div>
<div class="digit s2">
<div class="segment horizontal a">
</div>
<div class="segment vertical b">
</div>
<div class="segment vertical c">
</div>
<div class="segment horizontal d">
</div>
<div class="segment vertical e">
</div>
<div class="segment vertical f">
</div>
<div class="segment horizontal g">
</div>
</div>
</div>
</div>
</div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><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:#fff;"> COPYRIGHT <a href="https://codepen.io/Myscript2010" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/usesitesto/file/Island-Def-Love-Jones-M2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<header>
<a href="http://Link Title" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a> </div>
</header>

<div align="center">
<body translate="no" >
<div align="center" style="margin-top:108px">
<a href="http://Link Title" target="_blank" title="Mari Belajar">
<img class="expando" border="0" src="https://sites.google.com/site/code6916/file/M-2010.png" width="540" height="10">

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-ddaa1eeb67d762ab8aad46508017908c.js">
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<script>
      var currentDate,
    currentHours,
    currentMinutes,
    currentSeconds;
var a = [2,3,5,6,7,8,9,0],
    b = [1,2,3,4,7,8,9,0],
    c = [1,3,4,5,6,7,8,9,0],
    d = [2,3,5,6,8,0],
    e = [6,8,2,0],
    f = [4,5,6,8,9,0],
    g = [2,3,4,5,6,8,9];
var constants = [ [2,3,5,6,7,8,9,0],[1,2,3,4,7,8,9,0],[1,3,4,5,6,7,8,9,0],[2,3,5,6,8,0],[6,8,2,0],[4,5,6,8,9,0],[2,3,4,5,6,8,9] ];
var hours = [],
    minutes = [],
    seconds = [];
var map = ['a','b','c','d','e','f'];
function updateDate(){
    currentDate = new Date();
    currentHours = currentDate.getHours();
    if (currentHours < 10){
        currentHours = '0' + currentHours;
    }
    currentMinutes = currentDate.getMinutes();
    if (currentMinutes < 10){
        currentMinutes = '0' + currentMinutes;
    }
    currentSeconds = currentDate.getSeconds();
    if (currentSeconds < 10){
        currentSeconds = '0' + currentSeconds;
    }
}
function splitDigits(stringVal,array){
    var tempString = stringVal.toString();
    array.length = 0
    for (var i = 0; i < tempString.length; i++) {
        array.push(+tempString.charAt(i));
    }
}
function checkVal(val,array){
    for (var k = 0; k < array.length; k++){
        if (val == array[k]){
            return true;
        }
    }
    return false;
}
function printDigits(array, elem){
    for (var count = 0; count < array.length; count++) {
        for (var segmentCount = 0; segmentCount < 7; segmentCount++){
            if ( checkVal(array[count], constants[segmentCount] ) == true){
                turnOn(elem+(count+1)+' div:nth-of-type('+(segmentCount+1)+')');
            } else {
                turnOff(elem+(count+1)+' div:nth-of-type('+(segmentCount+1)+')');
            }
        }
    };
}
function turnOn(elem){
    $(elem).addClass('on');
}
function turnOff(elem){
    $(elem).removeClass('on');   
}
$( document ).ready(function() {
    setInterval(function(){
         $('.dot').toggleClass('on');
    },1000);
    console.log( checkVal(7,constants[4]) );
    setInterval(function(){
        updateDate();
        splitDigits(currentSeconds,seconds);
        printDigits(seconds,'.s');
        splitDigits(currentMinutes,minutes);
        printDigits(minutes,'.m');
        splitDigits(currentHours,hours);
        printDigits(hours,'.h');
    },1000);

});
</script>

<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="https://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js">
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>SAMPLE

<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
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here  Digital Clock Audio

Category: Animated Jam

Happy New Year 2017

Memasang Kode Happy New Year 2017
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 { background-color: rgba(0, 67, 125, 0.9); } body { text-shadow: 0 0 .4em currentcolor, 0 0 .35em yellow, 0 0 .5em orange, 0 0 1em red, 0 0 2em white; } 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:-4px; width: 100%; text-align: center; font-size: 6px; background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, #660099); border-bottom: 3px solid #333; -webkit-animation: shadow 6s ease-in-out infinite; animation: shadow 6s ease-in-out infinite; } .ap { position: fixed; right: 0; bottom:-19px; left: 0; height:80px; 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: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099, #660099); border-top: 2px solid rgba(46, 56, 79, 0.85); z-index: 9999; } h2 { padding:15px; background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); background: linear-gradient(transparent 10%, #333 50%, transparent 90%); -webkit-animation: shadow 1s ease-in-out infinite; animation: shadow 1s ease-in-out infinite; } M-2010, #teks, #posisi, #dibawah, span { font: 900 15vw Raleway; position: relative; display: inline-block; } #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:40px; } @keyframes shadow { 0% { text-shadow: 0 0 2px #B0E0E6 , 0 0 8px #B0E0E6 , 0 0 10px #B0E0E6 , 0 0 20px #B0E0E6 , 0 0 30px #B0E0E6 , 0 0 40px #B0E0E6, 0 0 50px #B0E0E6 , 0 0 80px #B0E0E6; } 50% { text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8), 0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90), 0 -10px 2px rgba(255, 0, 0, 0.8); } 100% { text-shadow: 0 0 2px #800080 , 0 0 8px #800080 , 0 0 10px #800080 , 0 0 20px #800080 , 0 0 30px #800080 , 0 0 40px #800080 , 0 0 50px #800080 , 0 0 80px #800080 ; } } .shadow-atas:after { content: " "; box-shadow: 0 0 200px 108px #fff; } .shadow-atas:before { content: " "; box-shadow: 0 0 200px 110px #809FFE; } #M2010-shadow-atas { margin:-110px; box-shadow: 0 0 150px 80px #A52A2A; } .shadow-bawah:before,.shadow-bawah:after { z-index:-1; position:absolute; content: " "; bottom:25px; left:10px; width:50%; max-width:110px; box-shadow: 0 0 200px 90px #809FFE; -webkit-transform:rotate(-8deg); -moz-transform:rotate(-8deg); -o-transform:rotate(-8deg); -ms-transform:rotate(-8deg); transform:rotate(-8deg); } .shadow-bawah:after { -webkit-transform:rotate(8deg); -moz-transform:rotate(8deg); -o-transform:rotate(8deg); -ms-transform:rotate(8deg); transform:rotate(8deg); right:10px; left:auto; }
@import url(https://fonts.googleapis.com/css?family=Raleway:100,900); @-webkit-keyframes flip-top { from { -webkit-transform: rotate(50deg) translateY(120vh); transform: rotate(50deg) translateY(120vh); } } @keyframes flip-top { from { -webkit-transform: rotate(50deg) translateY(120vh); transform: rotate(50deg) translateY(120vh); } } @-webkit-keyframes flip-bottom { from { -webkit-transform: rotate(-50deg) translateY(120vh); transform: rotate(-50deg) translateY(120vh); } } @keyframes flip-bottom { from { -webkit-transform: rotate(-50deg) translateY(120vh); transform: rotate(-50deg) translateY(120vh); } } span { font: 900 13vw Raleway; position: relative; display: inline-block; -webkit-perspective: 500px; perspective: 500px; } span:nth-child(odd):before { -webkit-animation-name: flip-top; animation-name: flip-top; } span:nth-child(odd):after { -webkit-animation-name: flip-bottom; animation-name: flip-bottom; } span:nth-child(even):before { -webkit-animation-name: flip-bottom; animation-name: flip-bottom; } span:nth-child(even):after { -webkit-animation-name: flip-top; animation-name: flip-top; } span:nth-child(1n + 0):before { color: #4EC0B6; } span:nth-child(1n + 0):after { color: #4ea4c0; } span:nth-child(2n + 1):before { color: #3967CB; } span:nth-child(2n + 1):after { color: #3c39cb; } span:nth-child(3n + 2):before { color: #FDCD2F; } span:nth-child(3n + 2):after { color: #e8fd2f; } span:nth-child(4n + 3):before { color: #E23942; } span:nth-child(4n + 3):after { color: #e26839; } span:nth-child(1):before { -webkit-animation-delay: 0.88706s; animation-delay: 0.88706s; } span:nth-child(1):after { -webkit-animation-delay: 1.32717s; animation-delay: 1.32717s; } span:nth-child(2):before { -webkit-animation-delay: 1.76318s; animation-delay: 1.76318s; } span:nth-child(2):after { -webkit-animation-delay: 2.19375s; animation-delay: 2.19375s; } span:nth-child(3):before { -webkit-animation-delay: 2.61756s; animation-delay: 2.61756s; } span:nth-child(3):after { -webkit-animation-delay: 3.03328s; animation-delay: 3.03328s; } span:nth-child(4):before { -webkit-animation-delay: 3.43965s; animation-delay: 3.43965s; } span:nth-child(4):after { -webkit-animation-delay: 3.8354s; animation-delay: 3.8354s; } span:nth-child(5):before { -webkit-animation-delay: 4.21932s; animation-delay: 4.21932s; } span:nth-child(5):after { -webkit-animation-delay: 4.59022s; animation-delay: 4.59022s; } span:nth-child(6):before { -webkit-animation-delay: 4.94696s; animation-delay: 4.94696s; } span:nth-child(6):after { -webkit-animation-delay: 5.28843s; animation-delay: 5.28843s; } span:nth-child(7):before { -webkit-animation-delay: 5.61358s; animation-delay: 5.61358s; } span:nth-child(7):after { -webkit-animation-delay: 5.92141s; animation-delay: 5.92141s; } span:nth-child(8):before { -webkit-animation-delay: 6.21098s; animation-delay: 6.21098s; } span:nth-child(8):after { -webkit-animation-delay: 6.48137s; animation-delay: 6.48137s; } span:nth-child(9):before { -webkit-animation-delay: 6.73177s; animation-delay: 6.73177s; } span:nth-child(9):after { -webkit-animation-delay: 6.96139s; animation-delay: 6.96139s; } span:before, span:after { display: block; content: attr(data-text); -webkit-animation: 0.88889s ease-out both; animation: 0.88889s ease-out both; -webkit-animation-name: inherit; animation-name: inherit; text-shadow: 0 0 1em; } span:before { -webkit-clip-path: polygon(0 0 100% 0, 100% 100%); clip-path: polygon(0 0 100% 0, 100% 100%); position: absolute; -webkit-transform-origin: left center; transform-origin: left center; color: #4EC0B6; } span:after { -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 100%, 0 100%); color: #222; -webkit-animation: shadow 5s ease-in-out infinite; animation: shadow 5s ease-in-out infinite; } .M2010 { background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60),#dad,#B20000,green,#dad,#dad,#dad,#dad,#dad,#dad,#dad,green,#B20000, #dad, rgba(255, 0, 0, 0.60), #660099, #660099); -webkit-box-shadow: 0px 1px 91px 15px #dad; -moz-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75); transform:rotate(0deg); border-top:4px solid rgba(46, 56, 79, 0.85); border-bottom:4px solid rgba(46, 56, 79, 0.85); z-index: 9999; margin-top:10px; color: #888; font-size:30px; text-align: center; text-shadow: 0 1px 0 #660099, 0 2px 0 #660099, 0 3px 0 #660099, 0 4px 0 #660099, 0 5px 0 #660099, 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); -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 100%, 0 100%); color: #f00; -webkit-animation: shadow 9s ease-in-out infinite; animation: shadow 9s ease-in-out infinite; }
.text-bawah { background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60),#dad,#B20000,green,green,green,green,green,green,green,green,green,#B20000, #dad, rgba(255, 0, 0, 0.60), #660099, #660099); border-top:4px solid rgba(46, 56, 79, 0.85); border-bottom:4px solid #000; z-index: 9999; font-family: "agency fb", sans-serif; font-size:65px; text-align: center; font-weight: bold; color: #12127D; margin-top:40px; text-transform: uppercase; text-rendering: optimizeLegibility; text-shadow: 0 1px 0 #660099, 0 2px 0 #660099, 0 3px 0 #660099, 0 4px 0 #660099, 0 5px 0 #660099, 0 -1px 0 #858585, 0 1px 10px rgba(0,0,0,.6), 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 7px 10px rgba(0,0,0,.25), 0 15px 10px rgba(0,0,0,.2), 0 25px 15px rgba(0,0,0,.15); -webkit-animation: shadow 6s ease-in-out infinite; animation: shadow 6s ease-in-out infinite; } @-webkit-keyframes shadow { 0% { text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8), 0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90), 0 -1px 2px rgba(255, 0, 0, 0.8); } 50% { text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8), 0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90), 0 -1px 2px rgba(255, 0, 0, 0.8); } 100% { text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8), 0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90), 0 -1px 2px rgba(255, 0, 0, 0.8); } } @keyframes shadow { 0% { text-shadow: 0 0 2px #B0E0E6 , 0 0 8px #B0E0E6 , 0 0 10px #B0E0E6 , 0 0 20px #B0E0E6 , 0 0 30px #B0E0E6 , 0 0 40px #B0E0E6, 0 0 50px #B0E0E6 , 0 0 80px #B0E0E6; }} 50% { text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8), 0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90), 0 -1px 2px rgba(255, 0, 0, 0.8); } 100% { text-shadow: 0 0 2px #B0E0E6 , 0 0 8px #B0E0E6 , 0 0 10px #B0E0E6 , 0 0 20px #B0E0E6 , 0 0 30px #B0E0E6 , 0 0 40px #B0E0E6, 0 0 50px #B0E0E6 , 0 0 80px #B0E0E6; } #wrapper{ margin-left:auto; margin-right:auto; margin-top:99px; width: 750px; height: 194px; padding: 20px; border: 2px solid darkorange; border-radius: 8px; -webkit-box-shadow: 0px 1px 71px 15px #222; -moz-box-shadow: 0px 1px 71px 15px rgba(0, 0, 0, 0.5); } </style>
<div align="center" style="margin-top:110px"> <div id="M2010-shadow-atas"> </div> <div class="shadow-atas"> </div> <div class="shadow-bawah"> </div> </div> </div></div> </div></div>
<div align="center" style="margin-top:200px"> <div id="wrapper"> <span data-text="M"></span> <span data-text="-"></span> <span data-text="2"></span> <span data-text="0"></span> <span data-text="1"></span> <span data-text="0"></span> </div>
<div class="text-bawah"> HAPPY NEW YEAR 2017</div> <h1 class="M2010"> CIBEBER CIMAHI</a> </h1> </div>
<header> <a href="http://Link Title" target="_blank" title="Mari Belajar"> <h2> <span style="color:orange; font-size: 10pt">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:11px; color:#24006B;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">  M - 2010 </a>   DOWNLOAD </a> </div> <div id="posisi"> <span style="font-family: arial ; font-size: 12px; color:#24006B;"> COPYRIGHT <a href="http://codepen.io/Myscript2010"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">  © - 2017 </a>   CODEPEN </a> </div> <h2> <audio id="player" preload="auto"> <source src="https://sites.google.com/site/man349719/song/Out-of-the-Woods-cover-Mix-M2010s.mp3"> </source></h2> </a></div> </div>
<link rel='stylesheet prefetch'href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js'> </script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'> </script><script src="https://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.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) { mejsPlayNext(e.target); }, false); }, keyActions: [] }); $('.mejs-list li').click(function () { $(this).addClass('current').siblings().removeClass('current'); var audio_src = $(this).attr('data-url'); $('audio#mejs:first').each(function () { this.player.pause(); this.player.setSrc(audio_src); this.player.play(); }); }); }); function mejsPlayNext(currentPlayer) { if ($('.mejs-list li.current').length > 0) { var current_item = $('.mejs-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 = $('.mejs-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
Design code is edited by. M - 2010 on Codepen
DEMOSHOW
* If you want to directly copy and paste you canDownload Here Happy New Year 2017

Category: Happy New Year 2017

The Shine Effects

MemasangKode The Shine Effects
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 {
  background-color: rgba(0, 67, 125, 0.9);
}
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:-4px;
  width: 100%;
text-align: center;
font-size: 6px;
background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
  border-bottom: 3px solid #333;  
-webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height:80px;
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: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #333 50%, transparent 90%); 
-webkit-animation: shadow 1s ease-in-out infinite;
         animation: shadow 1s ease-in-out infinite;
}

M-2010, #teks, #posisi, #dibawah, span {
  font: 900 15vw Raleway;
  position: relative;
  display: inline-block;
}
#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:40px;
}
/*end*/ 
.shadow-atas:after { 
    content: " ";
    box-shadow: 0 0 200px 108px #fff;   
}
.shadow-atas:before {  
    content: " ";
    box-shadow: 0 0 200px 110px #809FFE;    
}
#M2010-shadow-atas  { 
margin:-110px;
box-shadow: 0 0 150px 80px  #A52A2A;  
}
.shadow-bawah:before,.shadow-bawah:after {
    z-index:-1;
    position:absolute;
    content: " ";
    bottom:25px;
    left:10px;
    width:50%;     
    max-width:110px;
    box-shadow: 0 0 200px 90px #809FFE;  
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    -o-transform:rotate(-8deg);
    -ms-transform:rotate(-8deg);
    transform:rotate(-8deg);
}
.shadow-bawah:after {
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);
    -o-transform:rotate(8deg);
    -ms-transform:rotate(8deg);
    transform:rotate(8deg);
    right:10px;
    left:auto;}

body:after {
  background: #000;
  content: '';
  height: 100%;
  left: 0;
  opacity: 0;
  padding: 0;
  top: 0;
  visibility: hidden;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
  width: 100%;
}
body.open:after {
  z-index: 10;
  opacity: 0.65;
  height: 100000%;
  visibility: visible
}
.b-nav, body:after {
  position: absolute;
  right: 0;
}
.b-brand, .b-link {
  font-size: 18px;
  font-weight: 700;
  margin-left: 0;
  text-decoration: none;
  font-family: "Roboto Slab", serif;
  text-transform: capitalize;
  ;
}
@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(345px, 0, 0);
    transform: translate3d(345px, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
@keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(345px, 0, 0);
    transform: translate3d(345px, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
* {
  box-sizing: border-box
}
.b-nav {
  background: #000 none repeat scroll 0 0;
  position: absolute;
  top: 0;
  width: 320px;
  z-index: 12;
}
.b-nav:not(.open) {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav {
  animation-duration: .4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft
}
.b-nav ul {
  padding-left: 0px;
}
.b-nav li {
  color: #fff;
  list-style-type: none;
  padding: 10px 10px 10px 0;
  text-align: left;
  -webkit-transform: translateX(345px);
  -ms-transform: translateX(345px);
  transform: translateX(345px)
}
.b-nav li:not(.open) {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav li:not(.open), .b-nav.open li {
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: both
}
.b-nav li:first-child {
  margin-top: 0px
}
.b-nav.open {
  visibility: visible;
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
.b-nav:not(.open) {
  visibility: hidden;
  animation-duration: 0.4s;
  animation-fill-mode: backwards;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav.open li {
  padding-left: 30px;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft
}
.b-link {
  background: 0 0;
  border-left: rgba(255, 255, 255, 0)solid 2px;
  color: #fff;
  transition: all .4s ease;
  width: auto
}
.b-link, .b-menu {
  -webkit-transition: all .4s ease;
}
.b-nav li {
  border-left: 5px solid #e00a12;
}
/*.b-link--active,
.b-link:hover {
    border-left: #e00a12 solid 5px;
    padding-left: 30px
}*/
.b-menu {
  cursor: pointer;
  display: block;
  height: 66px;
  padding-top: 20px;
  position: relative;
  top: -20px;
  transition: all 0.4s ease 0s;
  width: 43px;
  z-index: 12;
  right: 10px;
}
.b-bun--bottom, .b-bun--mid, .b-bun--top {
  height: 2px;
  width: 25px
}
.b-container.open .b-main, .b-menu:hover {}
.b-bun {
  background: #fff;
  transition: all .4s ease
}
.b-brand, .b-bun {
  position: relative;
  -webkit-transition: all .4s ease
}
.b-bun--top {
  top: 0
}
.b-bun--mid {
  top: 8px
}
.b-bun--bottom {
  top: 16px
}
.b-brand {
  color: #2196f3;
  top: -21.43px;
  transition: all .4s ease;
  z-index: 13
}
.b-container {
  position: absolute;
  right: 0;
  top: 20px;
}
.b-container:hover:not(.open) .bun-bottom, .b-container:hover:not(.open) .bun-mid, .b-container:hover:not(.open) .bun-top {
  background: #2196f3
}
.b-container.open .b-bun--top {
  background: #e00a12;
  top: 9px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg)
}
.b-container.open .b-bun--mid {
  opacity: 0
}
.b-container.open .b-bun--bottom {
  background: #e00a12;
  top: 5px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
.b-container.open .b-brand {
  color: #fff
}
.mobile-search-btn {
     background-color: #e00a12;
    border-radius: 4px;
    color: #fff;
    margin-bottom: 25px;
    margin-left: 30px;
    padding: 10px 20px;
    text-transform: uppercase;
  border:none;
}
.mobile-search {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #fff;
    color: #949494;
    font-size: 14px;
    margin-bottom: 20px;
    margin-left: 30px;
    padding: 10px;
    width: 80%;
}

.Mys2010:hover:after, .Mys2010:hover:before {left: 70%;opacity: 1;}
.Mys2010:hover .info:after {-moz-transform: rotate(-200deg);-ms-transform: rotate(-200deg);-webkit-transform: rotate(-200deg);transform: rotate(-200deg);opacity: 1;right: -170%;display: block}
.Mys2010:hover .info:before {opacity: 1;background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);-moz-background-size: 100% 1px, 100% 100%;-o-background-size: 100% 1px, 100% 100%;-webkit-background-size: 100% 1px, 100% 100%;background-size: 100% 1px, 100% 100%;background-repeat: no-repeat;-moz-transition-property: "background, opacity";-o-transition-property: "background, opacity";-webkit-transition-property: "background, opacity";transition-property: "background, opacity";-moz-transition-duration: ".6s, .6s";-o-transition-duration: ".6s, .6s";-webkit-transition-duration: ".6s, .6s";transition-duration: ".6s, .6s"}
.info {background: -moz-linear-gradient(70deg, #no color, #f00);background: -webkit-linear-gradient(70deg, #no color, #f00);background: -ms-linear-gradient(70deg, #no color, #f00);background: -o-linear-gradient(70deg, #no color, #f00);background: linear-gradient(20deg, #no color, #f00);
border-radius: 5px;position: relative;overflow: hidden;box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.9), 0px 0px 10px rgba(0, 0, 0, 0.2);border-left: 2px solid rgba(255, 255, 255, 0.2);border-right: 3px solid rgba(255, 255, 255, 0.4);border-bottom: 2px solid rgba(255, 255, 255, 0.2);padding:52px;font-family: sans-serif}
.info:before {opacity: 0;content: "";position: absolute;pointer-events: none;top: 0;left: 0;right: 0;bottom: 0;background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);-moz-background-size: 100% 1px, 100% 100%;-o-background-size: 100% 1px, 100% 100%;-webkit-background-size: 100% 1px, 100% 100%;background-size: 100% 1px, 100% 100%;background-repeat: no-repeat}
.info:after {opacity: 0;position: absolute;pointer-events: none;top: -200%;width: 400%;right: -105%;bottom: -100%;content: "";background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.4) 50%);background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.4) 50%);background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.4) 50%);-moz-background-size: 50% 100%;-o-background-size: 50% 100%;-webkit-background-size: 50% 100%;background-size: 50% 100%;background-repeat: no-repeat;-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);transform: rotate(-90deg);-moz-transition-property: all;-o-transition-property: all;-webkit-transition-property: all;transition-property: all;-moz-transition-duration: 0.6s;-o-transition-duration: 0.6s;-webkit-transition-duration: 0.6s;transition-duration: 0.6s}
h1 {
  text-align: center;
  font-family: 'Wire One', Helvetica, Arial, sans-serif;
  padding: 0px 0;
}
.M2010 { 
  background: rgba(46, 56, 79, 0.85);
  color: rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 0 #66CDAA,
               0 2px 0 #c9c9c9,
               0 3px 0 #0000CD ,
               0 4px 0 #b9b9b9,
               0 5px 0 #191970 ,
               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); 
  -webkit-animation: shadow 9s ease-in-out infinite;
          animation: shadow 9s ease-in-out infinite;
}   #wrapper{
    margin-left:auto;
    margin-right:auto;
    margin-top:99px;    
    width: 750px;
    height: 220px;
    padding: 20px;
    border: 2px solid darkorange;
    border-radius: 8px;
-webkit-box-shadow: 0px 1px 71px 15px  #222;
-moz-box-shadow:    0px 1px 71px 15px rgba(0, 0, 0, 0.5);
}
</style>

<div align="center" style="margin-top:110px">
<div id="M2010-shadow-atas">
</div> 
<div class="shadow-atas">
</div>
<div class="shadow-bawah">
</div> 
</div>
</div></div>
</div></div>

<div class="mobile-nav">
<div class="b-nav">
<ul>
<li><a class="b-link b-link--active" href="#">Song title</a></li>
<li><a class="b-link" href="http://Link Title">03-Title</a></li> 
<li><a class="b-link" href="http://Link Title">03-Title</a></li> 
<li><a class="b-link" href="http://Link Title">03-Title</a></li> 
<li><a class="b-link" href="http://Link Title">04-Title</a></li>
<li><a class="b-link" href="http://Link Title">05-Title</a></li>
<li><a class="b-link" href="http://Link Title">06-Title</a></li>
<li><a class="b-link" href="http://Link Title">07-Title</a></li>
<li><a class="b-link" href="http://Link Title">08-Title</a></li> 
<li><a class="b-link" href="http://Link Title">09-Title</a></li>
<li><a class="b-link" href="http://Link Title">10-Title</a></li>
<li><a class="b-link" href="http://Link Title">11-Title</a></li>
<li><a class="b-link" href="http://Link Title">12-Title</a></li>
<li><a class="b-link" href="http://Link Title">13-Title</a></li> 
<li><a class="b-link" href="http://Link Title">14-Title</a></li>
<li><a class="b-link" href="http://Link Title">15-Title</a></li>
<li><a class="b-link" href="http://Link Title">16-Title</a></li>
<li><a class="b-link" href="http://Link Title">17-Title</a></li>
<li><a class="b-link" href="http://Link Title">18-Title</a></li> 
</ul>
</div>
<!-- Burger-Icon -->
<div class="b-container">
<div class="b-menu">
<div class="b-bun b-bun--top">
</div>
<div class="b-bun b-bun--mid">
</div>
<div class="b-bun b-bun--bottom">
</div>
</div>
<!-- Burger-Brand -->
<a href="#" class="b-brand"></a>
</div>
</div>

<header>
<a href="http://sample-mys2010.blogspot.co.id/2017/01/the-shine-effects.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

<div align="center" style="margin-top:220px">
<div id="wrapper"> 
<h1 class="M2010">
<div class="Mys2010">
<h1 class="info">
M-2010
</h1>
</div>
</div>
<div align="center" style="margin-top:-51px">
<marquee direction="right" style="background-color:rgba(255, 255, 255, 0);" width="155"><span style="color:#dad;font-size:16px;">2010 CIBEBER CIMAHI</marquee><marquee direction="left" style="background-color:rgba(255, 255, 255, 0);" width="155"><span style="color:#dad;font-size:16px;">CIBEBER CIMAHI 2017</marquee>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family:arial;font-size:11px; color:#24006B;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp;&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#24006B;"> COPYRIGHT <a href="https://codepen.io/Myscript2010"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2017 </a>&nbsp;&nbsp; CODEPEN </a> 
</div>
<h2>
 <audio id="player" preload="auto">
  <source src="https://sites.google.com/site/sule62001/sule2001code/Blowing-in-the-wind-M2010s.mp3">
  </source></h2>
</a></div>
</div>

<script src='https://sites.google.com/site/codesule/lagu/Menu-M2010.js'>
</script>
<link rel='stylesheet prefetch'href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js'>
</script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
<script src="https://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.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) {
                mejsPlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mejs-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mejs:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mejsPlayNext(currentPlayer) {
    if ($('.mejs-list li.current').length > 0) {
        var current_item = $('.mejs-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 = $('.mejs-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
Design code is edited by. M - 2010 on Codepen

DEMOSHOW

* If you want to directly copy and paste you canDownload Here The Shine Effects

Category: THE SHINE EFFECTS

cemetery 7 Dragons Css

Memasang Newspaper-style text
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 {
  background:#111;
}
body {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0OKewNkbMgSwxGLwSR0o6NlAgNp0Lfh3bm82DaiL18NlJ1UvFNFkSjZexauncgjmLT3gbcKHBP4mrIIrDrs30MVexZX2ElHuhmbA9WRK1knJAK36CffEmBRbuLWgp9VjJ5DWdn8PHM3M/s1600/hutan-M2010.jpg");
  background-position:center;
  background-repeat: no-repeat;
  background-size:cover;
  width:900px;
  height:850px;  
}
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:-4px;
  width: 100%;
text-align: center;
font-size: 6px;
background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
  border-bottom: 3px solid #333;  
-webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height:80px;
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: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #333 50%, transparent 90%); 
-webkit-animation: shadow 1s ease-in-out infinite;
          animation: shadow 1s ease-in-out infinite;
} 
M-2010, #teks, #posisi, #dibawah, span {
  font: 11 15vw Raleway;
  position: relative;
  display: inline-block;
}
#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:40px;
}
.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 180px #111;   
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 250px #24006B;    
}
#M2010-shadow  { 
margin:-110px;
box-shadow: 0 0 150px 80px  #B20000;  
}
.shadow1:before,.shadow1:after {
    z-index:-1;
    position:absolute;
    content: " ";
    bottom:25px;
    left:10px;
    width:50%;     
    max-width:110px;
    box-shadow: 0 0 200px 320px #000;  
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    -o-transform:rotate(-8deg);
    -ms-transform:rotate(-8deg);
    transform:rotate(-8deg);
}
.shadow1:after {
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);
    -o-transform:rotate(8deg);
    -ms-transform:rotate(8deg);
    transform:rotate(8deg);
    right:10px;
    left:auto;
}

.kalong-1 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 600px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 45px;
}
.kalong-2 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 390px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 35px;
}
.kalong-3 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 420px;
  left: 0;
  width: 100%;
  height: 180%;
  background-size: auto 25px;
}
 .kalong-4 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 400px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 65px;
}
 .kalong-5 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 450px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 35px;
}
.kalong-6 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 400px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 65px;
}
.kalong-1 {
  -webkit-animation: parallax_kalong linear 70s infinite both;
          animation: parallax_kalong linear 70s infinite both;
}
.kalong-2 {
  -webkit-animation: parallax_kalong linear 15s infinite both;
          animation: parallax_kalong linear 15s infinite both;
}
.kalong-3 {
  -webkit-animation: parallax_kalong linear 100s infinite both;
          animation: parallax_kalong linear 100s infinite both;
}
.kalong-4 {
  -webkit-animation: parallax_kalong linear 40s infinite both;
          animation: parallax_kalong linear 40s infinite both;
}
 .kalong-5 {
  -webkit-animation: parallax_kalong linear 17s infinite both;
          animation: parallax_kalong linear 17s infinite both;
}
 .kalong-6 {
  -webkit-animation: parallax_kalong linear 90s infinite both;
          animation: parallax_kalong linear 90s infinite both;
}
@-webkit-keyframes parallax_kalong {
  0% {
    background-position: -300px 100%;
  }
  100% {
    background-position: 2000px 100%;
  }
}
@keyframes parallax_kalong {
  0% {
    background-position: -300px 100%;
  }
  100% {
    background-position: 2000px 100%;
  }
}

/* AWAN */ 
@import url(https://fonts.googleapis.com/css?family=Oswald);
@keyframes clouds-loop-1 {
  to {
    background-position: -1000px 0;
  }
}
.clouds-1 {
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk0bZwl1peLARm975vg41Dm_AKUCxp4ODWIT5WU-BZpPtmquIN2MIxvueu7rq6AyDME_c1Zo-Ic0sf57JKP2WRypgaq9o2I8HkH9WtFVraWtUXIrKK7JCwVA1PXR7OqsxlL8lLyQfHOnnl/s1600/clouds-M2010.png");
  animation: clouds-loop-1 20s infinite linear;
}
@keyframes clouds-loop-2 {
  to {
    background-position: -1000px 0;
  }
}
.clouds-2 {
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFoXODW8Y1SNpvddub2CrxQjafYfPEbeC15vDXGMXC9Dzx7Q6R_Z9zH3GLOZBKl79xVMPLozbp3KN5hJQnBP_1dQyVowEJqVsAc5gaPpDrfmr18Cfv-CM97ruIecUliCVaFgVqClnv84ak/s1600/clouds2-M2010.png");
  animation: clouds-loop-2 15s infinite linear;
}
@keyframes clouds-loop-3 {
  to {
    background-position: -1579px 0;
  }
}
.clouds-3 {
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhORLv9vmAXNTaZLM1VRC7HqhF6AOWrIj1ydLQcQsD6OFxZMNFXgJ_JochOpC1WhJUlbw_u0Drj7YwnEZe3ZifYHL_UStym5_6YAkW5rNXIdtdE_Z1sjaZw66E9X3Riq7hgNMbAn0tRclI/s1600/awan-biru-mys2010.png");
  animation: clouds-loop-3 17s infinite linear;
}
section.info {
  position: absolute;
  bottom: 0;
  right: 2ch;
  font-size: 60%;
}
section.info dl {
  display: -webkit-flex;
  display: flex;
}
section.info dl dt, section.info dl dd {
  margin: 0;
  padding: 0;
}
section.info dl dt {
  padding-right: 1ch;
}
section.info dl dd {
  padding-right: 4ch;
}
.clouds {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}
.clouds-1,
.clouds-2,
.clouds-3 {
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 500px;
}

@keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-awan-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-awan-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-awan-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-awan-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}
.hitam, .awan {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}
.hitam{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnG6wnUe5meweCh9sO7jYeQa4plIJwkYkJ7NXm-ORmpLndvix5ktXl4iamf3vs48rl9tUJKfyNJFBLr3FtPp6jGfcr_oSLd2R-hqqYeliXX5wjWNc4D-gqBhV0VDjtO01iQjatFOypdPzt/s1600/clouds3-M2010.png) repeat top center;
  z-index:1;
  -moz-animation:move-hitam-back 200s linear infinite;
  -ms-animation:move-hitam-back 200s linear infinite;
  -o-animation:move-hitam-back 200s linear infinite;
  -webkit-animation:move-hitam-back 200s linear infinite;
  animation:move-hitam-back 200s linear infinite;
}
.awan{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhORLv9vmAXNTaZLM1VRC7HqhF6AOWrIj1ydLQcQsD6OFxZMNFXgJ_JochOpC1WhJUlbw_u0Drj7YwnEZe3ZifYHL_UStym5_6YAkW5rNXIdtdE_Z1sjaZw66E9X3Riq7hgNMbAn0tRclI/s1600/awan-biru-mys2010.png) repeat top center;
    z-index:3;
  -moz-animation:move-awan-back 200s linear infinite;
  -ms-animation:move-awan-back 200s linear infinite;
  -o-animation:move-awan-back 200s linear infinite;
  -webkit-animation:move-awan-back 200s linear infinite;
  animation:move-awan-back 200s linear infinite;
}

.pagar-1 {
   -webkit-animation: parallax_bg linear 20s infinite both;
           animation: parallax_bg linear 20s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLkRjUicFkdIT7-U7DBhyhJ89wH2mFxJHwqyExa5l-joHlbHD_z3v1_lC3RaR0ePNUWwPmo9t6gueACk-w73hYhiqSMbw6T8R8OBhoUyJ5QtyOL7SknxO4ym-DTKmMP-G9YGJ7ckymTmk/s1600/Pohon-Kering-M2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-99px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 355px; 
}
.pagar-2 {
   -webkit-animation: parallax_bg linear 20s infinite both;
           animation: parallax_bg linear 20s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLkRjUicFkdIT7-U7DBhyhJ89wH2mFxJHwqyExa5l-joHlbHD_z3v1_lC3RaR0ePNUWwPmo9t6gueACk-w73hYhiqSMbw6T8R8OBhoUyJ5QtyOL7SknxO4ym-DTKmMP-G9YGJ7ckymTmk/s1600/Pohon-Kering-M2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-99px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 460px; 
}

.animation-mys2010 {position:absolute;bottom:0;width:100   ; }
.window {position:absolute;left:330px;top:220px;}
.bugaloos { position:absolute;left:830px;top:80px;
  animation-name: float;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;}
  .backwall {position:absolute;width:6%;height:60%;}
@keyframes float {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
  100% {
    transform:translateY(0);
  }
}

.Flying-mys2010 {
 z-index: 600;
 cursor: pointer;
 -webkit-animation: Flying-mys2010 38s infinite linear;
 -moz-animation: Flying-mys2010 38s infinite linear;
 -ms-animation: Flying-mys2010 38s infinite linear;
 -o-animation: Flying-mys2010 38s infinite linear;
 animation: Flying-mys2010 38s infinite linear;
 bottom: 10%;
 left: 0%;
 position: absolute;}
@keyframes Flying-mys2010 {
25% {
bottom: 80%;
left: 85%;
transform: rotateY(0deg);
}
26% {
transform: rotateY(180deg);
}
50% {
 bottom:60%;
 left: 0%;
 transform: rotateY(180deg);
}
51% {
 transform: rotateY(0deg);
}
75% {
 bottom:40%;
 left: 85%;
 transform: rotateY(0deg);
}
76% {
 bottom:40%;
 left: 85%;
 transform: rotateY(180deg);
}
99% {
 transform: rotateY(180deg);}}

@keyframes float {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
  100% {
    transform:translateY(0);
  }
}
</style>

<div align="center" style="margin-top:110px">
<div class="shadow1">
</div>
<div id="M2010-shadow">
</div>
<div align="center">
<div class="shadow-top">
</div>
<div class="M-logo"> 
</div>
</div></div>
</div></div></div>
<div class="hitam">
</div>
<div class="awan">
</div>
<div class="parallax kalong-1">
</div>
<div class="parallax kalong-2">
</div>
<div class="parallax kalong-3">
</div>
<div class="parallax kalong-4">
</div>
<div class="parallax kalong-5">
</div>
<div class="parallax kalong-6">
</div>
<div class="animated"> 
<canvas id="c">Dragon</canvas>
<div class='clouds'>
<div class='clouds-1'>
</div>
<div class='clouds-2'>
</div>
<div class='clouds-3'>
</div>
</div>

<div id="animation-mys2010">
<div class="insidewalls" id="animation-mys2010">
<img border="0" class="bugaloos" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif" height="49" name="e902" width="48">
<div id="Flying-mys2010" class="Right Left">
<img class="Flying-mys2010" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif" name="e902" border="0" width="60" height="90"></a>

<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"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>
 <audio id="player" preload="auto">
  <source src="https://sites.google.com/site/sulelagu042/l/Scarborough-fair-Cover-M2010.mp3">
  </source></h2>
</a></div>
</div>
<header>
<a href="https://sites.google.com/site/sule62001/sule2001code/Mylogo-M2010.png" target="_blank" title="My Logo">
<h2>
<span style="color:orange; font-size: 10pt">Let's Study</a>  </h2>
</a>  
</div>
</header>
<div class="parallax pagar-1">
</div>
<div class="parallax pagar-2">
</div>

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<script src="https://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js">
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>

<script>
      // full source for entry into js1k dragons: http://js1k.com/2014-dragons/demo/1837
// thanks to simon for grunt help and sean for inspiration help
// js1k shim
var a = document.getElementsByTagName('canvas')[0];
var b = document.body;
var d = function(e){ return function(){ e.parentNode.removeChild(e); }; }(a);
// unprefix some popular vendor prefixed things (but stick to their original name)
var AudioContext =
    window.AudioContext ||
    window.webkitAudioContext;
var requestAnimationFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(f){ setTimeout(f, 1000/30); };
// stretch canvas to screen size (once, wont onresize!)
a.style.width = (a.width = innerWidth - 0) + 'px';
a.style.height = (a.height = innerHeight - 0) + 'px';
var c = a.getContext('2d');
// end shim
var sw = a.width, 
sh = a.height, 
M = Math,
Mc = M.cos,
Ms = M.sin,
ran = M.random,
pfloat = 0, 
pi = M.PI, 
dragons = [], 
shape = [],
loop = function() {
  a.width = sw; // clear screen
  for ( j = 0; j < 7; j++) {
    if ( !dragons[j] ) dragons[j] = dragon(j); // create dragons initially
    dragons[j]();
  }
  pfloat++;
  requestAnimationFrame(loop);
},
dragon = function(index) {
  var scale = 0.1 + index * index / 49, 
    gx = ran() * sw / scale, 
    gy = sh / scale, 
    lim = 300, // this gets inlined, no good!
    speed = 3 + ran() * 5, 
    direction = pi, //0, //ran() * pi * 2, //ran(0,TAU), 
    direction1 = direction, 
    spine = [];
  return function() {
    // check if dragon flies off screen 
    if (gx < -lim || gx > sw / scale + lim || gy < -lim || gy > sh / scale + lim) {
      // flip them around
      var dx = sw / scale / 2 - gx,
        dy = sh / scale / 2 - gy;
      direction = direction1 = M.atan(dx/dy) + (dy < 0 ? pi : 0);
    } else {
       direction1 += ran() * .1 - .05;
       direction -= (direction - direction1) * .1;
    }
    // move the dragon forwards
    gx += Ms(direction) * speed;
    gy += Mc(direction) * speed;
    // calculate a spine - a chain of points
    // the first point in the array follows a floating position: gx,gy
    // the rest of the chain of points following each other in turn
    for (i=0; i < 70; i++) {
      if (i) {
        if (!pfloat) spine[i] = {x: gx, y: gy}
        var p = spine[i - 1],
          dx = spine[i].x - p.x,
          dy = spine[i].y - p.y,
          d = M.sqrt(dx * dx + dy * dy),
          perpendicular = M.atan(dy/dx) + pi / 2 + (dx < 0 ? pi : 0);
        // make each point chase the previous, but never get too close
        if (d > 4) {
          var mod = .5;
        } else if (d > 2){
          mod = (d - 2) / 4;
        } else {
          mod = 0;
        }
        spine[i].x -= dx * mod;
        spine[i].y -= dy * mod;
        // perpendicular is used to map the coordinates on to the spine
        spine[i].px = Mc(perpendicular);
        spine[i].py = Ms(perpendicular);
        if (i == 20) { // average point in the middle of the wings so the wings remain symmetrical
          var wingPerpendicular = perpendicular;
        }
      } else {
        // i is 0 - first point in spine
        spine[i] = {x: gx, y: gy, px: 0, py: 0}; 
      }
    }
    // map the dragon to the spine
    // the x co-ordinates of each point of the dragon shape are honoured
    // the y co-ordinates of each point of the dragon are mapped to the spine
    c.moveTo(spine[0].x,spine[0].y)
    for (i=0; i < 154; i+=2) { // shape.length * 2 - it's symmetrical, so draw up one side and back down the other
      if (i < 77 ) { // shape.length
        // draw the one half from nose to tail
        var index = i; // even index is x, odd (index + 1) is y of each coordinate
        var L = 1;
      } else {
        // draw the other half from tail back to nose
        index = 152 - i;  
        L = -1;
      }
      var x = shape[index];
      var spineNode = spine[shape[index+1]]; // get the equivalent spine position from the dragon shape
      if (index >= 56) {  // draw tail
        var wobbleIndex = 56 - index; // table wobbles more towards the end
        var wobble = Ms(wobbleIndex / 3 + pfloat * 0.1) * wobbleIndex * L;
        x = 20 - index / 4 + wobble;
        // override the node for the correct tail position
        spineNode = spine[ index * 2 - 83 ];
      } else if (index > 13) {  // draw "flappy wings"
        // 4 is hinge point
        x = 4 + (x-4) * (Ms(( -x / 2 + pfloat) / 25 * speed / 4) + 2) * 2; // feed x into sin to make wings "bend"
        // override the perpindicular lines for the wings
        spineNode.px = Mc(wingPerpendicular);
        spineNode.py = Ms(wingPerpendicular);
      }
      c.lineTo(
        (spineNode.x + x * L * spineNode.px) * scale, 
        (spineNode.y + x * L * spineNode.py) * scale
      );}
    c.fill();
  }
}
// the shape of the dragon, converted from a SVG image
'! ((&(&*$($,&.)/-.0,4%3"7$;(@/EAA<?:<9;;88573729/7,6(8&;'.split("").map(function(a,i) {
  shape[i] = a.charCodeAt(0) - 32;
});
loop();     
    </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
Sound of music by. Nox Arcana
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here cemetery 7Dragons Css

Category: cemetery 7 Dragons Css

Animated Jam

Happy New Year 2017

The Shine Effects

cemetery 7 Dragons Css

POPULAR

Blog Archive