用CSS3和table标签实现一个圆形轨迹的动画

浏览数：52 / 时间：2015年06月09日

html：其实就是根据table标签把几个实心圆div进行等边六角形的排布，并放入一个div容器中，然后利用CSS3的循环旋转的动画效果对最外层的div容器进行自转实现，当然不要忘了把div容器的外边框设置圆形弧度的。

 1 <div class="animation_div">
 2         <table class="table_class">
 3             <tr>
 4                 <td></td>
 5                 <td>
 6                     <div class="BMI" ng-click="compriseClicked(‘BMI‘)" ng-class="{isSelected:clickUrlKey==‘BMI‘}">
 7                         <strong>BMI</strong>
 8                     </div>
 9                 </td>
10                 <td></td>
11                 <td>
12                     <div class="color_blind" ng-click="compriseClicked(‘color_blind‘)" ng-class="{isSelected:clickUrlKey==‘color_blind‘}">
13                         <strong>色盲色弱</strong>
14                     </div>
15                 </td>
16                 <td></td>
17             </tr>
18             <tr>
19                 <td>
20                     <div class="space_div"></div>
21                 </td>
22             </tr>
23             <tr>
24                 <td>
25                     <div class="HR" ng-click="compriseClicked(‘HR‘)" ng-class="{isSelected:clickUrlKey==‘HR‘}">
26                         <strong>心率</strong>
27                     </div>
28                 </td>
29                 <td></td>
30                 <td>
31                     <a href="#/app/custom_made/counselor/{{clickUrlKey}}" style="text-decoration: none;
32                         color: black;">
33                         <div class="start_test">
34                             <strong>开始测试</strong>
35                         </div>
36                     </a>
37                 </td>
38                 <td></td>
39                 <td>
40                     <div class="fat_content" ng-click="compriseClicked(‘fat_content‘)" ng-class="{isSelected:clickUrlKey==‘fat_content‘}">
41                         <strong>脂肪含量</strong>
42                     </div>
43                 </td>
44             </tr>
45             <tr>
46                 <td>
47                     <div class="space_div"></div>
48                 </td>
49             </tr>
50             <tr>
51                 <td></td>
52                 <td>
53                     <div class="WHR" ng-click="compriseClicked(‘WHR‘)" ng-class="{isSelected:clickUrlKey==‘WHR‘}">
54                         <strong>腰臀比</strong>
55                     </div>
56                 </td>
57                 <td></td>
58                 <td>
59                     <div class="safe_period" ng-click="compriseClicked(‘safe_period‘)" ng-class="{isSelected:clickUrlKey==‘safe_period‘}">
60                         <strong>安全期</strong>
61                     </div>
62                 </td>
63                 <td></td>
64             </tr>
65         </table>
66     </div>
67     
68     <h3>clickUrlKey:{{clickUrlKey}}</h3>

css：因为在圆形的轨迹中有6个实心圆，分别设置了不同的类以方便自定义，所以当中实心圆的样式设置有重复的地方，还可以进行优化，在这就先不处理了

  1 <style>
  2       /*定义动画*/
  3       
  4       @-webkit-keyframes round_animation {
  5           0%{
  6               -webkit-transform:rotate(0deg);
  7               width:260px;
  8               height:260px;
  9           }
 10           100%{
 11               -webkit-transform:rotate(360deg);
 12               width:260px;
 13               height:260px;
 14               left:0px;
 15               top:0px;
 16           }
 17       }
 18       
 19       /*定义外框的样式*/
 20       /*调用动画并设置动画的参数*/
 21       
 22       .animation_div {
 23           -webkit-transform-origin:center center;                       /*定义旋转中心点*/
 24           -webkit-animation:round_animation 15s infinite alternate;     /*infinite alternate表示循环播放动画*/
 25           
 26           margin: 60px auto;
 27           width:260px;
 28           height:260px;
 29           border: 1px solid black;
 30           border-radius: 130px;
 31           left:0px;
 32           top:0px;
 33       }
 34       
 35       .animation_div strong {
 36           font-size: 12px;
 37       }
 38       
 39       .BMI {
 40           width: 50px;
 41           height: 50px;
 42           background-color: orange;
 43           border-radius: 100px;
 44           text-align: center;
 45           
 46           /*文字垂直居中*/
 47           vertical-align: middle;
 48           line-height: 50px;
 49       }
 50       
 51       .color_blind {
 52           width: 50px;
 53           height: 50px;
 54           background-color: green;
 55           border-radius: 100px;
 56           text-align: center;
 57           
 58           /*文字垂直居中*/
 59           vertical-align: middle;
 60           line-height: 50px;
 61       }
 62       
 63       .HR{
 64           margin-left: -15px;
 65           width: 50px;
 66           height: 50px;
 67           background-color: blue;
 68           border-radius: 100px;
 69           text-align: center;
 70           
 71           /*文字垂直居中*/
 72           vertical-align: middle;
 73           line-height: 50px;
 74       }
 75       
 76       .start_test {
 77           width: 60px;
 78           height: 60px;
 79           background-color: red;
 80           border-radius: 100px;
 81           text-align: center;
 82           
 83           /*文字垂直居中*/
 84           vertical-align: middle;
 85           line-height: 50px;
 86       }
 87       
 88       .fat_content {
 89           margin-left: 15px;
 90           width: 50px;
 91           height: 50px;
 92           background-color: gray;
 93           border-radius: 100px;
 94           text-align: center;
 95           
 96           /*文字垂直居中*/
 97           vertical-align: middle;
 98           line-height: 50px;
 99       }
100       
101       .WHR {
102           width: 50px;
103           height: 50px;
104           background-color: purple;
105           border-radius: 100px;
106           text-align: center;
107           
108           /*文字垂直居中*/
109           vertical-align: middle;
110           line-height: 50px;
111       }
112       
113       .safe_period {
114           width: 50px;
115           height: 50px;
116           background-color: yellow;
117           border-radius: 100px;
118           text-align: center;
119           
120           /*文字垂直居中*/
121           vertical-align: middle;
122           line-height: 50px;
123       }
124       
125       .space_div {
126           width: 50px;
127           height: 50px;
128           background-color: clear;
129           border-radius: 100px;
130       }
131       
132       .rightmenu_btn {
133           height: 60px;
134           float: none;
135       }
136       
137       .rightmenu_btn button {
138           margin-top: 50px;
139           width: 20px;
140           height: 60px;
141           border: 1px solid rgb(221, 221, 221);
142           border-right: 0px;
143           float: right;
144       }
145       
146       .isSelected {
147           border: 1px solid red;
148       }
149   </style>

JS：这里的代码可以不实现，因为这跟动画的效果无关，是一个点击的响应事件

1 angular.module(‘starter.controllers‘, [])
2     .controller(‘healthCtrl‘, function($scope, $location) {
3         $scope.clickUrlKey = "BMI";
4         $scope.compriseClicked = function(clickUrlKey) {
5             $scope.clickUrlKey = clickUrlKey;
6         };
7     })
8 
9 ；