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


Posted in HTML / CSS onJanuary 17, 2019

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和table标签实现一个圆形轨迹的动画的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 #HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 #HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 #HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 #HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 #HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 #HTML / CSS
10分钟入门CSS3 Animation
Dec 25 #HTML / CSS
You might like
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
python验证码识别的实例详解
2016/09/09 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
python enumerate内置函数用法总结
2020/01/07 Python
python实现一个猜拳游戏
2020/04/05 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
学前教育毕业生自荐信
2013/10/29 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
校长就职演讲稿
2014/01/06 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
2014年教研组工作总结
2014/11/26 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
python Polars库的使用简介
2021/04/21 Python