效果图

各位朋友大家好，今天给大家带来的是

《HTML5+CSS3闹钟动画特效源码》

可以添加在网站里面作为一个炫酷的小装饰

代码过长需要文档版源码来我的前端群581549454，已上传到群文件

废话不多说，上源码

body {

background: #8fd5d5;

}

.contain-clock {

position: relative;

margin: -100px auto;

width: 155px;

height: 200px;

-webkit-animation: alarm-2 1ms infinite;

animation: alarm-2 1ms infinite;

}

.face-1 {

position: absolute;

top: 23px;

left: 23px;

z-index: 3;

background: white;

border-radius: 50%;

width: 109px;

height: 109px;

}

.face-2 {

position: relative;

margin: 200px auto;

z-index: 2;

background: white;

border: 15px solid #ed6e46;

border-radius: 50%;

width: 125px;

height: 125px;

}

.line {

position: absolute;

left: 50%;

margin-left: -3px;

background: gray;

width: 6px;

height: 126px;

}

.line-2 {

left: 63px;

transform: rotate(90deg);

-webkit-transform: rotate(90deg) translate3d(0, 0, 0);

}

.line-3 {

margin-left: -1px;

transform: rotate(30deg);

-webkit-transform: rotate(30deg) translate3d(0, 0, 0);

width: 2px;

}

.line-4 {

margin-left: -1px;

transform: rotate(-30deg);

-webkit-transform: rotate(-30deg) translate3d(0, 0, 0);

width: 2px;

}

.line-5 {

margin-left: -1px;

transform: rotate(60deg);

-webkit-transform: rotate(60deg) translate3d(0, 0, 0);

width: 2px;

}

.line-6 {

margin-left: -1px;

transform: rotate(-60deg);

-webkit-transform: rotate(-60deg) translate3d(0, 0, 0);

width: 2px;

}

.hour {

position: absolute;

top: 50%;

left: 50%;

z-index: 5;

margin-left: -4px;

background: #f8b65b;

transform-origin: top;

-webkit-transform-origin: top;

transform: rotate(90deg);

-webkit-transform: rotate(90deg);

border-radius: 50px;

width: 8px;

height: 35px;

}

.minute {

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);

}

}