本文主要包含旋转,css3动画等相关知识,佚名 希望在学习及工作中可以帮助到您
发一个很久以前的作品，当开始得知CSS3可以做动画时，就很想玩玩，于是就做了个充满童年回忆的大风车。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css3 大风车</title> <style> *{margin:0; padding:0} .windmill{ padding:10px; width:400px; height:400px; position:relative; animation-name:moveWindmill; animation-duration:4s; animation-timing-function:linearanimation-delay:0; animation-iteration-count:infinite; animation-play-state:running; /* Firefox: */ -moz-animation-name:moveWindmill; -moz-animation-duration:4s; -moz-animation-timing-function:linear; -moz-animation-delay:0; -moz-animation-iteration-count:infinite; -moz-animation-play-state:running; -webkit-animation-name:moveWindmill; -webkit-animation-duration:4s; -webkit-animation-timing-function:linear; -webkit-animation-delay:0; -webkit-animation-iteration-count:infinite; -webkit-animation-play-state:running; -ms-animation-name:moveWindmill; -ms-animation-duration:4s; -ms-animation-timing-function:linear; -ms-animation-delay:0; -ms-animation-iteration-count:infinite; -ms-animation-play-state:running; } .windmill div{ position:absolute; width:100px; height:50px;left:50%; top:50%; border-radius:0 0 50px 50px ; -moz-transform-origin:0% 0%;-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;} .windmill .red{ background-color:red; background: -moz-radial-gradient(right, circle,red , #000); background: -webkit-radial-gradient(right, circle,red , #000); } .windmill .yellow{transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); background-color:yellow; background: -moz-radial-gradient(right, circle,yellow , #000); background: -webkit-radial-gradient(right, circle,yellow , #000); background: -ms-radial-gradient(right, circle,yellow , #000);} .windmill .blue{transform:rotate(180deg);-ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); background-color:blue; background: -moz-radial-gradient(right, circle,blue , #000); background: -webkit-radial-gradient(right, circle,blue , #000); } .windmill .green{transform:rotate(270deg); -ms-transform:rotate(270deg);-moz-transform:rotate(270deg);-webkit-transform:rotate(270deg); background-color:green; background:radial-gradient(right, circle,green , #000);background: -moz-radial-gradient(right, circle,green , #000); background: -webkit-radial-gradient(right, circle,green , #000); background: -ms-radial-gradient(right, circle,green , #000); } .windmill .dot{ width:50px; height:50px; border-radius:50px ; position:absolute; left:50%;top:50%; margin-left:-25px; margin-top:-25px;background:#fff; background: -moz-radial-gradient(center, circle,#fff , #666); background: -webkit-radial-gradient(center, circle,#fff , #666);} @keyframes moveWindmill /* Firefox */ { 0% { -ms-transform: rotate(0deg)} 25% { -ms-transform: rotate(90deg)} 50% { -ms-transform: rotate(180deg)} 75% { -ms-transform: rotate(270deg)} 100% { -ms-transform: rotate(360deg)} } @-ms-keyframes moveWindmill /* Firefox */ { 0% { -ms-transform: rotate(0deg)} 25% { -ms-transform: rotate(90deg)} 50% { -ms-transform: rotate(180deg)} 75% { -ms-transform: rotate(270deg)} 100% { -ms-transform: rotate(360deg)} } @-webkit-keyframes moveWindmill /* Firefox */ { 0% { -webkit-transform: rotate(0deg)} 25% { -webkit-transform: rotate(90deg)} 50% { -webkit-transform: rotate(180deg)} 75% { -webkit-transform: rotate(270deg)} 100% { -webkit-transform: rotate(360deg)} } @-moz-keyframes moveWindmill /* Firefox */ { 0% { -moz-transform: rotate(0deg)} 25% { -moz-transform: rotate(90deg)} 50% { -moz-transform: rotate(180deg)} 75% { -moz-transform: rotate(270deg)} 100% { -moz-transform: rotate(360deg)} } </style> </head> <body> <div class="windmill"> <div class="red"></div> <div class="yellow"></div> <div class="blue"></div> <div class="green"></div> <div class="dot"></div> </div> </body> </html>
提示：您可以先修改部分代码再运行
HTML：
.windmill .green{transform:rotate(270deg); -ms-transform:rotate(270deg);-moz-transform:rotate(270deg);-webkit-transform:rotate(270deg); background-color:green; background:radial-gradient(right, circle,green , #00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css3 大风车</title> <style> *{margin:0; padding:0} .windmill{ padding:10px; width:400px; height:400px; position:relative; animation-name:moveWindmill; animation-duration:4s; animation-timing-function:linearanimation-delay:0; animation-iteration-count:infinite; animation-play-state:running; /* Firefox: */ -moz-animation-name:moveWindmill; -moz-animation-duration:4s; -moz-animation-timing-function:linear; -moz-animation-delay:0; -moz-animation-iteration-count:infinite; -moz-animation-play-state:running; -webkit-animation-name:moveWindmill; -webkit-animation-duration:4s; -webkit-animation-timing-function:linear; -webkit-animation-delay:0; -webkit-animation-iteration-count:infinite; -webkit-animation-play-state:running; -ms-animation-name:moveWindmill; -ms-animation-duration:4s; -ms-animation-timing-function:linear; -ms-animation-delay:0; -ms-animation-iteration-count:infinite; -ms-animation-play-state:running; } .windmill div{ position:absolute; width:100px; height:50px;left:50%; top:50%; border-radius:0 0 50px 50px ; -moz-transform-origin:0% 0%;-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;} .windmill .red{ background-color:red; background: -moz-radial-gradient(right, circle,red , #000); background: -webkit-radial-gradient(right, circle,red , #000); } .windmill .yellow{transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); background-color:yellow; background: -moz-radial-gradient(right, circle,yellow , #000); background: -webkit-radial-gradient(right, circle,yellow , #000); background: -ms-radial-gradient(right, circle,yellow , #000);} .windmill .blue{transform:rotate(180deg);-ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); background-color:blue; background: -moz-radial-gradient(right, circle,blue , #000); background: -webkit-radial-gradient(right, circle,blue , #000); } .windmill .green{transform:rotate(270deg); -ms-transform:rotate(270deg);-moz-transform:rotate(270deg);-webkit-transform:rotate(270deg); background-color:green; background:radial-gradient(right, circle,green , #000);background: -moz-radial-gradient(right, circle,green , #000); background: -webkit-radial-gradient(right, circle,green , #000); background: -ms-radial-gradient(right, circle,green , #000); } .windmill .dot{ width:50px; height:50px; border-radius:50px ; position:absolute; left:50%;top:50%; margin-left:-25px; margin-top:-25px;background:#fff; background: -moz-radial-gradient(center, circle,#fff , #666); background: -webkit-radial-gradient(center, circle,#fff , #666);} @keyframes moveWindmill /* Firefox */ { 0% { -ms-transform: rotate(0deg)} 25% { -ms-transform: rotate(90deg)} 50% { -ms-transform: rotate(180deg)} 75% { -ms-transform: rotate(270deg)} 100% { -ms-transform: rotate(360deg)} } @-ms-keyframes moveWindmill /* Firefox */ { 0% { -ms-transform: rotate(0deg)} 25% { -ms-transform: rotate(90deg)} 50% { -ms-transform: rotate(180deg)} 75% { -ms-transform: rotate(270deg)} 100% { -ms-transform: rotate(360deg)} } @-webkit-keyframes moveWindmill /* Firefox */ { 0% { -webkit-transform: rotate(0deg)} 25% { -webkit-transform: rotate(90deg)} 50% { -webkit-transform: rotate(180deg)} 75% { -webkit-transform: rotate(270deg)} 100% { -webkit-transform: rotate(360deg)} } @-moz-keyframes moveWindmill /* Firefox */ { 0% { -moz-transform: rotate(0deg)} 25% { -moz-transform: rotate(90deg)} 50% { -moz-transform: rotate(180deg)} 75% { -moz-transform: rotate(270deg)} 100% { -moz-transform: rotate(360deg)} } </style> </head> <body> <div class="windmill"> <div class="red"></div> <div class="yellow"></div> <div class="blue"></div> <div class="green"></div> <div class="dot"></div> </div> </body> </html>
提示：您可以先修改部分代码再运行
HTML：
.windmill .green{transform:rotate(270deg); -ms-transform:rotate(270deg);-moz-transform:rotate(270deg);-webkit-transform:rotate(270deg); background-color:green; background:radial-gradient(right, circle,green , #00