用CSS3和table标签实现一个圆形轨迹的动画的示例代码
发布时间:2019-01-17 16:07:29 作者:纠纠结结 我要评论
这篇文章主要介绍了用CSS3和table标签实现一个圆形轨迹的动画的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
html:其实就是根据table标签把几个实心圆div进行等边六角形的排布,并放入一个div容器中,然后利用CSS3的循环旋转的动画效果对最外层的div容器进行自转实现,当然不要忘了把div容器的外边框设置圆形弧度的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | < 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个实心圆,分别设置了不同的类以方便自定义,所以当中实心圆的样式设置有重复的地方,还可以进行优化,在这就先不处理了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | <style> /*定义动画*/ @-webkit-keyframes round_animation { 0% { -webkit-transform:rotate( 0 deg); width : 260px ; height : 260px ; } 100% { -webkit-transform:rotate( 360 deg); width : 260px ; height : 260px ; left : 0px ; top : 0px ; } } /*定义外框的样式*/ /*调用动画并设置动画的参数*/ .animation_div { -webkit-transform-origin: center center ; /*定义旋转中心点*/ -webkit-animation:round_animation 15 s 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:这里的代码可以不实现,因为这跟动画的效果无关,是一个点击的响应事件
1 2 3 4 5 6 7 | angular.module( 'starter.controllers' , []) .controller( 'healthCtrl' , function ($scope, $location) { $scope.clickUrlKey = "BMI" ; $scope.compriseClicked = function (clickUrlKey) { $scope.clickUrlKey = clickUrlKey; }; }) |
效果图如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- CSS3和SVG的结合使用为网页设计带来了创新的动态视觉效果,本文通过一个圆形进度条的动画特效示例,展示了如何利用CSS3的动画功能和SVG的矢量图形能力来创建丰富的用户交互体2024-10-24
- 本文解析了CSS属性box-shadow的用法和应用,属性可以设置一个或多个下拉阴影的框,通过box-shadow属性,可以定义水平阴影的位置、垂直阴影的位置、模糊距离、阴影的大小和颜色2024-10-21
- CSS3的@media查询功能允许我们根据不同的媒体类型和设备特性来应用不同的样式规则,,本文详细探讨了@media查询的定义、语法、使用场景及注意事项,旨在帮助开发者更好地理解2024-10-17
CSS3 新特性 box-shadow 阴影效果、圆角border-radius效果实现
CSS3的border-radius属性可以轻松制作圆角效果,支持一至四个值来分别定义四个角的圆角大小,一个值时所有角圆角相同,两个值时对角线上的角相同,本文给大家介绍CSS3 新特性 b2024-10-17- CSS3动画为网页设计带来了丰富的动态效果,使得页面更加生动和吸引人,然而,有时我们希望动画在结束时保持最终状态,而不是回到初始状态,本文将介绍几种方法来实现这一效果2024-10-15
- 伪元素和伪类都增强了CSS选择器的功能,但它们有明显的区别,伪元素通过::表示,如::before和::after,用于向元素添加或修改内容,伪类则通过:表示,如:hover和:first-child,用于2024-10-15
- 本文介绍了使用CSS3实现各种样式效果的方法,包括文字渐变、圆角、阴影、多重背景等,通过实例代码,展示了如何简洁有效地增强网页视觉效果,无需额外图像或复杂脚本,适合前端2024-09-13
- 在Web开发中,动态滚动播放列表能够提升用户体验,使内容展示更加生动有趣,本文介绍了如何仅使用CSS3实现一个基础的循环播放列表,其中关键技术包括@keyframes规则和animat2024-09-11
- 之前有做过一个需求,安卓端嵌H5页面,实现语音输入并包含输入时动画,跳动的小球,多个小球同时跳动,相对定位需要left不相同,其次每个小球动画开始有时间差,其次就是小2024-08-29
详解CSS3 边框样式(包含border-radius、border-image与box-shadow)
这篇文章主要介绍了CSS3 边框样式(包含border-radius、border-image与box-shadow)的相关知识,本文给大家介绍的非常详细,,需要的朋友可以参考下2024-08-29
最新评论