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

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

 

     

  

  

      
   BMI
      
  
  

  

      
   色盲色弱
      
  
  

     
     

  

      
  
     
     

  

      
   心率
      
  
  

  

      
   
开始测试
   
      
  
  

  

      
   脂肪含量
      
  
     
     

  

      
  
     
     

  

  

      
   腰臀比
      
  
  

  

      
   安全期
      
  
  

     
 
    
    
    clickUrlKey:{{clickUrlKey}}

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

      
      
      @-webkit-keyframes round_animation {
   0%{
-webkit-transform:rotate(0deg);
width:260px;
height:260px;
   }
   100%{
-webkit-transform:rotate(360deg);
width:260px;
height:260px;
left:0px;
top:0px;
   }
      }
      
      
      
      
      .animation_div {
   -webkit-transform-origin:center center;  
   -webkit-animation:round_animation 15s infinite alternate;     
   
   margin: 60px auto;
   width:260px;
   height:260px;
   border: 1px solid black;
   border-radius: 130px;
   left:0px;
   top:0px;
      }
      
      .animation_div strong {
   font-size: 12px;
      }
      
      .BMI {
   width: 50px;
   height: 50px;
   background-color: orange;
   border-radius: 100px;
   text-align: center;
   
   
   vertical-align: middle;
   line-height: 50px;
      }
      
      .color_blind {
   width: 50px;
   height: 50px;
   background-color: green;
   border-radius: 100px;
   text-align: center;
   
   
   vertical-align: middle;
   line-height: 50px;
      }
      
      .HR{
   margin-left: -15px;
   width: 50px;
   height: 50px;
   background-color: blue;
   border-radius: 100px;
   text-align: center;
   
   
   vertical-align: middle;
   line-height: 50px;
      }
      
      .start_test {
   width: 60px;
   height: 60px;
   background-color: red;
   border-radius: 100px;
   text-align: center;
   
   
   vertical-align: middle;
   line-height: 50px;
      }
      
      .fat_content {
   margin-left: 15px;
   width: 50px;
   height: 50px;
   background-color: gray;
   border-radius: 100px;
   text-align: center;
   
   
   vertical-align: middle;
   line-height: 50px;
      }
      
      .WHR {
   width: 50px;
   height: 50px;
   background-color: purple;
   border-radius: 100px;
   text-align: center;
   
   
   vertical-align: middle;
   line-height: 50px;
      }
      
      .safe_period {
   width: 50px;
   height: 50px;
   background-color: yellow;
   border-radius: 100px;
   text-align: center;
   
   
   vertical-align: middle;
   line-height: 50px;
      }
      
      .space_div {
   width: 50px;
   height: 50px;
   background-color: clear;
   border-radius: 100px;
      }
      
      .rightmenu_btn {
   height: 60px;
   float: none;
      }
      
      .rightmenu_btn button {
   margin-top: 50px;
   width: 20px;
   height: 60px;
   border: 1px solid rgb(221, 221, 221);
   border-right: 0px;
   float: right;
      }
      
      .isSelected {
   border: 1px solid red;
      }
  

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

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

效果图如下：

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