纯css制作钟表（会走动）

最新推荐文章于 2022-05-31 09:24:38 发布

lrp9090

最新推荐文章于 2022-05-31 09:24:38 发布

阅读量645

点赞数 2

文章标签： animation css3动画效果钟表 css

本文链接：https://blog.youkuaiyun.com/lrp9090/article/details/92811299

版权

本文介绍了如何使用CSS3的动画效果制作一个会走动的钟表，包括HTML结构和CSS样式代码的详细说明，展示了纯CSS实现动态视觉效果的能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，效果展示

在这里插入图片描述
2.html代码

<div class="clock">
		<div class="logo">Pigeute</div>
		<div class="line1 line">
			<div class="left">12</div>
			<div class="right">6</div>
		</div>
		<div class="line2 line">
			<div class="left">1</div>
			<div class="right">7</div>
		</div>
		<div class="line3 line">
			<div class="left">2</div>
			<div class="right">8</div>
		</div>
		<div class="line4 line">
			<div class="left">3</div>
			<div class="right fz">9</div>
		</div>
		<div class="line5 line">
			<div class="left fz">4</div>
			<div class="right fz">10</div>
		</div>
		<div class="line6 line">
			<div class="left fz">5</div>
			<div class="right fz">11</div>
		</div>
		<div class="cover"></div>
		<div class="hours"></div>
		<div class="minutes"></div>
		<div class="second"></div>
		<div class="dot"></div>
	</div>

3.样式代码

.clock{
		width: 150px;
		height: 150px;
		background: radial-gradient(circle, white, skyblue,blue); 
		border-radius: 50%;
		margin: 100px auto;
		position: relative;
	}
	.clock>div{
		position: absolute;
	}
	.cover{
		width: 110px;
		height: 110px;
		background: #fff;
		border-radius: 50%;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	.line {
		height: 100%;
		width: 2px;
		left: 50%;
		transform: translate(-50%,0);
	}
	.line1 ,.line4 {
		width: 5px;
	}
	.line2 {
		transform: translate(-50%,0) rotate(30deg);
	}
	.line3 {
		transform: translate(-50%,0) rotate(60deg);
	}
	.line4 {
		transform: translate(-50%,0) rotate(90deg);
	}
	.line5 {
		transform: translate(-50%,0) rotate(120deg);
	}
	.line6 {
		transform: translate(-50%,0) rotate(150deg);
	}
	.hours,.minutes,.second {
		left: 50%;
		top: 50%;
		transform:translate(-50%,-100%);
		transform-origin: center bottom; 
		animation-iteration-count: infinite;
		border-top-right-radius:50% ;
		border-top-left-radius:50% 
	}
	.hours {
		width: 5px;
		background: #555;
		height: 52px;
		animation: hour 43200s steps(43200) infinite;
	}
	@keyframes hour {
		from {
			transform: translate(-50%,-100%) rotate(0deg);
		}
		to {
			transform: translate(-50%,-100%) rotate(360deg);
		}
	}
	.minutes {
		width: 3px;
		background: #0000ff;
		height: 43px;
		animation: minute 3600s steps(3600) infinite;
	}
	@keyframes minute {
		from {
			transform: translate(-50%,-100%) rotate(0deg);
		}
		to {
			transform: translate(-50%,-100%) rotate(360deg);
		}
	}
	.second {
		width: 2px;
		background: red;
		height: 37px;
		animation: seconds 60s steps(60) infinite;
	}
	@keyframes seconds {
		from {
			transform: translate(-50%,-100%) rotate(0deg);
		}
		to {
			transform: translate(-50%,-100%) rotate(360deg);
		}
	}
	.dot {
		width: 10px;
		height: 10px;
		background: #a99797;
		border-radius: 50%;
		left: 50%;
		top: 50%;
		transform:translate(-50%,-50%);
	}
	.left {
		top: 0;
		left: -8px;
		position: absolute;
	}
	.right {
		bottom: 0;
		left: -8px;
		position: absolute;
	}
	.fz {
		transform: rotate(180deg);
	}
	.logo {
		position: absolute;
		bottom: 40px;
		left: 50%;
		transform: translate(-50%,0);
		font-size: 12px;
		z-index: 1;
	}