HomeHome  
  • WelcomeWelcome  
  • Events  
  • PublicationsPublications  
  • FAQFAQ  
  • SearchSearch  
  • MemberlistMemberlist  
  • UsergroupsUsergroups  
  • RegisterRegister  
  • Log inLog in  
  • You are not connected. Please login or register


    Animated cartoon fan

    avatar
    • ***


        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>

      avatar
      • Administrator

          Reputation : 315
          Registered on : 2012-02-22
          Posts : 2362
          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

        avatar
        • *****


            Reputation : 3
            Registered on : 2012-05-02
            Posts : 197
          Ok this is the demo:

          The propeller is moving :D

          avatar
          • Administrator

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



            Niko wants you in the team Guest

            Community manager and Administrator at Forumattivo.com

            avatar
            • ***


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

              avatar
              • ***


                  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>


                YOUR BANNER HERE
                728x90
                DMCA.com Protection Status
                © PunBB | Contact | Report an abuse