3、CSS动态时钟

最新推荐文章于 2023-06-04 23:19:55 发布

Java Fans

最新推荐文章于 2023-06-04 23:19:55 发布

阅读量1k

点赞数 23

分类专栏：前端案例分享专栏文章标签： css servlet 前端

Java Fans

本文链接：https://blog.csdn.net/hh867308122/article/details/126570826

版权

前端案例分享专栏专栏收录该内容

15 篇文章 10 订阅

订阅专栏

1、效果展示

2、HTML结构

<body>



<div class="clock">



<div class="hour_Wraps">

<div class="hour"></div>

</div>



<div class="min_Wraps">

<div class="min"></div>

</div>



<div class="sec_Wraps">

<div class="sec"></div>

</div>

</div>

</body>

3、CSS样式编写

<style>

* {

margin: 0;

padding: 0;

}

/* 设置表的样式 */

.clock {

width: 500px;

height: 500px;

background-image: url(./img/1.jpg);

background-size: cover;

margin: 0 auto;

margin-top: 100px;

border-radius: 50%;

position: relative;

}

.clock>div{

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

}

/* 设置时针 */

.hour_Wraps{

height: 70%;

width: 70%;

animation: run 43200s linear infinite;

}

.hour{

height: 50%;

width: 6px;

background-color: black;

margin: 0 auto;

}

/* 设置分针 */

.min_Wraps{

height: 80%;

width: 80%;

animation: run 3600s steps(60) infinite;

}

.min{

height: 50%;

width: 4px;

background-color: black;

margin: 0 auto;

}

/* 设置秒针 */

.sec_Wraps {

height: 90%;

width: 90%;

animation: run 60s steps(60) infinite;

}

.sec {

height: 50%;

width: 3px;

background-color: black;

margin: 0 auto;

}

/* 设置关键帧 */

@keyframes run {

from {

transform: rotateZ(0);

}

to {

transform: rotateZ(360deg);

}

}

</style>