Home
I made this cartoon fan animated from just divs. I made this on the road so only used -webkit- (which means only usable with chrome or safari). if you want to make it work on your browser,just change the -webkit- with -moz-(mozilla);will not work for ms or opera. In order to view this(since it's size is waaaay to big) you can save it in your text program(copy&paste) and save it as .html .here is the code
- Code:
<html>
<head>
<style type=text/css>
.fan1{-webkit-animation:fan1 .125s infinite ;-webkit-transform:rotate(60deg);border-color:grey;width:100px;height:500px;position:absolute;background:-webkit-radial-gradient(black,grey,lightgray);top:8px;left:4px;left:500px;top:50px;border-top-left-radius:100px 250px;border-top-right-radius:100px 250px;border-bottom-left-radius:100px 250px;border-bottom-right-radius:100px 250px;}
.fan2{-webkit-animation:fan2 .125s infinite ;-webkit-transform:rotate(120deg);border-color:grey;width:100px;height:500px;position:absolute;left:0px;top0px;background:-webkit-radial-gradient(black,grey,lightgray);left:500px;top:50px;border-top-left-radius:100px 250px;border-top-right-radius:100px 250px;border-bottom-left-radius:100px 250px;border-bottom-right-radius:100px 250px;}
.fan3{-webkit-animation:fan3 .125s infinite ;-webkit-transform:rotate(180deg);border-color:grey;width:100px;height:500px;background:-webkit-radial-gradient(black,grey,lightgray);position:absolute;left:500px;top:50px;border-top-left-radius:100px 250px;border-top-right-radius:100px 250px;border-bottom-left-radius:100px 250px;border-bottom-right-radius:100px 250px;}
.pin{-webkit-animation:pin .1s infinite ;-webkit-transform:rotate(1deg);;width:200px; height:200px;border:1px solid black; border-radius:100%; background:-webkit-radial-gradient(45% 45%,grey,black);position:absolute; left:450px;top:200px;}
@-webkit-keyframes fan1
{
100%{-webkit-transform:rotate(120deg);}
}
@-webkit-keyframes fan2
{
100%{-webkit-transform:rotate(180deg);}
}
@-webkit-keyframes fan3
{
100%{-webkit-transform:rotate(240deg);}
}
@-webkit-keyframes pin
{
100%{-webkit-transform:rotate(360deg);}
}
.container{length:500px;width:500px;background-color:transparent;position:absolute;left:-250px;}
.case{width:600px;height:600px;background-color:grey;position:absolute;border-radius:5%}
.hole{width:500px;height:500px;border:1px solid grey;border-radius:100%;position:absolute;background:-webkit-radial-gradient(skyblue 35%,white);left:41px;top:49px;}
.hold1{width:25px;height:600px;background-color:grey;position:absolute;-webkit-transform:rotate(0deg);left:270px;}
.hold2{width:25px;height:600px;background-color:gray;position:absolute;-webkit-transform:rotate(90deg);left:288px;}
.hold3{width:25px;height:600px;background-color:gray;position:absolute;-webkit-transform:rotate(45deg);left:270px;}
.hold4{width:25px;height:600px;background-color:grey;position:absolute;-webkit-transform:rotate(135deg);left:270px;}
.sh1{position:absolute;top:25px;left:565px;}
.sh2{position:absolute;top:565px;left:25px;}
.sh3{position:absolute;top:565px;left:565px;}
.sh4{position:absolute;top:25px;left:25px;}
.screw{background-color:gray;border:black solid 1px; height:10px;width:10px;border-radius:35%;}
.g1{width:10px;height:2px;background-color:darkgrey;top:5px;position:absolute;}
.g2{width:2px;height:10px;background-color:darkgrey;left:4px;position:absolute;top:-4px;}
</style>
</head><body>
<div class=case>
<div class=hole></div>
<div class=hold1></div>
<div class=hold2></div>
<div class=hold3></div>
<div class=hold4></div>
<div class=sh1>
<div class=screw>
<div class=g1>
<div class=g2>
</div></div></div></div>
<div class=sh2>
<div class=screw>
<div class=g1>
<div class=g2>
</div></div></div></div>
<div class=sh3>
<div class=screw>
<div class=g1>
<div class=g2>
</div></div></div></div>
<div class=sh4>
<div class=screw>
<div class=g1>
<div class=g2>
</div></div></div></div>
</div>
<div class=container style="float:left;">
<div class=fan1></div>
<div class=fan2></div>
<div class=fan3></div>
<div class=pin></div>
</div>
</body>
</head>
