grimofdoom
  • ***


      Reputation : 2
      Registered on : 2012-06-05
      Posts : 42
    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>

    Niko
    • Administrator

        Reputation : 317
        Registered on : 2012-02-22
        Posts : 2366
        School of codes courses: coming soon
      Hello,

      can we have a DEMO? :D



      Niko wants you in the team Guest

      Community manager and Administrator at Forumattivo.com

      Kenzo
      • *****


          Reputation : 3
          Registered on : 2012-05-02
          Posts : 197
        Ok this is the demo:
        Animated cartoon fan YA5lT
        The propeller is moving :D

        Niko
        • Administrator

            Reputation : 317
            Registered on : 2012-02-22
            Posts : 2366
            School of codes courses: coming soon
          Woaw :D Well done!



          Niko wants you in the team Guest

          Community manager and Administrator at Forumattivo.com

          grimofdoom
          • ***


              Reputation : 2
              Registered on : 2012-06-05
              Posts : 42
            I told you in first post, too big to put in.

            grimofdoom
            • ***


                Reputation : 2
                Registered on : 2012-06-05
                Posts : 42
              Code:

              <html>
              <head>
              <style type=text/css>

              .fan1{-webkit-animation:fan1 .12s infinite ;-webkit-transform:rotate(60deg);border-color:grey;width:100px;height:500px;position:absolute;background:-webkit-linear-gradient(black,grey,lightgray,white,lightgrey,grey,black);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 .12s infinite ;-webkit-transform:rotate(120deg);border-color:grey;width:100px;height:500px;position:absolute;left:0px;top0px;background:-webkit-linear-gradient(black,grey,lightgray,white,lightgrey,grey,black);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 .12s infinite ;-webkit-transform:rotate(180deg);border-color:grey;width:100px;height:500px;background:-webkit-linear-gradient(black,grey,lightgray,white,lightgrey,grey,black);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%,white,lightgrey,red 60%);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:-webkit-radial-gradient(grey,grey,lightgrey,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;}
               

              .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>
              </html>

              Animated cartoon fan Wc08bd