html设置table表格的弧度,用CSS3和table标签实现一个圆形轨迹的动画的示例代码
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)題。
- 上一篇: win10怎么取消图标盾牌 Win10如
- 下一篇: 惠普台式怎么进去u盘启动 惠普台式机如何