<! DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> Herketchan Android qonchaq</title>
<style>
/*
Aptori: teshnayi
Aptor URL:
Http://bahtim338.wodemo.comWaqti:2013-10-17
*/
@font-face {
font-family: "Alpida Unicode System";
font-style: normal;
font-weight: normal;
src: url(
http://teshna.me/alpida.eot); /* IE */
src: local('Alpida Unicode System'), url(
http://teshna.me/Alpida.ttf) format("TrueType"); /* non-IE */
}
.qonchaq{
/* qonchaqning omumiy gewdisi */
position:relative;
width:200px;
height:290px;
margin:80px auto;
background:#A5C63B;
border-radius:200px 200px 50px 50px;
/* qonchaqqa heriket ulash */
transition: all .25s ease-out;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
}
.qonchaq:hover{
/* mawusni qonchaq ustige qoyghandiki ghuwa unum */
filter: blur(3px);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
/* heriket ulash */
transform: scale(1.2) rotate(3deg);
-webkit-transform: scale(1.2) rotate(3deg);
-moz-transform: scale(1.2) rotate(3deg);
-o-transform: scale(1.2) rotate(3deg);
-ms-transform: scale(1.2) rotate(3deg);
}
/* Bash qismi we beden qismini ayrish */
.qonchaq:after{
content:'';
position:absolute;
display:block;
width:200px;
height:8px;
top:95px;
background: #fff;
}
/* qonchaqning ikki kozini sizish */
.qonchaq .koz:after,
.qonchaq .koz:before{
content:''; /* quruq elminit */
position:absolute;
display:block;
width:18px;
height:18px;
top:35px;
left:50px; /* sol koz */
background: #fff;
border-radius:15px;
}
.qonchaq .koz:after{
/* ong koz */
left:auto;
right:50px;
/* sol kozge heriket birish */
animation:heriket-qonchaq-koz-onggha 5s ease 1s infinite alternate;
-webkit-animation:heriket-qonchaq-koz-onggha 5s ease 1s infinite alternate;
-moz-animation:heriket-qonchaq-koz-onggha 5s ease 1s infinite alternate;
-o-animation:heriket-qonchaq-koz-onggha 5s ease 1s infinite alternate;
-ms-animation:heriket-qonchaq-koz-onggha 5s ease 1s infinite alternate;
}
/* ong kozge heriket birish */
.qonchaq .koz:before{
animation:heriket-qonchaq-koz-onggha 5s ease 1s infinite alternate;
-webkit-animation:heriket-qonchaq-koz-onggha 5s ease 1s infinite alternate;
-moz-animation:heriket-qonchaq-koz-onggha 5s ease 1s infinite alternate;
-o-animation:heriket-qonchaq-koz-onggha 5s ease 1s infinite alternate;
-ms-animation:heriket-qonchaq-koz-onggha 5s ease 1s infinite alternate;
}
/* asasliq korguler uchun ayrim heriket birish */
@keyframes heriket-qonchaq-koz-onggha
{
0% {}
25% {transform: translate(-102px,0px);}
50% {}
100% {}
}
@-webkit-keyframes heriket-qonchaq-koz-onggha
{
0% {}
25% {-webkit-transform: translate(-102px,0px);}
50% {}
100% {}
}
@-moz-keyframes heriket-qonchaq-koz-onggha /* firefox */
{
0% {}
25% {-moz-transform: translate(-102px,0px);}
50% {}
100% {}
}
@-o-keyframes heriket-qonchaq-koz-onggha /* opera */
{
0% {}
25% {-o-transform: translate(-102px,0px);}
50% {}
100% {}
}
@-ms-keyframes heriket-qonchaq-koz-onggha /* IE */
{
0% {}
25% {-ms-transform: translate(-102px,0px);}
50% {}
100% {}
}
@keyframes heriket-qonchaq-koz-solgha
{
0% {}
25% {transform: translate(-82px,0px);}
50% {}
100% {}
}
@-webkit-keyframes heriket-qonchaq-koz-solgha
{
0% {}
25% {-webkit-transform: translate(-82px,0px);}
50% {}
100% {}
}
@-moz-keyframes heriket-qonchaq-koz-solgha
{
0% {}
25% {-moz-transform: translate(-82px,0px);}
50% {}
100% {}
}
@-o-keyframes heriket-qonchaq-koz-solgha
{
0% {}
25% {-o-transform: translate(-82px,0px);}
50% {}
100% {}
}
@-ms-keyframes heriket-qonchaq-koz-solgha
{
0% {}
25% {-ms-transform: translate(-82px,0px);}
50% {}
100% {}
}
/* mawusni qoyghanda koz yumuwalidighan unum */
.qonchaq:hover .koz:after,
.qonchaq:hover .koz:before{
height:4px;
top:43px;
}
/* ikki qulaq pasoni we heriket */
.qonchaq .qulaq:after,
.qonchaq .qulaq:before{
content:'';
position:absolute;
display:block;
width:6px;
height:40px;
top:-25px;
left:50px;
background: #A5C63B;
border-radius:5px;
transform:rotate(-25deg);
-webkit-transform:rotate(-25deg);
-moz-transform:rotate(-25deg);
-o-transform:rotate(-25deg);
-ms-transform:rotate(-25deg);
}
/* ong qulaqning orni we heriket */
.qonchaq .qulaq:after{
left:auto;
right:50px;
transform:rotate(25deg);
-webkit-transform:rotate(25deg);
-moz-transform:rotate(25deg);
-o-transform:rotate(25deg);
-ms-transform:rotate(25deg);
}
/* sol qulaqni piqiritish */
.qonchaq .qulaq:before{
animation:heriket-qonchaq-qulaq-ong 5s ease 1s infinite alternate;
-webkit-animation:heriket-qonchaq-qulaq-ong 5s ease 1s infinite alternate;
-moz-animation:heriket-qonchaq-qulaq-ong 5s ease 1s infinite alternate;
-o-animation:heriket-qonchaq-qulaq-ong 5s ease 1s infinite alternate;
-ms-animation:heriket-qonchaq-qulaq-ong 5s ease 1s infinite alternate;
}
/* korgulerge maslashturulghan heriket */
@keyframes heriket-qonchaq-qulaq-ong
{
0% {}
25% {transform:translate(90px,6px) rotate(25deg);}
50% {}
100% {}
}
@-webkit-keyframes heriket-qonchaq-qulaq-ong
{
0% {}
25% {-webkit-transform:translate(90px,6px) rotate(25deg);}
50% {}
100% {}
}
@-moz-keyframes heriket-qonchaq-qulaq-ong
{
0% {}
25% {-moz-transform:translate(90px,6px) rotate(25deg);}
50% {}
100% {}
}
@-o-keyframes heriket-qonchaq-qulaq-ong
{
0% {}
25% {-o-transform:translate(90px,6px) rotate(25deg);}
50% {}
100% {}
}
@-ms-keyframes heriket-qonchaq-qulaq-ong
{
0% {}
25% {-ms-transform:translate(90px,6px) rotate(25deg);}
50% {}
100% {}
}
@keyframes heriket-qonchaq-qulaq-sol
{
0% {transform: translate(-42px,0px);}
25% {}
50% {}
100% {}
}
@-webkit-keyframes heriket-qonchaq-qulaq-sol
{
0% {-webkit-transform: translate(-42px,0px);}
25% {}
50% {}
100% {}
}
@-moz-keyframes heriket-qonchaq-qulaq-sol
{
0% {-moz-transform: translate(-42px,0px);}
25% {}
50% {}
100% {}
}
@-o-keyframes heriket-qonchaq-qulaq-sol
{
0% {-o-transform: translate(-42px,0px);}
25% {}
50% {}
100% {}
}
@-ms-keyframes heriket-qonchaq-qulaq-sol
{
0% {-ms-transform: translate(-42px,0px);}
25% {}
50% {}
100% {}
}
.qonchaq .qol:after,
.qonchaq .qol:before{
content:'';
position:absolute;
display:block;
width:44px;
height:150px;
top:96px;
left:-52px;
background: #A5C63B;
border-radius:44px;
}
.qonchaq .qol:after{
left:auto;
right:-52px;
}
.qonchaq .qol:after
{
transform-origin:0 0;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-o-transform-origin:0 0;
-ms-transform-origin:0 0;
animation:heriket-qonchaq-qol-ong 5s ease 1s infinite alternate;
-webkit-animation:heriket-qonchaq-qol-ong 5s ease 1s infinite alternate;
-moz-animation:heriket-qonchaq-qol-ong 5s ease 1s infinite alternate;
-o-animation:heriket-qonchaq-qol-ong 5s ease 1s infinite alternate;
-ms-animation:heriket-qonchaq-qol-ong 5s ease 1s infinite alternate;
}
.qonchaq .qol:before
{
transform-origin:44px 0;
-webkit-transform-origin:44px 0;
-moz-transform-origin:44px 0;
-o-transform-origin:44px 0;
-ms-transform-origin:44px 0;
animation:heriket-qonchaq-qol-solgha 5s ease 1s infinite alternate;
-webkit-animation:heriket-qonchaq-qol-solgha 5s ease 1s infinite alternate;
-moz-animation:heriket-qonchaq-qol-solgha 5s ease 1s infinite alternate;
-o-animation:heriket-qonchaq-qol-solgha 5s ease 1s infinite alternate;
-ms-animation:heriket-qonchaq-qol-solgha 5s ease 1s infinite alternate;
}
@keyframes heriket-qonchaq-qol-ong
{
0% {transform: translate(-52px,0px);}
25% {transform: rotate(0deg);}
50% {transform: rotate(-180deg);}
100% {transform: translate(-10px,120px) rotate(-180deg);}
}
@-webkit-keyframes heriket-qonchaq-qol-ong
{
0% {-webkit-transform: translate(-52px,0px);}
25% {-webkit-transform: rotate(0deg);}
50% {-webkit-transform: rotate(-180deg);}
100% {-webkit-transform: translate(-10px,120px) rotate(-180deg);}
}
@-moz-keyframes heriket-qonchaq-qol-ong
{
0% {-moz-transform: translate(-52px,0px);}
25% {-moz-transform: rotate(0deg);}
50% {-moz-transform: rotate(-180deg);}
100% {-moz-transform: translate(-10px,120px) rotate(-180deg);}
}
@-o-keyframes heriket-qonchaq-qol-ong
{
0% {-o-transform: translate(-52px,0px);}
25% {-o-transform: rotate(0deg);}
50% {-o-transform: rotate(-180deg);}
100% {-o-transform: translate(-10px,120px) rotate(-180deg);}
}
@-ms-keyframes heriket-qonchaq-qol-ong
{
0% {-ms-transform: translate(-52px,0px);}
25% {-ms-transform: rotate(0deg);}
50% {-ms-transform: rotate(180deg);}
100% {-ms-transform: translate(-10px,120px) rotate(180deg);}
}
@keyframes heriket-qonchaq-qol-solgha
{
0% {transform: translate(52px,0px);}
25% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
100% {transform: translate(10px,120px) rotate(180deg);}
}
@-webkit-keyframes heriket-qonchaq-qol-solgha
{
0% {-webkit-transform: translate(52px,0px);}
25% {-webkit-transform: rotate(0deg);}
50% {-webkit-transform: rotate(180deg);}
100% {-webkit-transform: translate(10px,120px) rotate(180deg);}
}
@-moz-keyframes heriket-qonchaq-qol-solgha
{
0% {-moz-transform: translate(52px,0px);}
25% {-moz-transform: rotate(0deg);}
50% {-moz-transform: rotate(180deg);}
100% {-moz-transform: translate(10px,120px) rotate(180deg);}
}
@-o-keyframes heriket-qonchaq-qol-solgha
{
0% {-o-transform: translate(52px,0px);}
25% {-o-transform: rotate(0deg);}
50% {-o-transform: rotate(180deg);}
100% {-o-transform: translate(10px,120px) rotate(180deg);}
}
@-ms-keyframes heriket-qonchaq-qol-solgha
{
0% {-ms-transform: translate(52px,0px);}
25% {-ms-transform: rotate(0deg);}
50% {-ms-transform: rotate(-180deg);}
100% {-ms-transform: translate(10px,120px) rotate(-180deg);}
}
.qonchaq .put:after,
.qonchaq .put:before{
content:'';
position:absolute;
display:block;
width:44px;
height:110px;
bottom:-90px;
left:40px;
background: #A5C63B;
border-radius:44px;
}
.qonchaq .put:after
{
transform-origin:0 0;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-o-transform-origin:0 0;
-ms-transform-origin:0 0;
animation:heriket-qonchaq-put-ong 5s ease 1s infinite alternate;
-webkit-animation:heriket-qonchaq-put-ong 5s ease 1s infinite alternate;
-moz-animation:heriket-qonchaq-put-ong 5s ease 1s infinite alternate;
-o-animation:heriket-qonchaq-put-ong 5s ease 1s infinite alternate;
-ms-animation:heriket-qonchaq-put-ong 5s ease 1s infinite alternate;
}
.qonchaq .put:before
{
transform-origin:44px 0;
-webkit-transform-origin:44px 0;
-moz-transform-origin:44px 0;
-o-transform-origin:44px 0;
-ms-transform-origin:44px 0;
animation:heriket-qonchaq-put-sol 5s ease 1s infinite alternate;
-webkit-animation:heriket-qonchaq-put-sol 5s ease 1s infinite alternate;
-moz-animation:heriket-qonchaq-put-sol 5s ease 1s infinite alternate;
-o-animation:heriket-qonchaq-put-sol 5s ease 1s infinite alternate;
-ms-animation:heriket-qonchaq-put-sol 5s ease 1s infinite alternate;
}
@keyframes heriket-qonchaq-put-ong
{
0% {transform: rotate(0deg);}
25% {transform: rotate(0deg);bottom:-120px;}
50% {transform: rotate(-90deg);}
100% {transform: translate(-50px,-120px);}
}
@-webkit-keyframes heriket-qonchaq-put-ong
{
0% {-webkit-transform: rotate(0deg);}
25% {-webkit-transform: rotate(0deg);bottom:-120px;}
50% {-webkit-transform: rotate(-90deg);}
100% {-webkit-transform: translate(-50px,-120px);}
}
@-moz-keyframes heriket-qonchaq-put-ong
{
0% {-moz-transform: rotate(0deg);}
25% {-moz-transform: rotate(0deg);bottom:-120px;}
50% {-moz-transform: rotate(-90deg);}
100% {-moz-transform: translate(-50px,-120px);}
}
@-o-keyframes heriket-qonchaq-put-ong
{
0% {-o-transform: rotate(0deg);}
25% {-o-transform: rotate(0deg);bottom:-120px;}
50% {-o-transform: rotate(-90deg);}
100% {-o-transform: translate(-50px,-120px);}
}
@-ms-keyframes heriket-qonchaq-put-ong
{
0% {-ms-transform: rotate(0deg);}
25% {-ms-transform: rotate(0deg);bottom:-120px;}
50% {-ms-transform: rotate(-90deg);}
100% {-ms-transform: translate(-50px,-120px);}
}
@keyframes heriket-qonchaq-put-sol
{
0% {transform: rotate(0deg);}
25% {transform: rotate(0deg);bottom:-120px;}
50% {transform: rotate(90deg);}
100% {transform: translate(50px,-120px);}
}
@-webkit-keyframes heriket-qonchaq-put-sol
{
0% {-webkit-transform: rotate(0deg);}
25% {-webkit-transform: rotate(0deg);bottom:-120px;}
50% {-webkit-transform: rotate(90deg);}
100% {-webkit-transform: translate(50px,-120px);}
}
@-o-keyframes heriket-qonchaq-put-sol
{
0% {-o-transform: rotate(0deg);}
25% {-o-transform: rotate(0deg);bottom:-120px;}
50% {-o-transform: rotate(90deg);}
100% {-o-transform: translate(50px,-120px);}
}
@-moz-keyframes heriket-qonchaq-put-sol
{
0% {-moz-transform: rotate(0deg);}
25% {-moz-transform: rotate(0deg);bottom:-120px;}
50% {-moz-transform: rotate(90deg);}
100% {-moz-transform: translate(50px,-120px);}
}
@-ms-keyframes heriket-qonchaq-put-sol
{
0% {-ms-transform: rotate(0deg);}
25% {-ms-transform: rotate(0deg);bottom:-120px;}
50% {-ms-transform: rotate(90deg);}
100% {-ms-transform: translate(50px,-120px);}
}
.qonchaq .put:after{
left:auto;
right:40px;
}
/*teshna blog adris orni */
.qonchaq.logo:{
z-index:99;
display:block;
width:50px;
height:50px;
background:#FFFFFF;
}
.logo {
z-index:999;
position: absolute;
left: 50px;
top: 138px;
width: 100px;
height: 100px;
border-left: 6px dashed #FFFFFF;
border-top: 4px dashed #FFFFFF;
border-right:2px dashed #FFFFFF;
border-radius: 100px;
animation:heriket-qonchaq-logo-ong 5s linear infinite;
-webkit-animation:heriket-qonchaq-logo-ong 5s linear infinite;
-moz-animation: heriket-qonchaq-logo-ong 5s linear infinite;
-o-animation: heriket-qonchaq-logo-ong 5s linear infinite;
-ms-animation: heriket-qonchaq-logo-ong 5s linear infinite;
}
/* aylnama unum */
@keyframes heriket-qonchaq-logo-ong
{
0% {transform: rotate(0deg);}
100% {transform : rotate(360deg)}
}
@-webkit-keyframes heriket-qonchaq-logo-ong
{
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg)}
}
@-moz-keyframes heriket-qonchaq-logo-ong
{
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg)}
}
@-o-keyframes heriket-qonchaq-logo-ong
{
0% {-o-transform: rotate(0deg);}
100% {-o-transform: rotate(360deg)}
}
@-ms-keyframes heriket-qonchaq-logo-ong
{
0% {-ms-transform: rotate(0deg);}
100% {-ms-transform: rotate(360deg)}
}
p{
z-index:999;
position: absolute;
left: 58px;
top: 145px;
color:#49A5E9;
font-size:20px;
text-align:center;
vertical-align:middle;
font-weight: bold;
font-family:Alpida Unicode System;
}
</style>
</head>
<body>
<div class="qonchaq">
<div class="logo"></div>
<div class="koz"></div>
<div class="qulaq"></div>
<div class="qol"></div>
<div class="put"></div>
<p>سىرداش ئۇنۋىرسال مۇنبىرى</br>bahtim338.wodemo.com</p>
</div>
</body>
</html>