Example code for implementing a circular trajectory animation using CSS3 and table tags

html: In fact, it is to arrange several solid circle divs in an equilateral hexagon according to the table tag, and put them into a div container, and then use the CSS3 circular rotation animation effect to rotate the outermost div container. Of course, don't forget to set the outer border of the div container to a circular arc.

<div class="animation_div">
        <table class="table_class">
            <tr>
                <td></td>
                <td>
                    <div class="BMI" ng-click="compriseClicked('BMI')" ng-class="{isSelected:clickUrlKey=='BMI'}">
                        BMI
                    </div>
                </td>
                <td></td>
                <td>
                    <div class="color_blind" ng-click="compriseClicked('color_blind')" ng-class="{isSelected:clickUrlKey=='color_blind'}">
                        Color blindness and color weakness
                    </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'}">
                        Heart rate
                    </div>
                </td>
                <td></td>
                <td>
                    <a href="#/app/custom_made/counselor/{{clickUrlKey}}" style="text-decoration: none;
                        color: black;">
                        <div class="start_test">
                            <strong>Start testing</strong>
                        </div>
                    </a>
                </td>
                <td></td>
                <td>
                    <div class="fat_content" ng-click="compriseClicked('fat_content')" ng-class="{isSelected:clickUrlKey=='fat_content'}">
                        Fat content
                    </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'}">
                        Waist-to-hip ratio
                    </div>
                </td>
                <td></td>
                <td>
                    <div class="safe_period" ng-click="compriseClicked('safe_period')" ng-class="{isSelected:clickUrlKey=='safe_period'}">
                        <strong>Safe period</strong>
                    </div>
                </td>
                <td></td>
            </tr>
        </table>
    </div>
    
    <h3>clickUrlKey:{{clickUrlKey}}</h3>

CSS: Because there are 6 solid circles in the circular track, different classes are set for customization. Therefore, there are some duplicate styles in the solid circles, which can be optimized. We will not deal with it here.

<style>
      /*define animation*/
      
      @-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;
          }
      }
      
      /*Define the style of the frame*/
      /*Call the animation and set the animation parameters*/
      
      .animation_div {
          -webkit-transform-origin:center center; /*Define the rotation center point*/
          -webkit-animation:round_animation 15s infinite alternate; /*infinite alternate means looping animation*/
          
          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 centering of text*/
          vertical-align: middle;
          line-height: 50px;
      }
      
      .color_blind {
          width: 50px;
          height: 50px;
          background-color: green;
          border-radius: 100px;
          text-align: center;
          
          /*Vertical centering of text*/
          vertical-align: middle;
          line-height: 50px;
      }
      
      .HR{
          margin-left: -15px;
          width: 50px;
          height: 50px;
          background-color: blue;
          border-radius: 100px;
          text-align: center;
          
          /*Vertical centering of text*/
          vertical-align: middle;
          line-height: 50px;
      }
      
      .start_test {
          width: 60px;
          height: 60px;
          background-color: red;
          border-radius: 100px;
          text-align: center;
          
          /*Vertical centering of text*/
          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 centering of text*/
          vertical-align: middle;
          line-height: 50px;
      }
      
      .WHR {
          width: 50px;
          height: 50px;
          background-color: purple;
          border-radius: 100px;
          text-align: center;
          
          /*Vertical centering of text*/
          vertical-align: middle;
          line-height: 50px;
      }
      
      .safe_period {
          width: 50px;
          height: 50px;
          background-color: yellow;
          border-radius: 100px;
          text-align: center;
          
          /*Vertical centering of text*/
          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: The code here can be ignored because it has nothing to do with the animation effect. It is a click response event.

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

The effect diagram is as follows:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Analyze the usage and principles of Vue's provide and inject

>>: Detailed explanation and practical exercises of Mysql tuning Explain tool (recommended)