.ani-box {height: 550px; position: relative; overflow: hidden;}
.fanbox {
margin: -20px auto 0px auto;
width: 90%;
position: relative;
padding-bottom: 2em;
height: 416px;
width: 416px;
box-sizing: content-box;
}
#grid {
border: 6px solid #777;
border-radius: 50%;
left: 50%;
top: 50%;
position: absolute;
z-index: 3;
margin-left: -208px;
margin-top: -220px;
height: 416px;
width: 416px;
box-sizing: content-box;
}
#fan {
position: absolute;
top: 50%;
left: 50%;
margin-top: -204px;
margin-left: -193px;
height: 400px;
width: 400px;
box-sizing: content-box;
}
.low {
animation: fan 120s linear infinite;
}
.high {
animation: fan 40s linear infinite;
}
@keyframes fan {
0% {transform: rotate(0deg) }
100% {transform: rotate(36000deg)}
}
/* ========= Switch ========= */
#control {
margin: 0em auto .5em auto;
width: 80%;
position: relative;
text-align: center;
}
button {
padding: 5px 8px;
margin: 0.5em;
color: #FFFFFF;
background-color: #009900;
border: 3px ridge #CCCCCC;
text-align: center;
font-size: 1.1em;
line-height: 1em;
display: inline-block;
}
@media screen and (max-width: 480px) {
.fanbox {
transform: scale(0.5);
margin-left: -10%;
}
#grid {
display: none;
}
}
#speed span {top: -20px; padding-bottom: 10px; vertical-align: text-top;}
.low-text {color: #fff;}
.high-text {color: #004F00;}
This switch may not work in Internet Explorer –
Check out 2 more CSS FANS: FAN-BOX and FAN-ROUND
]]>
