效果图表
大家好。 今天给大家带来的是
《HTML5+CSS3闹钟动画特效源码》
可以作为漂亮的小装饰添加到网站上
代码过长需要文档版源码来我的前端群581549454，已上传到群文件
胡说当然，上传到源代码
CSS源码：
body {后台： # 8fd5d 5；
}
. contain-clock {
position: relative；
margin :-100 px自动；
width: 155px；
高： 200 px；
-维基动画： alarm-21 ms infinite；
animation : alarm-21 ms infinite；
}
. face-1 {
位置： absolute；
top: 23px；
left: 23px；
z-index: 3；
背景：白色；
border-radius: 50%；
width: 109px；
height: 109px；
}
. face-2 {
position: relative；
margin : 200 px自动；
z-index: 2；
背景：白色；
border : 15px固态硬盘# ed6e 46；
border-radius: 50%；
width: 125px；
height: 125px；
}
. line {
位置： absolute；
left: 50%；
玛格琳- left :-3px；
后台： gray；
width: 6px；
height: 126px；
}
. line-2 {
left: 63px；
变换：旋转(90度)；
- WebKit-transform : rotate (90 deg ) translate3d ) 0，0，0 )；
}
. line-3 {
玛格琳- left :-1px；
变换：旋转(30度)；
- WebKit-transform : rotate (30 deg ) translate3d ) 0，0，0 )；
width: 2px；
}
. line-4 {
玛格琳- left :-1px；
变换： rotate (-30 deg )；
- WebKit-transform : rotate (-30 deg ) translate3d ) 0，0，0 )；
width: 2px；
}
. line-5 {
玛格琳- left :-1px；
变换：旋转(60度)；
- WebKit-transform :旋转(60度) translate3d ) 0，0，0 )；
width: 2px；
}
. line-6 {
玛格琳- left :-1px；
变换： rotate (-60 deg )；
- WebKit-transform : rotate (-60 deg ) translate3d ) 0，0，0 )；
width: 2px；
}
. hour {
位置： absolute；
top: 50%；
left: 50%；
z-index: 5；
玛格琳- left :-4px；
后台： # F8 b 65 b；
变换- origin : top；
- WebKit-transform-origin : top；
变换：旋转(90度)；
- WebKit-transform 3360 rotate (90度)；
border-radius: 50px；
width: 8px；
height: 35px；
}
. minute {
p>position: absolute;
top: 5px;
left: 55px;
z-index: 3;
margin-left: -4px;
background: #f8b65b;
border-radius: 50px;
transform-origin: bottom;
-webkit-transform-origin: bottom;
width: 8px;
height: 50px;
animation: tick-tock 3600s steps(60, end) infinite;
-webkit-animation: tick-tock 3600s steps(60, end) infinite;
}
.second {
position: absolute;
top: 5px;
left: 56px;
z-index: 5;
margin-left: -2px;
background: #333333;
border-radius: 50px;
transform-origin: bottom;
-webkit-transform-origin: bottom;
width: 2px;
height: 50px;
animation: tick-tock 60s steps(60, end) infinite;
-webkit-animation: tick-tock 60s steps(60, end) infinite;
}
.center {
position: absolute;
top: 62px;
z-index: 20;
margin-top: -15px;
left: 55px;
margin-left: -8px;
border-radius: 50%;
background: #ed6e46;
width: 16px;
height: 16px;
}
.arm {
position: absolute;
top: -50px;
left: 73px;
z-index: 1;
background: gray;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
border-radius: 50px;
width: 10px;
height: 230px;
}
.arm-2 {
left: 71px;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
.bell {
position: absolute;
top: -30px;
z-index: 2;
background: #ed6e46;
border-radius: 50% 50% 10% 10%;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
width: 65px;
height: 35px;
}
.bell-2 {
left: 90px;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
.hammer {
position: absolute;
top: -25px;
left: 76px;
z-index: 1;
background: gray;
width: 3px;
height: 30px;
-webkit-animation: alarm 8ms infinite;
animation: alarm 8ms infinite;
}
.hammer:before {
content: '';
display: block;
position: absolute;
left: -6px;
background: gray;
border-radius: 50px;
width: 15px;
height: 5px;
}
.handle {
position: absolute;
top: -68px;
left: 32px;
border: 8px solid gray;
border-radius: 50px 50px 0 0;
width: 75px;
height: 30px;
}
.handle:after {
content: '';
display: block;
position: absolute;
top: 26px;
background: #8fd5d5;
width: 75px;
height: 15px;
}
@keyframes tick-tock {
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes tick-tock {
to {
-webkit-transform: rotate(360deg) translate3d(0, 0, 0);
}
}
@-webkit-keyframes alarm {
from {
-webkit-transform-origin: bottom right;
-webkit-transform: rotate(15deg);
}
to {
-webkit-transform-origin: bottom left;
-webkit-transform: rotate(-15deg);
}
}
@keyframes alarm {
from {
transform-origin: bottom right;
transform: rotate(15deg);
}
to {
transform-origin: bottom left;
transform: rotate(-15deg);
}
}
@-webkit-keyframes alarm-2 {
from {
-webkit-transform: rotate(1deg);
}
to {
-webkit-transform: rotate(-1deg);
}
}
@keyframes alarm-2 {
from {
transform: rotate(1deg);
}
to {
transform: rotate(-1deg);
}
}