[CSS3技术]CSS3 动画齿轮

[tr][td]在今天的课程中，我们使用CSS3制作一个动画齿轮效果，效果看起来非常漂亮。其中我使用了CSS3关键帧、动画和转换（旋转），为了得到这个结果，请注意：只有在火狐Firefox浏览器、谷歌Chrome或者Safari（webkit引擎），才能看到这个效果。




















Step1.HTML

像往常一样，我们开始使用HTML。有简单的DIV元素。

index.html

[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]

复制代码


Step 2. CSS

这里是我们的动画齿轮的CSS样式。

css/layout.css

[*]*{
[*]margin:0;
[*]padding:0;
[*]}
[*]body {
[*]font:14px/1.3 Arial,sans-serif;
[*]}
[*]header {
[*]background-color:#212121;
[*]box-shadow: 0 -1px 2px #111111;
[*]color:#fff;
[*]display:block;
[*]height:70px;
[*]position:relative;
[*]width:100%;
[*]z-index:100;
[*]}
[*]header h2{
[*]font-size:22px;
[*]font-weight:normal;
[*]left:50%;
[*]margin-left:-400px;
[*]padding:22px 0;
[*]position:absolute;
[*]width:540px;
[*]}
[*]header a.stuts,a.stuts:visited{
[*]border:none;
[*]text-decoration:none;
[*]color:#fcfcfc;
[*]font-size:14px;
[*]left:50%;
[*]line-height:31px;
[*]margin:23px 0 0 110px;
[*]position:absolute;
[*]top:0;
[*]}
[*]header .stuts span {
[*]font-size:22px;
[*]font-weight:bold;
[*]margin-left:5px;
[*]}
[*].container {
[*]background: url('../images/bg.jpg') repeat scroll 0 0 transparent;
[*]height: 548px;
[*]margin: 30px auto;
[*]width: 450px;
[*]position:relative;
[*]}
[*]
[*]/* CSS3 keyframes */
[*]@-webkit-keyframes ckw {
[*]0% {
[*]-moz-transform: rotate(0deg);
[*]-webkit-transform: rotate(0deg);
[*]}
[*]100% {
[*]-moz-transform: rotate(360deg);
[*]-webkit-transform: rotate(360deg);
[*]}
[*]}
[*]@-moz-keyframes ckw {
[*]0% {
[*]-moz-transform: rotate(0deg);
[*]-webkit-transform: rotate(0deg);
[*]}
[*]100% {
[*]-moz-transform: rotate(360deg);
[*]-webkit-transform: rotate(360deg);
[*]}
[*]}
[*]@-webkit-keyframes cckw {
[*]0% {
[*]-moz-transform: rotate(360deg);
[*]-webkit-transform: rotate(360deg);
[*]}
[*]100% {
[*]-moz-transform: rotate(0deg);
[*]-webkit-transform: rotate(0deg);
[*]}
[*]}
[*]@-moz-keyframes cckw {
[*]0% {
[*]-moz-transform: rotate(360deg);
[*]-webkit-transform: rotate(360deg);
[*]}
[*]100% {
[*]-moz-transform: rotate(0deg);
[*]-webkit-transform: rotate(0deg);
[*]}
[*]}
[*]
[*]/* gears */
[*].gear {
[*]float: none;
[*]position: absolute;
[*]text-align: center;
[*]
[*]-moz-animation-timing-function: linear;
[*]-moz-animation-iteration-count: infinite;
[*]-moz-animation-direction: normal;
[*]-moz-animation-delay: 0;
[*]-moz-animation-play-state: running;
[*]-moz-animation-fill-mode: forwards;
[*]
[*]-webkit-animation-timing-function: linear;
[*]-webkit-animation-iteration-count: infinite;
[*]-webkit-animation-direction: normal;
[*]-webkit-animation-delay: 0;
[*]-webkit-animation-play-state: running;
[*]-webkit-animation-fill-mode: forwards;
[*]}
[*]#gear1 {
[*]background: url('../images/g1.png') no-repeat 0 0;
[*]height: 85px;
[*]left: 31px;
[*]top: 45px;
[*]width: 85px;
[*]
[*]-moz-animation-name: ckw;
[*]-moz-animation-duration: 10s;
[*]
[*]-webkit-animation-name: ckw;
[*]-webkit-animation-duration: 10s;
[*]}
[*]#gear2 {
[*]background: url('../images/g2.png') no-repeat 0 0;
[*]height: 125px;
[*]left: 105px;
[*]top: 10px;
[*]width: 125px;
[*]
[*]-moz-animation-name: cckw;
[*]-moz-animation-duration: 16.84s;
[*]
[*]-webkit-animation-name: cckw;
[*]-webkit-animation-duration: 16.84s;
[*]}
[*]#gear3 {
[*]background: url('../images/g3.png') no-repeat 0 0;
[*]height: 103px;
[*]left: 149px;
[*]top: 118px;
[*]width: 103px;
[*]
[*]-moz-animation-name: ckw;
[*]-moz-animation-duration: 13.5s;
[*]
[*]-webkit-animation-name: ckw;
[*]-webkit-animation-duration: 13.5s;
[*]}
[*]#gear4 {
[*]background: url('../images/g4.png') no-repeat 0 0;
[*]height: 144px;
[*]left: 46px;
[*]top: 173px;
[*]width: 144px;
[*]
[*]-moz-animation-name: cckw;
[*]-moz-animation-duration: 20.2s;
[*]
[*]-webkit-animation-name: cckw;
[*]-webkit-animation-duration: 20.2s;
[*]}
[*]#gear5 {
[*]background: url('../images/g1.png') no-repeat 0 0;
[*]height: 85px;
[*]left: 127px;
[*]top: 292px;
[*]width: 85px;
[*]
[*]-moz-animation-name: ckw;
[*]-moz-animation-duration: 10s;
[*]
[*]-webkit-animation-name: ckw;
[*]-webkit-animation-duration: 10s;
[*]}
[*]#gear6 {
[*]background: url('../images/g2.png') no-repeat 0 0;
[*]height: 125px;
[*]left: 200px;
[*]top: 283px;
[*]width: 125px;
[*]
[*]-moz-animation-name: cckw;
[*]-moz-animation-duration: 16.84s;
[*]
[*]-webkit-animation-name: cckw;
[*]-webkit-animation-duration: 16.84s;
[*]}
[*]#gear7 {
[*]background: url('../images/g3.png') no-repeat 0 0;
[*]height: 103px;
[*]left: 277px;
[*]top: 217px;
[*]width: 103px;
[*]
[*]-moz-animation-name: ckw;
[*]-moz-animation-duration: 13.5s;
[*]
[*]-webkit-animation-name: ckw;
[*]-webkit-animation-duration: 13.5s;
[*]}

复制代码


Step 3. Images



插入图片即可


[/td][/tr]