html5——动画案例（时钟）
1、秒钟转360度需要60s分60步
2、分针转360度需要3600s分60步
3、秒钟转360度需要43200s分60步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.watch {
width: 200px;
height: 200px;
border: 2px solid #000;
margin: 150px auto;
position: relative;
border-radius: 50%;
} .watch .line {
width: 4px;
height: 200px;
position: absolute;
top: 0;
left: 50%;
margin-left: -2px;
background-color: #ccc;
} .line2 {
transform: rotate(30deg);
} .line3 {
transform: rotate(60deg);
} .line4 {
transform: rotateZ(90deg);
} .line5 {
transform: rotateZ(120deg);
} .line6 {
transform: rotateZ(150deg);
} .cover {
position: absolute;
top: 50%;
left: 50%;
margin-top: -85px;
margin-left: -85px;
width: 170px;
height: 170px;
background-color: #fff;
border-radius: 50%;
} .second, .minute, .hours {
position: absolute;
left: 50%;
background-color: pink;
opacity: 0.6;
transform-origin: bottom center;
} .second {
width: 3px;
margin-left: -1.5px;
height: 86px;
top: 50%;
margin-top: -86px;
animation: gun 60s infinite steps(60);
} .minute {
width: 4px;
margin-left: -2px;
height: 66px;
top: 50%;
margin-top: -66px;
background-color: #CC8E8F;
animation: gun 3600s infinite steps(60);
} .hours {
width: 7px;
margin-left: -3.5px;
height: 50px;
top: 50%;
margin-top: -50px;
background-color: #AB7878;
animation: gun 43200s infinite steps(60);
} .button {
width: 16px;
height: 16px;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
background-color: #000000;
} @keyframes gun {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="watch">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
<div class="line line6"></div>
<div class="cover"></div>
<div class="second"></div>
<div class="minute"></div>
<div class="hours"></div>
<div class="button"></div>
</div>
</body>
</html>
html5——动画案例（时钟）的更多相关文章
- html5——动画案例（无缝滚动）
无缝滚动:是两组拼在一起的 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- html5——动画案例（大海）
太阳的发散效果主要是利用transform: scale(1.3),将物体变大 <!DOCTYPE html> <html lang="en"> <h ...
- html5——动画案例（太阳系）
太阳系主要利用定位,伪元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 精选19款华丽的HTML5动画和实用案例
下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...
- HTML5应用之时钟
利用HTML5的Canvas API可以完成我们以前意想不到的动画效果,以前我们想在网页上放置一个时钟,需要先用flash工具制作一个钟表,并写上复杂的JavaScript代码,然后载入到页面中.而H ...
- 绝对震撼 7款HTML5动画应用及源码
1.HTML5 Canvas模拟衣服撕扯动画 超级逼真 今天又要来推荐一款HTML5 Canvas动画,是一个模拟衣服撕扯动画,效果非常逼真.刚开始衣服挂在绳子上,用鼠标拖拽衣服即可让衣服摆动起来,当 ...
- HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...
- 15款HTML5/CSS3案例展示，导航，日历，钟表。
对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感.今天我们要分享9款精挑细选的HTML5应用,个个都是干货. 1.HTML5/CSS3滑块动画菜单 图标动画 ...
- 8个超炫酷仿苹果应用的HTML5动画
苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...
随机推荐
- iphone学习
苹果开发者联盟的网址:http://www.apple.com.cn/developer/ objective-C on the Mac (Aoress) 作者:Dakrymple ...
- ios学习之旅---指针也不难
1.认识指针 #include <stdio.h> //基本数据类型作为函数參数传递是值传递 //void moveFront(int x ,int y) //{ // x = x + 2 ...
- Solid Edge如何快速装配，如何截取组装关系式
我们点击装配体的任意零件,下方将显示他的装配关系,由于一些零件的装配关系是固定的,比如螺栓,肯定要做一个面贴和,再做一个同轴,所以我们可以保存这些固有的步骤,不用再每次挨个点击这些装配关系. 点击 ...
- PHP移动互联网开发笔记（3）——运算符
原文地址:http://www.php100.com/html/php/rumen/2014/0326/6704.html 一.PHP的运算符 PHP中有丰富的运算符集,它们中大部分直接来自于C语言. ...
- 为PhoneGap写一个android插件
为PhoneGap写一个android插件,要怎么做? 其实这句话应该反过来说,为android写一个PhoneGap插件,要怎么做? 这里以最简单的Hello World!为例,做个说明: 1.第一 ...
- Eclipse下单个文件中文乱码问题
有时候用eclipse打开单个文件,会出现中文乱码问题. 这时可以点菜单栏 Edit -> Set Encoding,Other:UTF-8,通常可以解决问题.
- Window attributes属性详解
以下属性以Dialog为例来讲解: <item name="windowBackground"> 窗体的背景 </item><item name=&q ...
- changing permissions of Read-only file system in linux
up vote 2 down vote favorite 1 i use this command to make a bootable flash disk of linux mint sudo ...
- 在Sql Server触发器中判断操作是Insert还是Update还是Delete
在Sql Server触发器中判断操作是Insert还是Update还是Delete DECLARE @IsInsert bit, @IsUpdate bit, @IsDelete ...
- 树的遍历 迭代算法——思路：初始化stack，pop stack利用pop的node，push new node to stack，可以考虑迭代一颗树 因为后序遍历最后还要要访问根结点一次，所以要访问根结点两次是难点
144. Binary Tree Preorder Traversal Given a binary tree, return the preorder traversal of its nodes' ...