html5语音闹钟代码,HTML5 只有时分指针的闹钟

CSS

语言：

CSSSCSS

确定

body {

background: #ff3c45; }

.clock {

position: absolute;

top: 160px;

left: 50px;

width: 250px;

height: 250px;

background: #fefefe;

border-radius: 50%;

box-shadow: inset -4px -6px 10px 0px #9da8a8, 0 0 0 4px, 0 0 0 14px #ffeb45, 0 0 0 18px, 0 0 0 36px #28e0dd, 0 0 0 40px; }

.clock:before {

position: absolute;

content: "";

left: 150px;

bottom: 280px;

width: 150px;

height: 100px;

background: #ffeb45;

border-radius: 100px 100px 0 0;

transform: rotate(25deg);

box-shadow: inset -8px 0px 0 0 #e6d43e, 0 0 0 4px, 0px -55px 0 -40px #ffeb45, 0px -55px 0 -36px; }

.clock:after {

position: absolute;

content: "";

right: 150px;

bottom: 280px;

width: 150px;

height: 100px;

background: #ffeb45;

border-radius: 100px 100px 0 0;

transform: rotate(335deg);

box-shadow: inset 8px 0px 0 0 #e6d43e, 0 0 0 4px, 0px -55px 0 -40px #ffeb45, 0px -55px 0 -36px; }

.leg {

position: absolute;

width: 25px;

height: 30px;

background: #ffeb45;

box-shadow: 0 0 0 4px; }

.right {

transform: skew(45deg);

left: 250px;

top: 425px; }

.left {

transform: skew(-45deg);

left: 80px;

top: 425px; }

.bar {

position: absolute;

width: 15px;

height: 30px;

background: #ffeb45;

box-shadow: 0 0 0 4px; }

.one {

left: 240px;

top: 125px;

transform: rotate(25deg); }

.two {

left: 100px;

top: 125px;

transform: rotate(335deg); }

.dash {

position: relative;

background: black; }

.vertical {

width: 10px;

height: 15px;

left: 120px;

top: 0px;

box-shadow: 0 235px 0 0; }

.horizontal {

width: 15px;

height: 10px;

left: 0px;

top: 105px;

box-shadow: 235px 0px 0 0; }

.minute {

position: absolute;

bottom: 0px;

left: 0px;

width: 250px;

height: 250px;

border-radius: 50%; }

.minute:before {

content: "";

position: absolute;

left: 120px;

top: 40px;

width: 10px;

height: 85px;

background: black; }

.minute:after {

content: "";

position: absolute;

top: 20px;

left: 110px;

width: 0;

height: 0;

border-left: 15px solid transparent;

border-right: 15px solid transparent;

border-bottom: 30px solid black; }

.hour {

position: absolute;

top: 0px;

left: 0px;

width: 250px;

height: 250px;

border-radius: 50%; }

.hour:before {

content: "";

position: absolute;

top: 65px;

left: 120px;

width: 10px;

height: 60px;

background: black; }

.hour:after {

content: "";

position: absolute;

top: 45px;

left: 110px;

width: 0;

height: 0;

border-left: 15px solid transparent;

border-right: 15px solid transparent;

border-bottom: 30px solid black; }

.center {

position: relative;

top: 85px;

left: 113px;

width: 25px;

height: 25px;

background: #ffeb45;

border-radius: 50%;

box-shadow: 0 0 0 4px; }