CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3 动画齿轮

CSS3 动画齿轮

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





点击此处查看DEMO






Step1.HTML
像往常一样,我们开始使用HTML。有简单的DIV元素。
index.html

  1. <div class="container">
  2. <div class="gear" id="gear1"></div>
  3. <div class="gear" id="gear2"></div>
  4. <div class="gear" id="gear3"></div>
  5. <div class="gear" id="gear4"></div>
  6. <div class="gear" id="gear5"></div>
  7. <div class="gear" id="gear6"></div>
  8. <div class="gear" id="gear7"></div>
  9. </div>
复制代码
Step 2. CSS
这里是我们的动画齿轮的CSS样式。
css/layout.css

  1. *{
  2. margin:0;
  3. padding:0;
  4. }
  5. body {
  6. font:14px/1.3 Arial,sans-serif;
  7. }
  8. header {
  9. background-color:#212121;
  10. box-shadow: 0 -1px 2px #111111;
  11. color:#fff;
  12. display:block;
  13. height:70px;
  14. position:relative;
  15. width:100%;
  16. z-index:100;
  17. }
  18. header h2{
  19. font-size:22px;
  20. font-weight:normal;
  21. left:50%;
  22. margin-left:-400px;
  23. padding:22px 0;
  24. position:absolute;
  25. width:540px;
  26. }
  27. header a.stuts,a.stuts:visited{
  28. border:none;
  29. text-decoration:none;
  30. color:#fcfcfc;
  31. font-size:14px;
  32. left:50%;
  33. line-height:31px;
  34. margin:23px 0 0 110px;
  35. position:absolute;
  36. top:0;
  37. }
  38. header .stuts span {
  39. font-size:22px;
  40. font-weight:bold;
  41. margin-left:5px;
  42. }
  43. .container {
  44. background: url('../images/bg.jpg') repeat scroll 0 0 transparent;
  45. height: 548px;
  46. margin: 30px auto;
  47. width: 450px;
  48. position:relative;
  49. }

  50. /* CSS3 keyframes */
  51. @-webkit-keyframes ckw {
  52. 0% {
  53. -moz-transform: rotate(0deg);
  54. -webkit-transform: rotate(0deg);
  55. }
  56. 100% {
  57. -moz-transform: rotate(360deg);
  58. -webkit-transform: rotate(360deg);
  59. }
  60. }
  61. @-moz-keyframes ckw {
  62. 0% {
  63. -moz-transform: rotate(0deg);
  64. -webkit-transform: rotate(0deg);
  65. }
  66. 100% {
  67. -moz-transform: rotate(360deg);
  68. -webkit-transform: rotate(360deg);
  69. }
  70. }
  71. @-webkit-keyframes cckw {
  72. 0% {
  73. -moz-transform: rotate(360deg);
  74. -webkit-transform: rotate(360deg);
  75. }
  76. 100% {
  77. -moz-transform: rotate(0deg);
  78. -webkit-transform: rotate(0deg);
  79. }
  80. }
  81. @-moz-keyframes cckw {
  82. 0% {
  83. -moz-transform: rotate(360deg);
  84. -webkit-transform: rotate(360deg);
  85. }
  86. 100% {
  87. -moz-transform: rotate(0deg);
  88. -webkit-transform: rotate(0deg);
  89. }
  90. }

  91. /* gears */
  92. .gear {
  93. float: none;
  94. position: absolute;
  95. text-align: center;

  96. -moz-animation-timing-function: linear;
  97. -moz-animation-iteration-count: infinite;
  98. -moz-animation-direction: normal;
  99. -moz-animation-delay: 0;
  100. -moz-animation-play-state: running;
  101. -moz-animation-fill-mode: forwards;

  102. -webkit-animation-timing-function: linear;
  103. -webkit-animation-iteration-count: infinite;
  104. -webkit-animation-direction: normal;
  105. -webkit-animation-delay: 0;
  106. -webkit-animation-play-state: running;
  107. -webkit-animation-fill-mode: forwards;
  108. }
  109. #gear1 {
  110. background: url('../images/g1.png') no-repeat 0 0;
  111. height: 85px;
  112. left: 31px;
  113. top: 45px;
  114. width: 85px;

  115. -moz-animation-name: ckw;
  116. -moz-animation-duration: 10s;

  117. -webkit-animation-name: ckw;
  118. -webkit-animation-duration: 10s;
  119. }
  120. #gear2 {
  121. background: url('../images/g2.png') no-repeat 0 0;
  122. height: 125px;
  123. left: 105px;
  124. top: 10px;
  125. width: 125px;

  126. -moz-animation-name: cckw;
  127. -moz-animation-duration: 16.84s;

  128. -webkit-animation-name: cckw;
  129. -webkit-animation-duration: 16.84s;
  130. }
  131. #gear3 {
  132. background: url('../images/g3.png') no-repeat 0 0;
  133. height: 103px;
  134. left: 149px;
  135. top: 118px;
  136. width: 103px;

  137. -moz-animation-name: ckw;
  138. -moz-animation-duration: 13.5s;

  139. -webkit-animation-name: ckw;
  140. -webkit-animation-duration: 13.5s;
  141. }
  142. #gear4 {
  143. background: url('../images/g4.png') no-repeat 0 0;
  144. height: 144px;
  145. left: 46px;
  146. top: 173px;
  147. width: 144px;

  148. -moz-animation-name: cckw;
  149. -moz-animation-duration: 20.2s;

  150. -webkit-animation-name: cckw;
  151. -webkit-animation-duration: 20.2s;
  152. }
  153. #gear5 {
  154. background: url('../images/g1.png') no-repeat 0 0;
  155. height: 85px;
  156. left: 127px;
  157. top: 292px;
  158. width: 85px;

  159. -moz-animation-name: ckw;
  160. -moz-animation-duration: 10s;

  161. -webkit-animation-name: ckw;
  162. -webkit-animation-duration: 10s;
  163. }
  164. #gear6 {
  165. background: url('../images/g2.png') no-repeat 0 0;
  166. height: 125px;
  167. left: 200px;
  168. top: 283px;
  169. width: 125px;

  170. -moz-animation-name: cckw;
  171. -moz-animation-duration: 16.84s;

  172. -webkit-animation-name: cckw;
  173. -webkit-animation-duration: 16.84s;
  174. }
  175. #gear7 {
  176. background: url('../images/g3.png') no-repeat 0 0;
  177. height: 103px;
  178. left: 277px;
  179. top: 217px;
  180. width: 103px;

  181. -moz-animation-name: ckw;
  182. -moz-animation-duration: 13.5s;

  183. -webkit-animation-name: ckw;
  184. -webkit-animation-duration: 13.5s;
  185. }
复制代码
Step 3. Images

插入图片即可

【CSS3 动画齿轮】相关文章

1. CSS3 动画齿轮

2. CSS3动画效果-animate.css

3. CSS动画集合 可直接生成动画代码 – AniCollection

4. Effeckt.css项目:CSS交互动画应用集锦

5. cssSandpaper-兼容IE的CSS3 JavaScript库

6. jQuery/CSS3实现超酷的动画Tab菜单

7. 超实用!可视化CSS3动画生成神器Stylie

8. 利用CSS3制作动画效果

9. CSS3动画效果入门

10. CSS3 transition实现超酷图片墙动画效果

本文来源:https://www.51html5.com/a876.html

点击展开全部

﹝CSS3 动画齿轮﹞相关内容

「CSS3 动画齿轮」相关专题

其它栏目

也许您还喜欢