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>
css:因为在圆形的轨迹中有6个实心圆,分别设置了不同的类以方便自定义,所以当中实心圆的样式设置有重复的地方,还可以进行优化,在这就先不处理了
JS:这里的代码可以不实现,因为这跟动画的效果无关,是一个点击的响应事件
- angular.module('starter.controllers', [])
- .controller('healthCtrl', function($scope, $location) {
- $scope.clickUrlKey = "BMI";
- $scope.compriseClicked = function(clickUrlKey) {
- $scope.clickUrlKey = clickUrlKey;
- };
- })
效果图如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。