ht ML ：其实就是根据 table标签 把几个实心 圆 div进行等边六角形的排布，并放入一个div容器中，然后 利用 CSS3的循环旋转的动画效果对最外层的div容器进行自转实现，当然不要忘了把div容器的外边框设置圆形弧度的。
<div class="animation_div">
<table class="table_class">
<tr>
<td></td>
<td>
<div class="BMI" ng-click="com PR iseClicked('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_ PE riod" 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个实心圆，分别设置了不同的类以方便自定义，所以当中实心圆的样式设置有重复的地方，还可以进行优化，在这就先不处理了
<style>
/*定义动画*/
@- webkit -keyfr am es round_animation {
0%{
-webk IT -t ransform:rotate(0 deg );
width:260px;
h ei ght:260px;
}
100%{
-webkit-transform:rotate( 360 deg);
width:260px;
height:260px;
left:0px;
top:0px;
}
}
/*定义外框的样式*/
/*调用动画并设置动画的参数*/
.animation_div {
-webkit-transform-ori gin : center center; /*定义旋转中心点*/
-webkit-animation:round_animation 15s infinite alternate; /*infinite alternate表示循环播放动画*/
m arg in: 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;
/*文字垂直居中*/
vert ical -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_ BT n {
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;
}
</style>
JS：这里的代码可以不实现，因为这跟动画的效果无关，是一个点击的响应事件
Angular .module('starter.controllers', [])
.controller('healthCtrl', function($scope, $location) {
$scope.clickUrlKey = "BMI";
$scope .COM priseClicked = function(clickUrlKey) {
$scope.clickUrlKey = clickUrlKey;
};
})
效果图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 用CSS3和table标签实现一个圆形轨迹的动画的示例代码 全部内容，希望文章能够帮你解决 用CSS3和table标签实现一个圆形轨迹的动画的示例代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于用CSS3和table标签实现一个圆形轨迹的动画的示例代码的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did200758