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
Docker image compression and optimization operations
The reason why Docker is so popular nowadays is m...
JavaScript to achieve JD.com flash sale effect
This article shares the specific code of JavaScri...
Use of hasOwnProperty method of js attribute object
Object's hasOwnProperty() method returns a Bo...
CSS3 custom scroll bar style::webkit-scrollbar sample code detailed explanation
The default scroll bar style in Windows is ugly, ...
Two ways to connect WeChat mini program to Tencent Maps
I've been writing a WeChat applet recently an...
4 Practical Tips for Web Page Design
Related articles: 9 practical tips for creating we...
Do you know how to use the flash wmode attribute in web pages?
When doing web development, you may encounter the...
Rainbow button style made with CSS3
Result: Implementation code: html <div class=&...
Example of Vue's implementation of the underlying code for simulating responsive principles
Table of contents 1.Vue.js features: 2.Observer.j...
Vue component encapsulates sample code for uploading pictures and videos
First download the dependencies: cnpm i -S vue-uu...
Analysis of the project process in idea packaging and uploading to cloud service
one. First of all, you have to package it in idea...
Detailed analysis of compiling and installing vsFTP 3.0.3
Vulnerability Details VSFTP is a set of FTP serve...
el-table in vue realizes automatic ceiling effect (supports fixed)
Table of contents Preface Implementation ideas Ef...
js to realize login and registration functions
This article example shares the specific code of ...
Share the problem of Ubuntu 19 not being able to install docker source
According to major websites and personal habits, ...