html:其实就是根据table标签把几个实心圆div进行等边六角形的排布,并放入一个div容器中,然后利用CSS3的循环旋转的动画效果对最外层的div容器进行自转实现,当然不要忘了把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> |