Konuyu Oyla:
  • Derecelendirme: 1/5 - 1 oy
  • 1
  • 2
  • 3
  • 4
  • 5
Css Stickman Seesaw Acrobats
#1
www.deccal.org

Can sıkıntısına yaptığım ufak bir calışma exciting

Css:
PHP Kod:
<h1>Cyberizm Css Stickman Seesaw Acrobats</h1>
<
div class="seesaw">
    <
div class="seesaw-top">
        <
div class="man manleft">
            <
div class="man-upper">
                <
div class="man-lower"></div>
            </
div>
        </
div>
        <
div class="loadbox">LOADING</div>
        <
div class="man manright">
            <
div class="man-upper">
                <
div class="man-lower"></div>
            </
div>
        </
div>
    </
div>
    <
div class="seesaw-bottom"></div>
</
div>
<
br><br>
<!--<
form oninput="amount.value=weight.value+'%'">
    <
label for "weight">Size: </label>
    <
input type="range" id="weight" min="30" value="50" max="100" step="1"><output name="amount" for="weight">50%</output>
 </
form>-->
<
h2>www.cyberizm.org</h2

Html:
PHP Kod:
$timingFactor2;
$jumpHeight15em;
$manColor#555;
$seesawColor#555;
$seesawBasecolor#666;

body {
    
font100%/1.2 Arial;
    
background-color#ddd;
}
h1 {
  
colorrgb(2091010);
  
text-aligncenter;
  
text-shadow.05em .05em .06em rgba(000.7);
  
font-size6vmin;
  
margin.2em 0;
}
h2{
  
text-aligncenter;
  
font-size.9em;
  
color#444;
}
form {
    
displayblock;
    
margin0 auto;
    
width18em;
}

.
man {
    
positionrelative;
    
width3.7em;
    
height6.5em;
    
transform-origin40center;
}
.
manleft {
    
animationmanleft-jump (1s $timingFactorlinear infinite;
    
floatleft;
}
.
manright {
    
animationmanright-jump (1s $timingFactorlinear infinite;
    
floatright;
}
.
man-upper {
    
/* Head */
    
displayblock;
    
positionrelative;
    
width1.5em;
    
height1.5em;
    
border2px solid $manColor;
    
border-radius50%;
    
margin0 1em;
}
.
man-upper:before, .man-upper:after {
    
/* Arms */
    
positionabsolute;
    
content"";
    
width2.5em;
    
height0;
    
border1px solid $manColor;
    
top1.75em;
    
left50%;
    
transform-origintop center;
    
animationnone (1s $timingFactorlinear infinite;
}
.
manright .man-upper:before, .manright .man-upper:after {
    
animation-delay: (.5s $timingFactor);
}
.
man-upper:before {
    
/* Arm Left */
    
transform-originleft center;
    
transformrotate(135deg);
    
animation-nameman-left-arm;
}
.
man-upper:after {
    
/* Arm Right */
    
transform-originleft center;
    
transformrotate(45deg);
    
animation-nameman-right-arm;
}
.
man-lower {
    
/* Body */
    
displayblock;
    
positionabsolute;
    
width0;
    
height2em;
    
border1px solid $manColor;
    
left50%;
    
top1.5em;
}

.
man-lower:before, .man-lower:after {
    
/* Legs */
    
positionabsolute;
    
content"";
    
width3em;
    
height0;
    
border1px solid $manColor;
    
bottom: -1px;
    
left50%;
    
transform-origintop center;
    
animationnone (1s $timingFactorlinear infinite;
}
.
manright .man-lower:before, .manright .man-lower:after {
    
animation-delay: (.5s $timingFactor);
}
.
man-lower:before {
    
/* Leg Left */
    
transform-originleft center;
    
transformrotate(115deg);
    
animation-nameman-left-leg;
}
.
man-lower:after {
    
/* Leg Right */
    
transform-originleft center;
    
transformrotate(65deg);
    
animation-nameman-right-leg;
}


/* seesaw */
.seesaw {
    
displayblock;
    
positionrelative;
    
width18em;
    
heightauto;
    
margin16em auto 0 auto;
    
font-size60%; /* Change this to scale all */
}
.
seesaw-top {
    
displayblock;
    
positionrelative;
    
width18em;
    
heightauto;
    
border-bottom2px solid $seesawColor;
    
top0;
    
transform-originbottom center;
    
animationanimate-seesaw (1s $timingFactorease-in-out infinite;
}
.
seesaw-top:after {
     
displayblock;
     
content"";
     
clearboth;
}
.
seesaw-bottom {
    
displayblock;
    
positionrelative;
    
width3em;
    
height3em;
    
left50%;
    
transform-originbottom center;
}
.
seesaw-bottom:before, .seesaw-bottom:after {
    
margin-left: -50%;
    
positionabsolute;
    
content"";
    
width3em;
    
height0;
    
border1px solid $seesawBasecolor;
    
top0;
    
left50%;
    
transform-origintop left;
}
.
seesaw-bottom:before {
    
transformrotate(115deg);
}
.
seesaw-bottom:after {
    
transformrotate(65deg);
}

.
loadbox {
    
displaynone;
     
positionabsolute;
    
border1px solid black;
    
bottom: -1px;
    
background#444;
    
color#eee;
    
fontnormal 1em/1.2 Arial;
    
text-aligncenter;
    
width5em;
    
padding.2em;
    
animationanimate-loadbox (1s $timingFactorease-in-out infinite;
}
.
seesaw:hover .loadbox {
    
displayblock;
}
@
keyframes animate-seesaw {
    
0% {
            
transformrotate(20deg);
    }
    
10% {
            
transformrotate(-20deg);
    }
    
50% {
            
transformrotate(-20deg);
    }
    
60% {
            
transformrotate(20deg);
    }
    
100% {
            
transformrotate(20deg);
    }
}
@
keyframes manleft-jump {
    
0% {
            
transform:  translateY(0px);
    }
    
50% {
            
transformtranslateY(0pxrotate(0deg);
    }
    
65% {
            
transformrotate(-20degtranslateY(- $jumpHeightrotate(180deg);
    }
    
100% {
            
transformrotate(0degtranslateY(0pxrotate(360deg);
    }
}
@
keyframes manright-jump {
    
0% {
            
transformtranslateY(0pxrotate(0deg);
    }
    
15% {
            
transformrotate(20degtranslateY(- $jumpHeightrotate(-180deg);
    }
    
50% {
            
transformrotate(0degtranslateY(0pxrotate(-360deg);
    }
    
100% {
            
transformtranslateY(0pxrotate(-360deg);
    }
}

@
keyframes man-left-arm {
    
0% {
            
transformrotate(135deg);
    }
    
50% {
            
transformrotate(135deg);
    }
    
60% {
            
transformrotate(210deg);
    }
    
80% {
            
transformrotate(210deg);
    }
    
100% {
            
transformrotate(135deg);
    }
}

@
keyframes man-right-arm {
    
0% {
            
transformrotate(45deg);
    }
    
50% {
            
transformrotate(45deg);
    }
    
60% {
            
transformrotate(-30deg);
    }
    
80% {
            
transformrotate(-30deg);
    }
    
100% {
            
transformrotate(45deg);
    }
}
@
keyframes man-left-leg {
    
0% {
            
transformrotate(115deg);
    }
    
50% {
            
transformrotate(115deg);
    }
    
60% {
            
transformrotate(160deg);
    }
    
80% {
            
transformrotate(160deg);
    }
    
100% {
            
transformrotate(115deg);
    }
}

@
keyframes man-right-leg {
    
0% {
            
transformrotate(65deg);
    }
    
50% {
            
transformrotate(65deg);
    }
    
60% {
            
transformrotate(20deg);
    }
    
80% {
            
transformrotate(20deg);
    }
    
100% {
            
transformrotate(65deg);
    }
}

@
keyframes animate-loadbox {
    
0% {
            
left45%;
    }
    
10% {
            
left45%;
    }
    
50% {
            
left25%;
    }
    
60% {
            
left25%;
    }
    
100% {
            
left45%;
    }


Js:
PHP Kod:
jQuerydocument ).ready(function( $ ) {
    $(
'#weight').on('change input',function(e) {
        $(
'.seesaw').css('font-size',$(this).val()+'%');
    })
}); 
www.deccal.org
Beğenenler:
#2
eline sağlık reis .s big_smile
Beğenenler:
#3
Eline sağlıkta bu ne len, zıplayan cin ali kiss kiss kiss: D
İnsɑnlɑr değişmez değişen tek şey şɑrtlɑr ve çıkɑrlɑr...
Beğenenler:
#4
Loading barı o cahil insan exciting
www.deccal.org
Beğenenler:
#5
(16-02-2015, Saat: 20:25)D4RKG1RL Adlı Kullanıcıdan Alıntı: Loading barı o cahil insan exciting
Ahahah yarıldım kiss
Beğenenler:
#6
kiss kiss kiss
İnsɑnlɑr değişmez değişen tek şey şɑrtlɑr ve çıkɑrlɑr...
Beğenenler:

Anahtar Kelimeler

Css Stickman Seesaw Acrobats indir, Css Stickman Seesaw Acrobats Videosu, Css Stickman Seesaw Acrobats Online izle, Css Stickman Seesaw Acrobats Bedava indir, Css Stickman Seesaw Acrobats Yükle, Css Stickman Seesaw Acrobats Hakkında, Css Stickman Seesaw Acrobats Nedir, Css Stickman Seesaw Acrobats Free indir, Css Stickman Seesaw Acrobats Oyunu, Css Stickman Seesaw Acrobats Download


1 Ziyaretçi