CSS3 Experiment: Demo Segawon Murka

CSS3 Experiment: Menggabungkan CSS Sprite dan CSS Animasi

♥Logo


<html>
<head>
<title>Demo Segawon</title>
<style type="text/css">

/*
---------------------------------------------
http://hompimpaalaihumgambreng.blogspot.com
---------------------------------------------
*/
body{background:#EA1584;}

#banner1{
width:200px;
height:300px;
text-align:center;
color:black;
margin:100px auto 0;
padding:30px;
background:#FFADC8;
border:10px double orange;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
box-shadow:inset 0 0 2px #fff,0 1px 3px rgba(0, 0, 0, 0.7),0 0 3px #fff,0 0 7px #fff,0 0 20px #fff;
-moz-box-shadow:inset 0 0 2px #fff,0 1px 3px rgba(0, 0, 0, 0.7),0 0 3px #fff,0 0 7px #fff,0 0 20px #fff;
-webkit-box-shadow:inset 0 0 2px #fff,0 1px 3px rgba(0, 0, 0, 0.7),0 0 3px #fff,0 0 7px #fff,0 0 20px #fff;
}

#segawon-wrapper{position:relative;width:160px;margin:0 auto 0;}
#ndas-segawon{
position:relative;
bottom:-10px;
z-index:2;
background:url(segawon.png) no-repeat top center;
display:block;
height:102px;
line-height:102px;
}

#moncong-segawon{
position:relative;
background:url(segawon.png) no-repeat bottom center;
height:20px;
line-height:20px;
}

.samparan{
position:relative;
width:55px;
height:37px;
background:url(segawon.png) no-repeat -50px -108px;
}

.samparan.left{float:left;}
.samparan.right{float:right;}
.clear{clear:both;}

#slogan{font:50px 'Showcard Gothic',Arial,Sans-Serif;}

.cintrong{color:red;font-size:120%;}
.judul{text-shadow:0px 1px 0px #fff,1px 0px 0px #fff,0px -1px 0px #fff,-1px 0px 0px #fff,0 1px 3px #000;}

/*
------------------
Membangun Animasi
------------------
*/

@keyframes tereng
{
from{opacity:1;}
to{opacity:0;}
}

@keyframes segawon-metal
{
0%{height:20px;transform:translate(-10px,0px);}
25%{height:30px;transform:translate(-10px,0px);}
50%{height:30px;transform:translate(3px,0px);}
75%{height:20px;transform:translate(3px,0px);}
100%{height:20px;transform:translate(-10px,0px);}
}

@keyframes ndase
{
0%{transform:translate(8px,0px);}
25%{transform:translate(8px,-10px);}
50%{transform:translate(-8px,-10px);}
75%{transform:translate(-8px,0px);}
100%{transform:translate(8px,0px);}
}

@keyframes zum
{
0%{border-color:orange;color:black;}
25%{border-color:yellow;color:red;}
50%{border-color:blue;color:blue;}
75%{border-color:violet;color:violet;}
100%{border-color:red;color:darkgreen;}
}

@-moz-keyframes tereng
{
from{opacity:1;}
to{opacity:0;}
}

@-moz-keyframes segawon-metal
{
0%{height:20px;-moz-transform:translate(-10px,0px);}
25%{height:30px;-moz-transform:translate(-10px,0px);}
50%{height:30px;-moz-transform:translate(3px,0px);}
75%{height:20px;-moz-transform:translate(3px,0px);}
100%{height:20px;-moz-transform:translate(-10px,0px);}
}

@-moz-keyframes ndase
{
0%{-moz-transform:translate(8px,0px);}
25%{-moz-transform:translate(8px,-10px);}
50%{-moz-transform:translate(-8px,-10px);}
75%{-moz-transform:translate(-8px,0px);}
100%{-moz-transform:translate(8px,0px);}
}

@-moz-keyframes zum
{
0%{border-color:orange;color:black;}
25%{border-color:yellow;color:red;}
50%{border-color:blue;color:blue;}
75%{border-color:violet;color:violet;}
100%{border-color:red;color:darkgreen;}
}

@-webkit-keyframes tereng
{
from{opacity:1;}
to{opacity:0;}
}

@-webkit-keyframes segawon-metal
{
0%{height:20px;-webkit-transform:translate(-10px,0px);}
25%{height:30px;-webkit-transform:translate(-10px,0px);}
50%{height:30px;-webkit-transform:translate(3px,0px);}
75%{height:20px;-webkit-transform:translate(3px,0px);}
100%{height:20px;-webkit-transform:translate(-10px,0px);}
}

@-webkit-keyframes ndase
{
0%{-webkit-transform:translate(8px,0px);}
25%{-webkit-transform:translate(8px,-10px);}
50%{-webkit-transform:translate(-8px,-10px);}
75%{-webkit-transform:translate(-8px,0px);}
100%{-webkit-transform:translate(8px,0px);}
}

@-webkit-keyframes zum
{
0%{border-color:orange;color:black;}
25%{border-color:yellow;color:red;}
50%{border-color:blue;color:blue;}
75%{border-color:violet;color:violet;}
100%{border-color:red;color:darkgreen;}
}

/*
------------------
Memanggil Animasi
------------------
*/

#moncong-segawon{
animation:segawon-metal 1s infinite;
-moz-animation:segawon-metal 1s infinite;
-webkit-animation:segawon-metal 1s infinite;
}

#ndas-segawon{
animation:ndase 1s infinite;
-moz-animation:ndase 1s infinite;
-webkit-animation:ndase 1s infinite;
}

#banner1{
animation:zum 5s infinite;
-moz-animation:zum 5s infinite;
-webkit-animation: zum 5s infinite;
}

.cintrong{
animation:tereng 2s infinite;
-moz-animation:tereng 2s infinite;
-webkit-animation:tereng 2s infinite;
}

</style>
</head>
<body>

<div id="banner1">

<div id="segawon-wrapper">
<div id="ndas-segawon">&nbsp;</div>
<div id="moncong-segawon">&nbsp;</div>
<div class="samparan left">&nbsp;</div><div class="samparan right">&nbsp;</div>
<div class="clear"></div>
</div>   <!-- segawon-wrapper -->

<div id="slogan">
<span class="cintrong">&hearts;</span><span class="judul">Logo</span>
</div>   <!-- slogan -->

</div>   <!-- banner -->

</body>
</html>


Edit

×