如图所示：

css部分：

<style>

#clock{width:100px; height:100px;

border-radius:50%;

border:4px solid black;

position:relative;

}

#s{width:2px; height:55px;

position:absolute; top:5px; left:49px;

background-color:red;

transform-origin:50% 45px;

-webkit-animation:rotate 60s linear infinite;

}

#m{width:4px; height:50px;

position:absolute; top:10px; left:48px;

background-color:black;

transform-origin:50% 40px;

-webkit-animation:rotate 3600s linear infinite;

}

#h{width:6px; height:45px;

position:absolute; top:15px; left:47px;

background-color:black;

transform-origin:50% 35px;

-webkit-animation:rotate 43200s linear infinite;

}

@-webkit-keyframes rotate{

0%{transform:rotate(0deg)}

100%{transform:rotate(360deg)}

}

div[id^="a"]{position:absolute;

font-size:.1em; text-align:center;

width:7px; height:5px;

top:; left: 46.5px;

transform-origin:50% 50px;

}

#a1{transform:rotate(30deg)}

#a2{transform:rotate(60deg)}

#a3{transform:rotate(90deg)}

#a4{transform:rotate(120deg)}

#a5{transform:rotate(150deg)}

#a6{transform:rotate(180deg)}

#a7{transform:rotate(210deg)}

#a8{transform:rotate(240deg)}

#a9{transform:rotate(270deg)}

#a10{transform:rotate(300deg)}

#a11{transform:rotate(330deg)}

</style>

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

<meta charset="utf-8"/>

</head>

<body>

<div id="clock">

<div id="h"></div>

<div id="m"></div>

<div id="s"></div>

<div id="a1">I</div>

<div id="a2">II</div>

<div id="a3">III</div>

<div id="a4">IIII</div>

<div id="a5">V</div>

<div id="a6">VI</div>

<div id="a7">VII</div>

<div id="a8">VIII</div>

<div id="a9">IX</div>

<div id="a10">X</div>

<div id="a11">XI</div>

<div id="a12">XII</div>

</div>

</body>

</html>

css3实现旋转表的更多相关文章

  1. 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行

    [微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...

  2. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  3. 纯css3实现旋转的太极图

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...

  4. CSS3实现旋转的太极图（二）：只用1个DIV

    效果预览:   PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...

  5. CSS3绘制旋转的太极图案（一）

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  6. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  7. 9款大气实用的HTML5/CSS3注册登录表单

    1.HTML5/CSS3仿Facebook登录表单 利用CSS3制作的登录表单的确很漂亮,我们在html5tricks网站上也分享过几款了,比如CSS3密码强度验证表单可以显示密码的强度,这款纯CSS ...

  8. 自制“低奢内”CSS3登入表单，包含JS验证，请别嫌弃哦。

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...

  9. 【Demo】CSS3元素旋转、缩放、移动或倾斜

    CSS3元素旋转.缩放.移动或倾斜 代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

随机推荐

  1. java结合testng，利用excel做数据源的数据驱动实例

    数据驱动部分,是自动化测试常用部分,也是参数化设计的重要环节,前面分享了,mysql.yaml做数据源,那么再来分享下excel做数据驱动 思路: 先用POI读取excel.解析读取数据,返回list ...

  2. mysql定时任务,每天的零点执行一个存储过程

    1 前言 利用navicat工具来写存储过程及定时执行,此文章是按照自身经验总结的,仅作为记录使用. 2 步骤 2.1 新建过程 2.2 在函数体写你需要执行的代码 CREATE DEFINER=`r ...

  3. BeautifulSoup解析器的选择

    BeautifulSoup解析器 在我们使用BeautifulSoup的时候,选择怎样的解析器是至关重要的.使用不同的解析器有可能会出现不同的结果! 今天遇到一个坑,在解析某html的时候.使用htm ...

  4. python-函数入门（二）

    一.函数对象 什么是函数? 函数是第一类对象,指的是函数名指向的值(函数)可以被当做数据去使用 1.函数的特性 1.函数可以被引用,即函数可以把值赋值给一个变量 def foo(): print('f ...

  5. LuoGu P2735 电网 Electric Fences

    题目传送门 这个东西,本来我是用求出两条一次函数解析式然后判断在x坐标下的y坐标值来做的 首先因为没考虑钝角三角形,WA了 然后又因为精度处理不好又WA了 一气之下,只能去网上查了查那个皮克定理 首先 ...

  6. 谷歌被爆秘密研发新系统 欲5年内取代Android

    谷歌2年多来有一群工程师秘密研发新系统,希望最终能取代手机操作系统安卓.安卓日前遭欧盟以反垄断为由重罚. 谷歌的新研发计划Fuchsia是从零开始,希望在更多个人装置和各式小巧装置联机上网的情况下,能 ...

  7. Confluence 6 推荐的更新通知设置和禁用

    你可以设置默认的发送选项(发送 / 不发送)和默认的发送时间(每天或每周). 如何配置推荐更新电子邮件通知: 在屏幕的右上角单击 控制台按钮 ,然后选择 General Configuration 链 ...

  8. Confluence 6 配置避免管理员联系表单垃圾

    你可以配置 Confluence 使用验证码(Captcha)来避免垃圾内容发送给 Confluence 管理员.有关管理员联系表单验证码的内容在全站验证码设置中进行配置,相关的文档请参考 Confi ...

  9. LeetCode（71）：简化路径

    Medium! 题目描述: 给定一个文档 (Unix-style) 的完全路径,请进行路径简化. 例如,path = "/home/", => "/home&quo ...

  10. 【linux】复制文件夹中文件，排除部分文件

    如下 cp `ls|grep -v -E '*json|out'|xargs` /home/data/ 用grep -v  表示排除, -E 表示正则 ls|grep -v -E '*json|out ...