html：其實(shí)就是根據(jù)table標(biāo)簽把幾個(gè)實(shí)心圓div進(jìn)行等邊六角形的排布，并放入一個(gè)div容器中，然后利用CSS3的循環(huán)旋轉(zhuǎn)的動(dòng)畫(huà)效果對(duì)最外層的div容器進(jìn)行自轉(zhuǎn)實(shí)現(xiàn)，當(dāng)然不要忘了把div容器的外邊框設(shè)置圓形弧度的。

	BMI		色盲色弱
心率		開(kāi)始測(cè)試		脂肪含量
	腰臀比		安全期

clickUrlKey:{{clickUrlKey}}

css：因?yàn)樵趫A形的軌跡中有6個(gè)實(shí)心圓，分別設(shè)置了不同的類以方便自定義，所以當(dāng)中實(shí)心圓的樣式設(shè)置有重復(fù)的地方，還可以進(jìn)行優(yōu)化，在這就先不處理了

/*定義動(dòng)畫(huà)*/

@-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;

}

}

/*定義外框的樣式*/

/*調(diào)用動(dòng)畫(huà)并設(shè)置動(dòng)畫(huà)的參數(shù)*/

.animation_div {

-webkit-transform-origin:center center; /*定義旋轉(zhuǎn)中心點(diǎn)*/

-webkit-animation:round_animation 15s infinite alternate; /*infinite alternate表示循環(huán)播放動(dòng)畫(huà)*/

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：這里的代碼可以不實(shí)現(xiàn)，因?yàn)檫@跟動(dòng)畫(huà)的效果無(wú)關(guān)，是一個(gè)點(diǎn)擊的響應(yīng)事件

angular.module('starter.controllers', [])

.controller('healthCtrl', function($scope, $location) {

$scope.clickUrlKey = "BMI";

$scope.compriseClicked = function(clickUrlKey) {

$scope.clickUrlKey = clickUrlKey;

};

})

效果圖如下：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的html设置table表格的弧度,用CSS3和table标签实现一个圆形轨迹的动画的示例代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。