Cat in the frame

Memasang Kode Cat in the frame
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;}

header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
margin-top:-20px;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  6px;
background: -moz-linear-gradient(top, #000020 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}

/* GRADIEND */
.ap {
 
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #f6f5ee;  
font-size:  11px;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
} 
 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, red 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #ccc 50%, transparent 90%); 
}

body {
 position: absolute;
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 background: #111;
}
#canvas {
 position: absolute;
 left: 50%;
 top: 50%;
 width: 600px;
 height: 400px;
 margin-left: -300px;
 margin-top: -200px;
 background: rgba(200, 54, 54, 0.5); 
}
#frame {
 position: absolute;
 left: 48%;
 top: 50%;
 width: 700px;
 height: 450px;
 margin-left: -320px;
 margin-top: -225px;
 border-radius: 10px;
 box-shadow: 0px 0px 100px 0px #f00;
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:   rgba(200, 54, 54, 0.5);
 
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
  -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;
  }
}

.contenedor{
  position:relative;
  width:100px;
  height:100px;
 
  margin: 350px;
margin-top:-65px
}
.cat{
  position:absolute;
  margin:0 -1px
}
.cara{
  position:absolute;
    width: 172px;
  height: 162px;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  background:gray;
  border:3px solid #777;
  margin:125px 231px;
  -webkit-animation:sube 3s alternate infinite;
          animation:sube 3s alternate infinite;
}
.ojos {
  position:absolute;
  width:50px;
  height:50px;
  border-radius:100%;
  background:black;
  margin:70px 21px;
  -webkit-animation:cerrar 3s alternate infinite;
          animation:cerrar 3s alternate infinite;
}
.ojos3 {
  position:absolute;
  width:50px;
  height:50px;
  border-radius:100%;
  background:black;
  margin:70px 102px;
  -webkit-animation:cerrar 3s alternate infinite;
          animation:cerrar 3s alternate infinite;
}
.iris{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:100%;
  background:yellow;
  margin:12px 12px;
  -webkit-animation:shake .09s alternate infinite;
          animation:shake .09s alternate infinite;
}
.iris3{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:100%;
  background:yellow;
  margin:12px 25px;
  -webkit-animation:shake .09s alternate infinite;
          animation:shake .09s alternate infinite;
}
.ceja{
  position:absolute;
  width:60px;
  height:35px;
  border-radius:100%;
  background:gray;
  margin:43px 7px;
  -webkit-transform:rotate(-33deg);
          transform:rotate(-33deg)
}
.ceja3{
  position:absolute;
  width:60px;
  height:35px;
  border-radius:100%;
background:gray;
  margin:43px 98px;
  -webkit-transform:rotate(33deg);
          transform:rotate(33deg)
}
.boca{
  position:absolute;
  width:30px;
  height:21px;
  border-radius:100%;
  background: #333;
  margin:121px 72px;
  -webkit-animation:baja 3s alternate infinite;
          animation:baja 3s alternate infinite;
}
.hocico{
  position:absolute;
   height: 0;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  border-bottom: 21px solid #121212;
  border-radius: 100px / 50px;
  margin:112px 65px;
  -webkit-animation:sube 3s alternate infinite;
          animation:sube 3s alternate infinite;
}
.hocico3{
  position:absolute;
  width:35px;
  height:30px;
  border-radius:100%;
  border-right:3px solid black;
  background:#94948c;
  margin:123px 50px;
 -webkit-animation:sube 3s alternate infinite;
         animation:sube 3s alternate infinite;
}
.hocico3::before{
  content:"";
  position:absolute;
  width:35px;
  height:30px;
  border-radius:100%;
  border-left:3px solid black;
  background:#94948c;
  margin:0px 35px
}

.orejas{
  position:absolute;
  width:70px;
  height:90px;
  border-radius:500px 50px 500px 50px;
  background:#f00; 
  border:6px solid gray;
  margin:95px 201px;
  -webkit-transform:rotate(-45deg);
          transform:rotate(-45deg);
-webkit-animation:sube3 3s alternate infinite;
        animation:sube3 3s alternate infinite;
}

.orejas3{
  position:absolute;
  width:70px;
  height:90px;
  border-radius:50px 500px 50px 500px;
  background:#f00; 
  border:6px solid gray;
  margin:95px 350px;
 -webkit-transform:rotate(45deg);
         transform:rotate(45deg);
-webkit-animation:sube3 3s alternate infinite;
        animation:sube3 3s alternate infinite;  
}

.body{
  position:absolute;
   width: 162px;
  height: 212px;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  background:gray;
  border:3px solid #888;
  margin:251px 231px;
}
.legs{
  position:absolute;
  width:35px;
  height:132px;
  border-radius:21px;
  background:gray;
  border:3px solid #777;
  margin:90px 7px;
  -webkit-transform:rotate(12deg);
          transform:rotate(12deg)
}
.legs::before{
  content:"";
  position:absolute;
  width:35px;
  height:132px;
  border-radius:21px;
  background:gray;
  border:3px solid #777;
  margin:-24px 102px;
  -webkit-transform:rotate(-24deg);
          transform:rotate(-24deg)
}
.legs3{
  position:absolute;
  width:90px;
  height:75px;
  border-radius:70px 70px 0 0;
  background:gray;
  border:3px solid #777;
  margin:360px 212px
}
.legs3::before{
  content:"";
  display:block;
  width:121px;
  height:30px;
  border-radius:30px;
  background:gray;
  border-left:3px solid #777;
  border-bottom:3px solid #777;
  margin:70px -21px
  
}
.legs7{
  position:absolute;
  width:90px;
  height:75px;
  border-radius:70px 70px 0 0;
  background:gray;
  border:3px solid #777;
  margin:360px 321px
}
.legs7::before{
  content:"";
  display:block;
  width:121px;
  height:30px;
  border-radius:30px;
  background:gray;
  border-right:3px solid #777;
  border-bottom:3px solid #777;
  margin:70px -21px
  
}
.legs9{
  position:absolute;
  width:40px;
  height:21px;
  border-radius:12px;
  background:gray;
  border:3px solid #777;
  margin:112px -5px;
-webkit-transform:rotate(-12deg);
        transform:rotate(-12deg)
}
.legs9::before{
  content:"";
  position:absolute;
  width:40px;
  height:21px;
  border-radius:12px;
  background:gray;
  border:3px solid #777;
  margin:0px 132px;
 
}
.bigotitos{
  position:absolute;
  width:90px;
  height:30px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:107px -12px;
  -webkit-animation:sube 3s alternate infinite;
          animation:sube 3s alternate infinite;
  
}
.bigotitos::before{
  content:"";
  position:absolute;
  width:70px;
  height:21px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:13px 7px;
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg);
}
.bigotitos::after{
  content:"";
  position:absolute;
  width:70px;
  height:21px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:18px 9px;
   -webkit-transform: rotate(-21deg);
           transform: rotate(-21deg);
}
.bigotitos3{
  position:absolute;
  width:90px;
  height:30px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:107px 90px;  
  -webkit-animation:sube 3s alternate infinite;  
          animation:sube 3s alternate infinite;  
  
}
.bigotitos3::before{
  content:"";
  position:absolute;
  width:70px;
  height:21px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:12px 12px;
    -webkit-transform: rotate(12deg);
            transform: rotate(12deg);
}
.bigotitos3::after{
  content:"";
  position:absolute;
  width:70px;
  height:21px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:16px 13px;
   -webkit-transform: rotate(25deg);
           transform: rotate(25deg);
}
.cola{
  position:absolute;
  width:172px;
  height:121px;
  border-radius:100%;
  border-bottom:35px solid gray;
  margin:300px 360px;
  -webkit-animation:go 3s alternate infinite;
          animation:go 3s alternate infinite;
}
@-webkit-keyframes shake{
  0%{-webkit-transform:scale(1);transform:scale(1)}
  50%{-webkit-transform:scale(.90);transform:scale(.90)}
  75%{-webkit-transform:scale(1);transform:scale(1)}
  
}
@keyframes shake{
  0%{-webkit-transform:scale(1);transform:scale(1)}
  50%{-webkit-transform:scale(.90);transform:scale(.90)}
  75%{-webkit-transform:scale(1);transform:scale(1)}  
}
@-webkit-keyframes sube {
  0%{-webkit-transform:translatey(0px);transform:translatey(0px)}
  100%{-webkit-transform:translatey(-7px);transform:translatey(-7px)}  
}
@keyframes sube {
  0%{-webkit-transform:translatey(0px);transform:translatey(0px)}
  100%{-webkit-transform:translatey(-7px);transform:translatey(-7px)}  
}
@-webkit-keyframes baja {
  0%{-webkit-transform:translatey(0px);transform:translatey(0px)}
  100%{-webkit-transform:translatey(9px);transform:translatey(9px)}  
}
@keyframes baja {
  0%{-webkit-transform:translatey(0px);transform:translatey(0px)}
  100%{-webkit-transform:translatey(9px);transform:translatey(9px)}  
}
@-webkit-keyframes go{
  0%{-webkit-transform:scale(1);transform:scale(1)}
  50%{-webkit-transform:scale(.90);transform:scale(.90)}  
}
@keyframes go{
  0%{-webkit-transform:scale(1);transform:scale(1)}
  50%{-webkit-transform:scale(.90);transform:scale(.90)}  
}
@-webkit-keyframes cerrar {
  0%,25%{opacity:1}
  35%{opacity: 0}
  50%{opacity:1;}
  100%{opacity:1}
}
@keyframes cerrar {
  0%,25%{opacity:1}
  35%{opacity: 0}
  50%{opacity:1;}
  100%{opacity:1}
}
@-webkit-keyframes sube3  {
  0%{margin-top:95px}
   100%{margin-top:85px ;}
  
}
@keyframes sube3  {
  0%{margin-top:95px}
   100%{margin-top:85px ;}  
</style>}

<canvas id="canvas"></canvas>
<div id="frame">
</div>
<div class="contenedor">
<div class="cat">
<div class="cola">
</div>
<div class="legs3">
</div>
<div class="legs7">
</div>
<div class="body">
<div class="legs">
<div class="legs9">
</div>
</div>
</div>
<div class="orejas">
</div>
<div class="orejas3">
</div>
<div class="cara">
<div class="ojos">
<div class="iris">
</div>
</div>
<div class="ojos3">
<div class="iris3">
</div>
</div>
<div class="ceja">
</div>
<div class="ceja3">
</div>
<div class="bigotitos">
</div>
<div class="bigotitos3">
</div>
<div class="boca">
</div>
<div class="hocico3">
</div>
<div class="hocico">
</div>
</div>
</div>
</div>

<div class="ap" id="ap">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Myscript2010"> 
<h2>
<span style="color:#111; font-size: 9pt">CIBEBER CIMAHI</2></a>  
</div>

<header>
<a href="http://demoshow-mys2010.blogspot.co.id/2016/05/bingkai-kucing.html" target="_blank" title="Myscript2010"> 
<h2>
<span style="color:blue; font-size: 8pt">LET'S STUDY</2></a>  
</div>
</header>

Sad kitty code by. Judith Neumann
Photos in the Frame Code by. Gerard Ferrandez

Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here  Cat in the frame  

Category: Cat in the frame

Tweet