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

网页制作 2025/1/26 佚名

3 2 1

鸳鸯亭资源网 Design By www.gvabc.com

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="#/app/custom_made/counselor/{{clickUrlKey}}" style="text-decoration: none;
                        color: black;">
                        <div class="start_test">
                            <strong>开始测试</strong>
                        </div>
                    </a>
                </td>
                <td></td>
                <td>
                    <div class="fat_content" ng-click="compriseClicked('fat_content')" ng-class="{isSelected:clickUrlKey=='fat_content'}">
                        <strong>脂肪含量</strong>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="space_div"></div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div class="WHR" ng-click="compriseClicked('WHR')" ng-class="{isSelected:clickUrlKey=='WHR'}">
                        <strong>腰臀比</strong>
                    </div>
                </td>
                <td></td>
                <td>
                    <div class="safe_period" ng-click="compriseClicked('safe_period')" ng-class="{isSelected:clickUrlKey=='safe_period'}">
                        <strong>安全期</strong>
                    </div>
                </td>
                <td></td>
            </tr>
        </table>
    </div>
    
    <h3>clickUrlKey:{{clickUrlKey}}</h3>

css：因为在圆形的轨迹中有6个实心圆，分别设置了不同的类以方便自定义，所以当中实心圆的样式设置有重复的地方，还可以进行优化，在这就先不处理了

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

JS：这里的代码可以不实现，因为这跟动画的效果无关，是一个点击的响应事件

angular.module('starter.controllers', [])
    .controller('healthCtrl', function($scope, $location) {
        $scope.clickUrlKey = "BMI";
        $scope.compriseClicked = function(clickUrlKey) {
            $scope.clickUrlKey = clickUrlKey;
        };
    })

效果图如下：

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

CSS3,圆形轨迹

标签：

CSS3,圆形轨迹

鸳鸯亭资源网 Design By www.gvabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

鸳鸯亭资源网 Design By www.gvabc.com

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

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月26日

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

CSS3,圆形轨迹

纯CSS实现表单验证的示例代码

简单几步用纯CSS3实现3D翻转效果

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接