Assalamualaikum Wr.Wb underground404 - Oke sekarang saya mau share animated monster dengan css. Kalo tadi kan share background pattern css yg baru, kalo kali ini tentang eksperimen dri blognya Hompimpa, Saya ambil saja, pasang dah. Mungkin pada belom tahu maksud postinganku kali ini. Haha, padahal cuman demonstrasi doank hehe. Daripada gak posting-posting mendingan saya share kode css dari Hompimpaalaihumgambreng :)
Oke liat yah dibawah. Keknya ngeberatin dah :(
Kalo mau pasang silahkan copy code ini :)
<style type="text/css">
/* Pure CSS3 Animated Monster by Taufik Nurrohman
Visit: http://hompimpaalaihumgambreng.blogspot.com */
body {background:#bbb;text-align:center;}
#outer {
margin:70px auto;
width:200px;
height:500px;
text-align:center;
position:relative;
}
.eye {
overflow:hidden;
position:relative;
width:200px;
height:100px;
margin:10px 0px;
background:white;
background:-webkit-radial-gradient(center, white, #ccc);
background:-moz-radial-gradient(center, white, #ccc);
background:-ms-radial-gradient(center, white, #ccc);
background:-o-radial-gradient(center, white, #ccc);
background:radial-gradient(center, white, #ccc);
-webkit-box-shadow:inset 0px -4px 10px rgba(0,0,0,0.4), 0px 1px 7px white, 0px -1px 7px black;
-moz-box-shadow:inset 0px -4px 10px rgba(0,0,0,0.4), 0px 1px 7px white, 0px -1px 7px black;
box-shadow:inset 0px -4px 10px rgba(0,0,0,0.4), 0px 1px 7px white, 0px -1px 7px black;
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius:100%;
-webkit-animation:eye 2s infinite alternate;
-moz-animation:eye 2s infinite alternate;
-ms-animation:eye 2s infinite alternate;
-o-animation:eye 2s infinite alternate;
animation:eye 2s infinite alternate;
}
.eyeball {
position:relative;
width:20px;height:100%;
background:black;
background:-webkit-radial-gradient(center, circle, #555, #000);
background:-moz-radial-gradient(center, circle, #555, #000);
background:-ms-radial-gradient(center, circle, #555, #000);
background:-o-radial-gradient(center, circle, #555, #000);
background:radial-gradient(center, circle, #555, #000);
margin:10px auto;
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius:100%;
-webkit-box-shadow:0px 0px 10px red;
-moz-box-shadow:0px 0px 10px red;
box-shadow:0px 0px 10px red;
-webkit-animation:
eye 3s infinite alternate,
move 7s infinite alternate,
scale 10s cubic-bezier(1,0,0,1) infinite alternate;
-moz-animation:
eye 3s infinite alternate,
move 7s infinite alternate,
scale 10s cubic-bezier(1,0,0,1) infinite alternate;
-ms-animation:
eye 3s infinite alternate,
move 7s infinite alternate,
scale 10s cubic-bezier(1,0,0,1) infinite alternate;
-o-animation:
eye 3s infinite alternate,
move 7s infinite alternate,
scale 10s cubic-bezier(1,0,0,1) infinite alternate;
animation:
eye 3s infinite alternate,
move 7s infinite alternate,
scale 10s cubic-bezier(1,0,0,1) infinite alternate;
}
.eye:after {
content:"";
position:absolute;
top:10px;left:40%;
background:rgba(255,255,255,0.7);
width:10px;
height:20px;
margin:0px auto 0px;
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius:100%;
-webkit-box-shadow:0px 0px 13px white;
-moz-box-shadow:0px 0px 13px white;
box-shadow:0px 0px 13px white;
}
.mouth {
display:block;
width:30px;
height:10px;
border-top:2px solid black;
border-radius:100px 100px 0px 0px;
margin:30px auto;
-webkit-animation:mouth 7s infinite;
-moz-animation:mouth 7s infinite;
-ms-animation:mouth 7s infinite;
-o-animation:mouth 7s infinite;
animation:mouth 7s infinite;
}
@-webkit-keyframes eye {
0% {top:50px;height:0px;}
10%, 70%, 100% {top:0px;height:100px;}
}
@-webkit-keyframes move {
25% {left:20px;}
72% {margin-top:20px;}
16% {margin-top:-20px;}
50%, 70% {left:-20px;}
0%, 80%, 100% {left:0px;margin-top:0px;}
}
@-webkit-keyframes scale {
0%, 70% {-webkit-transform:scale(0.5);-webkit-box-shadow:0px 0px 10px red;}
100% {-webkit-transform:scale(1);-webkit-box-shadow:0px 0px 30px red, 0px 0px 100px red;}
}
@-webkit-keyframes mouth {
0%, 20%, 76% {border-top:10px solid black;width:20px;}
10%, 50%, 100% {border-top:2px solid black;width:30px;}
}
@-moz-keyframes eye {
0% {top:50px;height:0px;}
10%, 70%, 100% {top:0px;height:100px;}
}
@-moz-keyframes move {
25% {left:20px;}
72% {margin-top:20px;}
16% {margin-top:-20px;}
50%, 70% {left:-20px;}
0%, 80%, 100% {left:0px;margin-top:0px;}
}
@-moz-keyframes scale {
0%, 70% {-moz-transform:scale(0.5);-moz-box-shadow:0px 0px 10px red;}
100% {-moz-transform:scale(1);-moz-box-shadow:0px 0px 30px red, 0px 0px 100px red;}
}
@-moz-keyframes mouth {
0%, 20%, 76% {border-top:10px solid black;width:20px;}
10%, 50%, 100% {border-top:2px solid black;width:30px;}
}
@-ms-keyframes eye {
0% {top:50px;height:0px;}
10%, 70%, 100% {top:0px;height:100px;}
}
@-ms-keyframes move {
25% {left:20px;}
72% {margin-top:20px;}
16% {margin-top:-20px;}
50%, 70% {left:-20px;}
0%, 80%, 100% {left:0px;margin-top:0px;}
}
@-ms-keyframes scale {
0%, 70% {-ms-transform:scale(0.5);box-shadow:0px 0px 10px red;}
100% {-ms-transform:scale(1);box-shadow:0px 0px 30px red, 0px 0px 100px red;}
}
@-ms-keyframes mouth {
0%, 20%, 76% {border-top:10px solid black;width:20px;}
10%, 50%, 100% {border-top:2px solid black;width:30px;}
}
@-o-keyframes eye {
0% {top:50px;height:0px;}
10%, 70%, 100% {top:0px;height:100px;}
}
@-o-keyframes move {
25% {left:20px;}
72% {margin-top:20px;}
16% {margin-top:-20px;}
50%, 70% {left:-20px;}
0%, 80%, 100% {left:0px;margin-top:0px;}
}
@-o-keyframes scale {
0%, 70% {-o-transform:scale(0.5);box-shadow:0px 0px 10px red;}
100% {-o-transform:scale(1);box-shadow:0px 0px 30px red, 0px 0px 100px red;}
}
@-o-keyframes mouth {
0%, 20%, 76% {border-top:10px solid black;width:20px;}
10%, 50%, 100% {border-top:2px solid black;width:30px;}
}
@keyframes eye {
0% {top:50px;height:0px;}
10%, 70%, 100% {top:0px;height:100px;}
}
@keyframes move {
25% {left:20px;}
72% {margin-top:20px;}
16% {margin-top:-20px;}
50%, 70% {left:-20px;}
0%, 80%, 100% {left:0px;margin-top:0px;}
}
@keyframes scale {
0%, 70% {transform:scale(0.5);box-shadow:0px 0px 10px red;}
100% {transform:scale(1);box-shadow:0px 0px 30px red, 0px 0px 100px red;}
}
@keyframes mouth {
0%, 20%, 76% {border-top:10px solid black;width:20px;}
10%, 50%, 100% {border-top:2px solid black;width:30px;}
}
</style>
</head>
<body>
<div id="outer">
<div class="eye">
<div class="eyeball"></div>
</div>
<span class="mouth"></span>
</div>
<span class="author">Pure CSS3 Little Monster by <a href="http://hompimpaalaihumgambreng.blogspot.com">Taufik Nurrohman</a></span>sumber: http://hompimpaalaihumgambreng.blogspot.com