html圆形边框表格,13 - CSS3 - 边框圆角 - 钟表

本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!

< ! ---------- HTML ----------- >

< ! --------- Style --------------- >

*{

margin: 0;

padding: 0;

}

.clock{

width: 400px;

height: 400px;

margin: 100px auto;

border: 10px solid #000;

box-sizing: border-box;

border-radius: 50%;

position: relative;

}

.clock div{

width: 8px;

height: 380px;

background-color: #ccc;

position: absolute;

left: 50%;

margin-left:-4px;

}

.clock div:nth-child(1){

width: 14px;

margin-left:-7px;

}

.clock div:nth-child(2){

transform: rotateZ(30deg);

}

.clock div:nth-child(3){

transform: rotateZ(60deg);

}

.clock div:nth-child(4){

transform: rotateZ(90deg);

width: 14px;

margin-left:-7px;

}

.clock div:nth-child(5){

transform: rotateZ(120deg);

}

.clock div:nth-child(6){

transform: rotateZ(150deg);

}

.clock .cover{

width: 320px;

height: 320px;

background-color: white;

border-radius: 50%;

margin-left:-160px;

top: 50%;

margin-top:-160px;

}

.clock .hour{

width: 20px;

height: 100px;

background-color: black;

margin-left:-10px;

top: 100px;

animation: sport 43200s linear 0s infinite normal;

}

.clock .minute{

width: 14px;

height: 120px;

background-color: black;

margin-left:-7px;

top: 80px;

animation: sport 3600s linear 0s infinite normal;

}

.clock .second{

width: 10px;

height: 150px;

background-color: red;

margin-left:-5px;

top: 50px;

animation: sport 60s steps(60) 0s infinite normal;

}

.clock .dot{

width: 30px;

height: 30px;

background-color: black;

border-radius: 50%;

margin-left:-15px;

top: 50%;

margin-top:-15px;

}

@keyframes sport {

from{

transform: rotateZ(0deg);

transform-origin: center bottom;

}

to{

transform: rotateZ(360deg);

transform-origin: center bottom;

}

}

< ! --------- 效果展示 ---------- >

**钟表**