html5 摆动,css3+html5——摆动的钟表

先为大家提供两张钟表和指针的图：(具体大小需要自己下去调)

然后是效果图：

代码如下：

摆动的钟表

body{

margin: 0;

background: #111;

text-align: center;

}

h1{

font-size: 14px;

font-family: "Microsoft YaHei UI";

text-align: center;

}

.stage{

width: 120px;

height:auto;

margin: 0 auto;

position: relative;

-webkit-transform-origin: center top;

-webkit-transform: rotate(-30deg);

-webkit-animation: sway 2.2s infinite alternate ease-in-out;/*alternate:反向*/

}

.watch{

width: 100%;

height: auto;

}

.seconds{

position: absolute;

width: 8%;

height:auto;

bottom:11%;

left:45.5%;

-webkit-transform-origin: center 68%;

-webkit-animation: second 60s infinite linear;/*infinite:无限循环*/

}

@-webkit-keyframes second {

to{

-webkit-transform: rotate(355deg);

}

}

@-webkit-keyframes sway {

to{

-webkit-transform: rotate(30deg);

}

}

本文讲解了利用css3+html5制作摆动的钟表，更多相关内容请关注Gxl网。

相关推荐：

简易 PHP+MySQL 分页类

两个不用递归的树形数组构造函数

HTML转Excel，并实现打印，下载功能