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)
Recommend
A brief discussion on the mysql execution process and sequence
Table of contents 1:mysql execution process 1.1: ...
Nginx proxy forwarding implementation code uploaded by Alibaba Cloud OSS
Preface Because the mini program upload requires ...
Learn the basics of nginx
Table of contents 1. What is nginx? 2. What can n...
Summary of MySQL slow log practice
Slow log query function The main function of slow...
Detailed explanation of the usage of position attribute in HTML (four types)
The four property values of position are: 1.rel...
A brief discussion on the manifestation and value selection method of innodb_autoinc_lock_mode
Prerequisite: Percona 5.6 version, transaction is...
Nginx 502 Bad Gateway Error Causes and Solutions
I have encountered the Nginx 502 Bad Gateway erro...
Detailed explanation of MySQL data rows and row overflow mechanism
1. What are the formats of lines? You can see you...
Ajax responseText parses json data case study
Solve the problem that the responseText returned ...
Summary of MySQL ALTER command knowledge points
When we need to change the table name or modify t...
Solution to Django's inability to access static resources with uwsgi+nginx proxy
When deploying uwsgi+nginx proxy Django, access u...
Dockerfile implementation code when starting two processes in a docker container
I want to make a docker for cron scheduled tasks ...
JS implements the sample code of decimal conversion to hexadecimal
Preface When we write code, we occasionally encou...
Vue encapsulation component upload picture component
This article example shares the specific code of ...
JavaScript setTimeout and setTimeinterval use cases explained
Both methods can be used to execute a piece of ja...