用CSS3和table标签实现一个圆形轨迹的动画
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 ；
效果图如下：
