首页 > 代码库 > 用CSS3和table标签实现一个圆形轨迹的动画
用CSS3和table标签实现一个圆形轨迹的动画
html：其实就是根据table标签把几个实心圆div进行等边六角形的排布，并放入一个div容器中，然后利用CSS3的循环旋转的动画效果对最外层的div容器进行自转实现，当然不要忘了把div容器的外边框设置圆形弧度的。
1 <div class="animation_div"> 2 <table class="table_class"> 3 <tr> 4 <td></td> 5 <td> 6 <div class="BMI" ng-click="compriseClicked(‘BMI‘)" ng-class="{isSelected:clickUrlKey==‘BMI‘}"> 7 <strong>BMI</strong> 8 </div> 9 </td>10 <td></td>11 <td>12 <div class="color_blind" ng-click="compriseClicked(‘color_blind‘)" ng-class="{isSelected:clickUrlKey==‘color_blind‘}">13 <strong>色盲色弱</strong>14 </div>15 </td>16 <td></td>17 </tr>18 <tr>19 <td>20 <div class="space_div"></div>21 </td>22 </tr>23 <tr>24 <td>25 <div class="HR" ng-click="compriseClicked(‘HR‘)" ng-class="{isSelected:clickUrlKey==‘HR‘}">26 <strong>心率</strong>27 </div>28 </td>29 <td></td>30 <td>31 <a href="#/app/custom_made/counselor/{{clickUrlKey}}" style="text-decoration: none;32 color: black;">33 <div class="start_test">34 <strong>开始测试</strong>35 </div>36 </a>37 </td>38 <td></td>39 <td>40 <div class="fat_content" ng-click="compriseClicked(‘fat_content‘)" ng-class="{isSelected:clickUrlKey==‘fat_content‘}">41 <strong>脂肪含量</strong>42 </div>43 </td>44 </tr>45 <tr>46 <td>47 <div class="space_div"></div>48 </td>49 </tr>50 <tr>51 <td></td>52 <td>53 <div class="WHR" ng-click="compriseClicked(‘WHR‘)" ng-class="{isSelected:clickUrlKey==‘WHR‘}">54 <strong>腰臀比</strong>55 </div>56 </td>57 <td></td>58 <td>59 <div class="safe_period" ng-click="compriseClicked(‘safe_period‘)" ng-class="{isSelected:clickUrlKey==‘safe_period‘}">60 <strong>安全期</strong>61 </div>62 </td>63 <td></td>64 </tr>65 </table>66 </div>67 68 <h3>clickUrlKey:{{clickUrlKey}}</h3>
css：因为在圆形的轨迹中有6个实心圆，分别设置了不同的类以方便自定义，所以当中实心圆的样式设置有重复的地方，还可以进行优化，在这就先不处理了
1 <style> 2 /*定义动画*/ 3 4 @-webkit-keyframes round_animation { 5 0%{ 6 -webkit-transform:rotate(0deg); 7 width:260px; 8 height:260px; 9 } 10 100%{ 11 -webkit-transform:rotate(360deg); 12 width:260px; 13 height:260px; 14 left:0px; 15 top:0px; 16 } 17 } 18 19 /*定义外框的样式*/ 20 /*调用动画并设置动画的参数*/ 21 22 .animation_div { 23 -webkit-transform-origin:center center; /*定义旋转中心点*/ 24 -webkit-animation:round_animation 15s infinite alternate; /*infinite alternate表示循环播放动画*/ 25 26 margin: 60px auto; 27 width:260px; 28 height:260px; 29 border: 1px solid black; 30 border-radius: 130px; 31 left:0px; 32 top:0px; 33 } 34 35 .animation_div strong { 36 font-size: 12px; 37 } 38 39 .BMI { 40 width: 50px; 41 height: 50px; 42 background-color: orange; 43 border-radius: 100px; 44 text-align: center; 45 46 /*文字垂直居中*/ 47 vertical-align: middle; 48 line-height: 50px; 49 } 50 51 .color_blind { 52 width: 50px; 53 height: 50px; 54 background-color: green; 55 border-radius: 100px; 56 text-align: center; 57 58 /*文字垂直居中*/ 59 vertical-align: middle; 60 line-height: 50px; 61 } 62 63 .HR{ 64 margin-left: -15px; 65 width: 50px; 66 height: 50px; 67 background-color: blue; 68 border-radius: 100px; 69 text-align: center; 70 71 /*文字垂直居中*/ 72 vertical-align: middle; 73 line-height: 50px; 74 } 75 76 .start_test { 77 width: 60px; 78 height: 60px; 79 background-color: red; 80 border-radius: 100px; 81 text-align: center; 82 83 /*文字垂直居中*/ 84 vertical-align: middle; 85 line-height: 50px; 86 } 87 88 .fat_content { 89 margin-left: 15px; 90 width: 50px; 91 height: 50px; 92 background-color: gray; 93 border-radius: 100px; 94 text-align: center; 95 96 /*文字垂直居中*/ 97 vertical-align: middle; 98 line-height: 50px; 99 }100 101 .WHR {102 width: 50px;103 height: 50px;104 background-color: purple;105 border-radius: 100px;106 text-align: center;107 108 /*文字垂直居中*/109 vertical-align: middle;110 line-height: 50px;111 }112 113 .safe_period {114 width: 50px;115 height: 50px;116 background-color: yellow;117 border-radius: 100px;118 text-align: center;119 120 /*文字垂直居中*/121 vertical-align: middle;122 line-height: 50px;123 }124 125 .space_div {126 width: 50px;127 height: 50px;128 background-color: clear;129 border-radius: 100px;130 }131 132 .rightmenu_btn {133 height: 60px;134 float: none;135 }136 137 .rightmenu_btn button {138 margin-top: 50px;139 width: 20px;140 height: 60px;141 border: 1px solid rgb(221, 221, 221);142 border-right: 0px;143 float: right;144 }145 146 .isSelected {147 border: 1px solid red;148 }149 </style>
JS：这里的代码可以不实现，因为这跟动画的效果无关，是一个点击的响应事件
1 angular.module(‘starter.controllers‘, [])2 .controller(‘healthCtrl‘, function($scope, $location) {3 $scope.clickUrlKey = "BMI";4 $scope.compriseClicked = function(clickUrlKey) {5 $scope.clickUrlKey = clickUrlKey;6 };7 })8 9 ；
效果图如下：
用CSS3和table标签实现一个圆形轨迹的动画
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。