grimofdoom
  • ***


      Reputation : 2
      Registered on : 2012-06-05
      Posts : 42
    I could not find a proper forum to do this in, so i am going to do this here. The project i am doing is with css3 animations. I am going to make a animated background(spacey) and moving character(one for now till i can successively get one down.) from the Atari space game.

    Anyone is allowed to use or edit this but at least some credit(name: Timothy Leitzke or just username or my email: Email removed).

    I will post every so often pieces as i complete them and when i Finnish, i will post a code of it all put together(will only work with chrome, safari and any other browser that supports -webkit-(feeling lazy in work,though when i finnish ill add the rest of the browser supports)).



    Last edited by grimofdoom on Sat Jun 09, 2012 3:52 am; edited 1 time in total

    #1 - Posted on Sat Jun 09, 2012 2:16 am
    grimofdoom
    • ***


        Reputation : 2
        Registered on : 2012-06-05
        Posts : 42
      Here is the background so far(v.2). I just used 1 keyframe to animate the 13 divs(star) around the inside of the black div. To add diffrent times to the stars,i used delays:
      Code:

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

      .back{background-color:black;width:30%;height:20%;position:relative
      }

      .star1{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:10%;top:50%;width:3px;height:3px;-webkit-animation:star 3s infinite 2000ms;
      }

      .star2{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:25%;top:75%;width:3px;height:3px;-webkit-animation:star 3s infinite 1000ms;
      }

      .star3{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:13%;top:60%;width:3px;height:3px;-webkit-animation:star 3s infinite 1400ms;
      }

      .star4{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:10%;top:31%;width:3px;height:3px;-webkit-animation:star 3s infinite 134ms;
      }

      .star5{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:93%;top:32%;width:3px;height:3px;-webkit-animation:star 3s infinite 2364ms;
      }

      .star6{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:16%;top:65%;width:3px;height:3px;-webkit-animation:star 3s infinite 593ms;
      }

      .star7{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:83%;top:28%;width:3px;height:3px;-webkit-animation:star 3s infinite 4000ms;
      }

      .star8{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:54%;top:37%;width:3px;height:3px-webkit-animation:star 3s infinite 2893ms;
      }

      .star9{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:6%;top:1%;width:3px;height:3px;-webkit-animation:star 3s infinite 156ms;
      }

      .star10{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:24%;top:17%;width:3px;height:3px;-webkit-animation:star 3s infinite 1543ms;
      }

      .star11{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:55%;top:4%;width:3px;height:3px;-webkit-animation:star 3s infinite 486ms;
      }

      .star12{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:58%;top:48%;width:3px;height:3px;-webkit-animation:star 3s infinite;
      }

      .star13{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:66%;top:23%;width:3px;height:3px;-webkit-animation:star 3s infinite 654ms;
      }

      @-webkit-keyframes star{

      0%{background-color:white;}
      50%{background-color: #FFD700;box-shadow:0px 0px 3px yellow;}
      100%{background-color:white;}

      }
      </style>
      </head><body>

      <div class=back>

      <div class=star1></div>
      <div class=star2></div>
      <div class=star3></div>
      <div class=star4></div>
      <div class=star5></div>
      <div class=star6></div>
      <div class=star7></div>
      <div class=star8></div>
      <div class=star9></div>
      <div class=star10></div>
      <div class=star11></div>
      <div class=star12></div>
      <div class=star13></div>



      </div>

      </body>
      </html>
      (update:stars glow to and from without abrupt back to white)

      #2 - Posted on Sat Jun 09, 2012 3:46 am