[mw_shl_code=css,true] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; bantalan:0; }
.container{ width:750px; tinggi: 200px; margin: 30px otomatis; meluap:tersembunyi; latar belakang:#000; posisi:relatif; }
.eyesBoxs{width:130px; tinggi: 70px; posisi:absolut; atas: 50px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profil{
lebar: 130px;
tinggi: 70px;
latar belakang:#fff;
posisi:absolut;
atas: 0;
kiri:0;
meluap:tersembunyi;
jari-jari batas:0 70px 0 50px;
}
.bayangan{
tampilan: blok;
lebar: 130px;
tinggi: 70px;
posisi:absolut;
atas: 0;
z-indeks:5;
jari-jari batas:0 90px 0 60px;
kotak-bayangan: 5px 12px 2px 5px rgba(0,0,0,.25) inset;
}
.skewLeft{
transformasi: skewX (15 derajat);
-webkit-transform:skewX (15 derajat);
-o-transformasi: miringX (15 derajat);
}
.skewRight{
transformasi: skala miringX (-15 derajat) (-1,1);
-webkit-transform:skewX(-15deg) skala(-1,1);
-o-transformasi: skala skewX (-15 derajat) (-1,1);
}
.basic{
lebar: 60px;
tinggi: 60px;
latar belakang:#000;
posisi:absolut;
atas: 50%;
kiri: 50%;
z-indeks:10;
margin-atas: -30px;
jari-jari batas: 60%;
}
.basic:before{
konten:"";
tampilan: blok;
lebar: 10px;
tinggi: 11px;
posisi:absolut;
kiri:15px;
atas: 15px;
z-indeks:100;
jari-jari batas: 60%;
Gambar latar belakang:Gradien radial (lingkaran, rgb (225,225,225),rgb (225,225,225,225),rgba (225,225,225,0.9),rgba (225,225,225,0.3));
-webkit-background-image:gradien-radial(lingkaran,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
-o-background-image:radial-gradient (lingkaran, rgb (225,225,225),rgb (225,225,225),rgba (225,225,225,0.9),rgba(225,225,225,0.3));
}
.pullLeft .basic{
margin-kiri:-33px;
}
.pullRight .basic{
margin-kiri:-27px;
}
.mata{
lebar: 55px;
tinggi: 55px;
latar belakang:#ff0000;
posisi:absolut;
atas: 8px;
jari-jari batas: 60%;
box-shadow:0 0 2px 4px #bd0000 inset,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullRight .eyes{right:35px; }
.mata .line{
lebar: 64%;
tinggi: 64%;
latar belakang:#ff0000;
posisi:absolut;
kanan:0;
kiri:0;
atas: 10px;
margin:0 otomatis;
jari-jari batas: 60%;
box-shadow:0 0 2px 0 #b20000 inset;
}
.eyes .line:before{
konten:"";
tampilan: blok;
lebar: 10px;
tinggi: 11px;
posisi:absolut;
kiri:3px;
atas:4px;
z-indeks:100;
jari-jari batas: 60%;
Gambar latar belakang:Gradien radial (lingkaran, rgb (225,225,225),rgb (225,225,225,225),rgba (225,225,225,0.7),rgba(225,225,225,0.3));
-webkit-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
-o-background-image:radial-gradient (lingkaran, rgb (225,225,225),rgb (225,225,225),rgba (225,225,225,0.7),rgba(225,225,225,0.3));
}
.eyes .line:after{
konten:"";
tampilan: blok;
lebar: 10px;
tinggi: 10px;
posisi:absolut;
latar belakang:#000;
kanan:0;
kiri:-1px;
atas:13px;
z-indeks:100;
margin:0 otomatis;
jari-jari batas: 60%;
mengubah: putar (150 derajat);
-webkit-transform: putar (150 derajat);
-o-transformasi: putar (150 derajat);
animasi: warna 20s kemudahan tanpa batas;
-webkit-animasi: warna 20s ease-in tak terbatas;
-o-animasi: warna 20s mudah-dalam tak terbatas;
}
@keyframes warna{
0%{latar belakang:#000; }
35%{latar belakang:#000; }
40%{latar belakang:#f00; }
100%{latar belakang:#f00; }
}
@-webkit-keyframes warna{
0%{latar belakang:#000; }
35%{latar belakang:#000; }
40%{latar belakang:#f00; }
100%{latar belakang:#f00; }
}
@-o-keyframe warna{
0%{latar belakang:#000; }
35%{latar belakang:#000; }
40%{latar belakang:#f00; }
100%{latar belakang:#f00; }
}
/*******三勾玉 开始*******/
.hook{
lebar: 92%;
tinggi: 92%;
posisi:absolut;
kanan:0;
kiri:0;
atas: 5%;
margin:0 otomatis;
jari-jari batas: 60%;
}
.hook .bar{
tampilan: blok;
lebar: 100%;
tinggi: 100%;
posisi:absolut;
kiri:0;
atas: 0;
jari-jari batas: 60%;
}
.hook .bar b{
tampilan: blok;
lebar: 8px;
tinggi: 8px;
latar belakang:#000;
posisi:absolut;
kiri:0;
bawah:0;
jari-jari batas: 60%;
}
.hook .bar b:setelah{
konten:"";
lebar: 8px;
tinggi: 8px;
warna perbatasan: transparan transparan #000 transparan;
gaya perbatasan: padat;
lebar batas:0 0 5px 0;
posisi:absolut;
atas: -1px;
kiri:-3px;
z-indeks:100;
jari-jari perbatasan:0 0 0 70%;
mengubah: memutar (-75 derajat);
-webkit-transform: putar (-75 derajat);
-o-transformasi: putar (-75 derajat);
}
.hook .bar:nth-child(1){
transformasi: putar (10 derajat);
-webkit-transform: putar (10 derajat);
-o-transformasi: putar (10 derajat);
}
.hook .bar:nth-child(2){
transformasi: putar (130 derajat);
-webkit-transform: putar (130 derajat);
-o-transformasi: putar (130 derajat);
}
.hook .bar:nth-child(3){
Mengubah: Putar (250 derajat);
-webkit-transform: putar (250 derajat);
-o-transformasi: putar (250 derajat);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tabung {
lebar: 93%;
tinggi: 93%;
posisi:absolut;
kanan:0;
kiri:0px;
atas: 2px;
margin:0 otomatis;
latar belakang:#000;
jari-jari batas: 60%;
}
.tube .bar{
tampilan: blok;
lebar: 10px;
tinggi: 20px;
gaya perbatasan: padat;
lebar batas:0 0 0 10px;
warna batas: transparan transparan transparan hitam ;
posisi:absolut;
jari-jari perbatasan: 100% 0 0 0;
}
.tube .bar:nth-child(1){
atas: -10px;
kiri:2px;
mengubah: putar (-10 derajat);
}
.tube .bar:nth-child(2){
bawah:0px;
kanan:-10px;
mengubah: putar (105 derajat);
-webkit-transform: putar (105 derajat);
-o-transformasi: putar (105 derajat);
}
.tabung .bar:nth-child(3){
bawah: -3px;
kiri:-10px;
mengubah: putar (235 derajat);
-webkit-transform: putar (235 derajat);
-o-transformasi: putar (235 derajat);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
lebar: 130px;
tinggi: 70px;
posisi:absolut;
meluap:tersembunyi;
atas: 0;
kiri:0;
jari-jari batas:0 70px 0 50px;
}
.trans .bar{
tampilan: blok;
lebar: 9px;
tinggi:9px;
latar belakang:#000;
posisi:absolut;
atas: 50%;
z-indeks:2;
margin:-4px 0 0 -4px;
jari-jari batas: 60%;
}
.trans .bar:setelah{
konten:"";
tampilan: blok;
lebar: 11px;
tinggi: 12px;
posisi:absolut;
atas: -13px;
kiri:-13px;
z-indeks:100;
jari-jari batas: 60%;
latar belakang: rgba(250,250,250,.85);
}
.pullLeft .trans .bar{
transformasi: miringX (-15 derajat);
-webkit-transform:skewX(-15deg);
-o-transformasi: miringX (-15 derajat);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
transformasi: skala miringX (-15 derajat) (-1,1);
-webkit-transform:skewX(-15deg) skala(-1,1);
-o-transformasi: skala skewX (-15 derajat) (-1,1);
}
.pullRight .trans .bar{kanan:48%; }
/*******轮回眼 结束*******/
.ani-sempit{
animasi: ani-sempit 20-an mudah-keluar tak terbatas;
-webkit-animasi: ani-sempit 20-an ease-out tak terbatas;
-o-animasi: ani-sempit 20-an ease-out tak terbatas;
}
@keyframes ani-narrow{
0%{opacity:1; mengubah:skala(1); }
5%{opacity:1; mengubah:skala(1); }
10%{opacity:0; mengubah:skala(0); }
87%{opacity:0; mengubah:skala(0); }
90%{opacity:1; mengubah:skala(1); }
100%{opacity:1; mengubah:skala(1); }
}
@-webkit-keyframes ani-narrow{
0%{opacity:1; -webkit-transform:skala(1); }
5%{opacity:1; -webkit-transform:skala(1); }
10%{opacity:0; -webkit-transform:skala(0); }
87%{opacity:0; -webkit-transform:skala(0); }
90%{opacity:1; -webkit-transform:skala(1); }
100%{opacity:1; -webkit-transform:skala(1); }
}
@-o-keyframes ani-narrow{
0%{opacity:1; -o-transformasi:skala(1); }
5%{opacity:1; -o-transformasi:skala(1); }
10%{opacity:0; -o-transformasi: skala (0); }
87%{opacity:0; -o-transformasi: skala (0); }
90%{opacity:1; -o-transformasi:skala(1); }
100%{opacity:1; -o-transformasi:skala(1); }
}
.ani-zoom{
animasi: ani-zoom 20s linier tak terbatas;
-webkit-animasi: ani-zoom 20s linear tak terbatas;
-o-animasi: ani-zoom 20s linier tak terbatas;
}
@keyframes ani-zoom{
0%{opacity:0; mengubah:skala(0); }
5%{opacity:0; mengubah:skala(0); }
8%{opacity:1; mengubah:skala(1); }
60%{opacity:1; mengubah:skala(1); }
62%{opacity:0; transformasi: skala (1.5); }
100%{opacity:0; mengubah:skala(0); }
}
@-webkit-keyframes ani-zoom{
0%{opacity:0; -webkit-transform:skala(0); }
5%{opacity:0; -webkit-transform:skala(0); }
8%{opacity:1; -webkit-transform:skala(1); }
60%{opacity:1; -webkit-transform:skala(1); }
62%{opacity:0; -webkit-transform:skala(1.5); }
100%{opacity:0; -webkit-transform:skala(0); }
}
@-o-keyframes ani-zoom{
0%{opacity:0; -o-transformasi: skala (0); }
5%{opacity:0; -o-transformasi: skala (0); }
8%{opacity:1; -o-transformasi:skala(1); }
60%{opacity:1; -o-transformasi:skala(1); }
62%{opacity:0; -o-transformasi: skala (1.5); }
100%{opacity:0; -o-transformasi: skala (0); }
}
.ani-rotateHook{
animasi:ani-rotateHook 20s ease-in tak terbatas;
-webkit-animation:ani-rotateHook 20s ease-in tak terbatas;
-o-animation:ani-rotateHook 20s ease-in tak terbatas;
}
@keyframes ani-rotateHook{
0%{opacity:0; transformasi: skala (0) putar (0); }
9%{opacity:0; transformasi: skala (0) putar (0); }
13%{opacity:1; mengubah: skala (1) memutar (-360 derajat); }
35%{opacity:1; mengubah: skala (1) memutar (-360 derajat); }
38%{opacity:0; transformasi: skala (1.8) putar (-540 derajat); }
100%{opacity:0; transformasi: skala (0) putar (0); }
}
@-webkit-keyframes ani-rotateHook{
0%{opacity:0; -webkit-transform:skala(0) memutar(0); }
9%{opacity:0; -webkit-transform:skala(0) memutar(0); }
13%{opacity:1; -webkit-transform: skala (1) putar (-360 derajat); }
35%{opacity:1; -webkit-transform: skala (1) putar (-360 derajat); }
38%{opacity:0; -webkit-transform: skala (1.8) putar (-540 derajat); }
100%{opacity:0; -webkit-transform:skala(0) memutar(0); }
}
@-o-keyframe ani-rotateHook{
0%{opacity:0; -o-transformasi: skala (0) putar (0); }
9%{opacity:0; -o-transformasi: skala (0) putar (0); }
13%{opacity:1; -o-transformasi: skala (1) putar (-360 derajat); }
35%{opacity:1; -o-transformasi: skala (1) putar (-360 derajat); }
38%{opacity:0; -o-transformasi: skala (1.8) berputar (-540 derajat); }
100%{opacity:0; -o-transformasi: skala (0) putar (0); }
}
.ani-rotateTube{
animasi: ani-rotateTube 20s ease-in-out tak terbatas;
-webkit-animasi:ani-rotateTube 20s ease-in-out tak terbatas;
-o-animation:ani-rotateTube 20s ease-in-out tak terbatas;
}
@keyframes ani-rotateTube{
0%{opacity:0; transformasi: skala (0) putar (0); }
35%{opacity:0; transformasi: skala (0) putar (0); }
40%{opacity:1; mengubah: skala (1) memutar (-360 derajat); }
60%{opacity:1; mengubah: skala (1) memutar (-360 derajat); }
100%{opacity:1; mengubah: skala (1) memutar (-360 derajat); }
}
@-webkit-keyframes ani-rotateTube{
0%{opacity:0; -webkit-transform:skala(0) memutar(0); }
35%{opacity:0; -webkit-transform:skala(0) memutar(0); }
40%{opacity:1; -webkit-transform: skala (1) putar (-360 derajat); }
60%{opacity:1; -webkit-transform: skala (1) putar (-360 derajat); }
100%{opacity:1; -webkit-transform: skala (1) putar (-360 derajat); }
}
@-o-keyframes ani-rotateTube{
0%{opacity:0; -o-transformasi: skala (0) putar (0); }
35%{opacity:0; -o-transformasi: skala (0) putar (0); }
40%{opacity:1; -o-transformasi: skala (1) putar (-360 derajat); }
60%{opacity:1; -o-transformasi: skala (1) putar (-360 derajat); }
100%{opacity:1; -o-transformasi: skala (1) putar (-360 derajat); }
}
.ani-bayangan{
animasi: ani-shadow 20s linear tak terbatas;
-webkit-animasi:ani-shadow 20-an linier tak terbatas;
-o-animasi: ani-shadow 20s linier tak terbatas;
}
@keyframes ani-shadow{
0%{opacity:0; bayangan-kotak:tidak ada; }
58%{opacity:0; bayangan-kotak:tidak ada; }
64%{opacity:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
87%{opacity:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
90%{opacity:0; bayangan-kotak:tidak ada; }
100%{opacity:0; bayangan-kotak:tidak ada; }
}
@-webkit-keyframes ani-shadow{
0%{opacity:0; bayangan-kotak:tidak ada; }
58%{opacity:0; bayangan-kotak:tidak ada; }
64%{opacity:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
87%{opacity:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
90%{opacity:0; bayangan-kotak:tidak ada; }
100%{opacity:0; bayangan-kotak:tidak ada; }
}
@-o-keyframe ani-shadow{
0%{opacity:0; bayangan-kotak:tidak ada; }
58%{opacity:0; bayangan-kotak:tidak ada; }
64%{opacity:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
87%{opacity:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
90%{opacity:0; bayangan-kotak:tidak ada; }
100%{opacity:0; bayangan-kotak:tidak ada; }
}
.ani-sempit, .ani-zoom, .ani-putar Hook,
.ani-rotateTube,.ani-shadow,.eyes .line:after{
mode pengisian animasi:maju;
-webkit-animasi-isi-mode:keduanya;
-o-animasi-isi-mode:keduanya;
}
</style>
</head>
<body>
<div class="kontainer">
<!-- mata kiri dimulai - >
<div class="eyesBoxs pullLeft">
<div class="profil skewLeft"></div>
<div class="shadow skewLeft"></div>
<div class="basic ani-narrow"></div>
<div class="mata ani-zoom">
<div class="garis">
<div class="hook ani-rotateHook">
<span class="bar"><b></b></span>
<span class="bar"><b></b></span>
<span class="bar"><b></b></span>
</div>
<div class="tabung ani-rotateTube">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>
<div class="trans skewLeft">
<span class="bar ani-shadow"></span>
</div>
</div>
<!-- ujung mata kiri - >
<!-- mata kanan dimulai - >
<div class="eyesBoxs pullRight">
<div class="profil skewRight"></div>
<div class="shadow skewRight"></div>
<div class="basic ani-narrow"></div>
<div class="mata ani-zoom">
<div class="garis">
<div class="hook ani-rotateHook">
<span class="bar"><b></b></span>
<span class="bar"><b></b></span>
<span class="bar"><b></b></span>
</div>
<div class="tabung ani-rotateTube">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>
<div class="trans skewRight">
<span class="bar ani-shadow"></span>
</div>
</div>
<!-- ujung mata kanan - >
</div>
</body>
[/</html>mw_shl_code]
|
Diposting pada 14/11/2014 17.55.02
|
|
|
|
Tuan tanah|
Diposting pada 14/11/2014 17.57.04
|
Diposting pada 14/11/2014 17.58.15
|
