html设置table表格的弧度,用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; /*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;

};

})

效果图如下：

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