html：其實就是根據(jù)table標簽把幾個實心圓div進行等邊六角形的排布，并放入一個div容器中，然后利用CSS3的循環(huán)旋轉的動畫效果對最外層的div容器進行自轉實現(xiàn)，當然不要忘了把div容器的外邊框設置圓形弧度的。
| <div class="animation_div"> <table class="table_class"> <tr> <td></td> <td> <div class="BMI" ng-click="compriseClicked('BMI')" ng-class="{isSelected:clickUrlKey=='BMI'}"> <strong>BMI</strong> </div> </td> <td></td> <td> <div class="color_blind" ng-click="compriseClicked('color_blind')" ng-class="{isSelected:clickUrlKey=='color_blind'}"> <strong>色盲色弱</strong> </div> </td> <td></td> </tr> <tr> <td> <div class="space_div"></div> </td> </tr> <tr> <td> <div class="HR" ng-click="compriseClicked('HR')" ng-class="{isSelected:clickUrlKey=='HR'}"> <strong>心率</strong> </div> </td> <td></td> <td> <a href="#/app/custom_made/counselor/{{clickUrlKey}}" style="text-decoration: none; color: black;"> <div class="start_test"> <strong>開始測試</strong> </div> </a> </td> <td></td> <td> <div class="fat_content" ng-click="compriseClicked('fat_content')" ng-class="{isSelected:clickUrlKey=='fat_content'}"> <strong>脂肪含量</strong> </div> </td> </tr> <tr> <td> <div class="space_div"></div> </td> </tr> <tr> <td></td> <td> <div class="WHR" ng-click="compriseClicked('WHR')" ng-class="{isSelected:clickUrlKey=='WHR'}"> <strong>腰臀比</strong> </div> </td> <td></td> <td> <div class="safe_period" ng-click="compriseClicked('safe_period')" ng-class="{isSelected:clickUrlKey=='safe_period'}"> <strong>安全期</strong> </div> </td> <td></td> </tr> </table> </div> <h3>clickUrlKey:{{clickUrlKey}}</h3> |
