FUN WITH CSS ANIMATIONS. There’s a lot going on this demo: pseudo-elements, css transforms and animations. It works in Firefox and Chrome, but Safari 5/6 fails to animate the pseudo-elements. The animation in Firefox can be choppy.
We use css stars as a starting point, modifying the arms with box-shadows.
The html for a typical star is pretty simple:
<div class="pinwheel-3">
<div></div>
<div class="rot120deg"></div>
<div class="rot240deg"></div>
</div>
We have a pinwheel container div wrapped around the number of divs corresponding to the arms of the pinwheel, each with the appropriate rotation class applied to it.
To each of the star arms we add identical :before and :after pseudo-elements:
[class^="pinwheel"] div:before {
content:"";
width:3px;
height:100px;
position:absolute;
left:50%;
margin-left:-56px;
z-index:2;
background:rgba(0,153,255,.5);
box-shadow: 0 0 5px 2px rgba(0,153,255,.5),
0 0 10px 4px rgba(0,153,255,.5);
}
[class^="pinwheel"] div:after {
content:"";
width:4px;
height:100px;
position:absolute;
background:rgba(153,255,0,.5);
box-shadow: inset 0 0 5px rgba(153,255,0,.5),
0 0 5px 2px rgba(153,255,0,.5),
0 0 10px 4px rgba(153,255,0,.5);
}
Now each pinwheel arm has two additional elements associated with it that we can play with, with no additions to the html. We change their background-colors for variety.
The fun begins by defining css animations to be triggered by hovering the pinwheels. The syntax is relatively complicated:
[class^="pinwheel"]:hover {
animation: rotate 4s ease-in-out 0s infinite alternate;
}
First we use the css element attribute selector to target any element whose class begins with "pinwheel". In this case, these are the div containers for the individual arms of the pinwheels:
<div class="pinwheel-3">
<div></div>
<div class="rot120deg"></div>
<div class="rot240deg"></div>
</div>
Note: This demo uses the rotation.css stylesheet.