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

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

        

            

                

                

                    

                        BMI
                    
                
                

                

                    

                        色盲色弱
                    
                
                

            
            

                

                    

                
            
            

                

                    

                        心率
                    
                
                

                

                    
                        

                            开始测试
                        
                    
                
                

                

                    

                        脂肪含量
                    
                
            
            

                

                    

                
            
            

                

                

                    

                        腰臀比
                    
                
                

                

                    

                        安全期
                    
                
                

            
        
    
    
    
clickUrlKey:{{clickUrlKey}}

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

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

angular.module('starter.controllers', [])
    .controller('healthCtrl', function($scope, $location) {
        $scope.clickUrlKey = "BMI";
        $scope.compriseClicked = function(clickUrlKey) {
            $scope.clickUrlKey = clickUrlKey;
        };
    })

效果图如下：

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