GFNS, Webdesign. CSS трюки

Меню с выпадающими пунктами и замедленной отрисовкой

Вращающаяся девятиконечная звезда

<style>
/* браусеронезависимая css3 9-конечная вращающаяся звезда */
.star9 { display: inline-block; margin: 28px; border: 32px solid transparent; border-radius: 32px; }
.star9 .line { position: absolute; right: -28px; top: -28px; width: 56px; height: 56px; }
.star9 .line:before { position: absolute; left: 13px; bottom:4px; content: ' '; height: 49px; width: 2px; }
.star9 .white:before {  background-color: white; }
.star9 .green:before {  background-color: green; }
.star9 .red:before { background-color: red; }
.star9 .rotate40 { -webkit-transform: rotate(-40deg); -moz-transform: rotate(-40deg); -ms-transform: rotate(-40deg); -o-transform: rotate(-40deg); }
.star9 .rotate80 { -webkit-transform: rotate(-80deg); -moz-transform: rotate(-80deg); -ms-transform: rotate(-80deg); -o-transform: rotate(-80deg); }
.star9 .rotate120 { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -ms-transform: rotate(-120deg); -o-transform: rotate(-120deg); }
.star9 .rotate160 { -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); -ms-transform: rotate(-160deg); -o-transform: rotate(-160deg); }
.star9 .rotate200 { -webkit-transform: rotate(-200deg); -moz-transform: rotate(-200deg); -ms-transform: rotate(-200deg); -o-transform: rotate(-200deg); }
.star9 .rotate240 { -webkit-transform: rotate(-240deg); -moz-transform: rotate(-240deg); -ms-transform: rotate(-240deg); -o-transform: rotate(-240deg); }
.star9 .rotate280 { -webkit-transform: rotate(-280deg); -moz-transform: rotate(-280deg); -ms-transform: rotate(-280deg); -o-transform: rotate(-280deg); }
.star9 .rotate320 { -webkit-transform: rotate(-320deg); -moz-transform: rotate(-320deg); -ms-transform: rotate(-320deg); -o-transform: rotate(-320deg); }

@-webkit-keyframes rotatestar {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(120deg); }
 }

@keyframes rotatestar {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
 }

.star9 { animation: rotatestar 60s steps(360) infinite; }

</style>
 <div class="star9">
  <div class="line white"></div>
  <div class="line green rotate40"></div>
  <div class="line red rotate80"></div>
  <div class="line white rotate120"></div>
  <div class="line green rotate160"></div>
  <div class="line red rotate200"></div>
  <div class="line white rotate240"></div>
  <div class="line green rotate280"></div>
  <div class="line red rotate320"></div>
 </div>