用CSS3和table标签实现一个圆形轨迹的动画的示例代码

html:其实就是根据table标签把几个实心圆div进行等边六角形的排布,并放入一个div容器中,然后利用CSS3的循环旋转的动画效果对最外层的div容器进行自转实现,当然不要忘了把div容器的外边框设置圆形弧度的。

<div class="animation_div">
        <table class="table_class">
            <tr>
                <td></td>
                <td>
                    <div class="BMI" ng-click="compriseClicked('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=http://www.cppcns.com/web/css/"#/app/custom_made/counselor/{{clickUrlKey}}" style="text-decoration: none;
                        color: black;">
                        
开始测试
<style> /*定义动画*/ @-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; } </style>

用CSS3和table标签实现一个圆形轨迹的动画的示例代码

扫一扫手机访问