css时钟

最新推荐文章于 2024-04-16 06:00:50 发布
最新推荐文章于 2024-04-16 06:00:50 发布
阅读量750 收藏 4
点赞数
分类专栏： css 文章标签： css 时钟
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42012626/article/details/102855059
版权

**css时钟**

纯css时钟表盘和动画

web前端的老师留下了一个只能用css做时钟的作业，尝试了一下，但表针拼接的还是有点怪异。

要求

这是作业的样式要求
在这里插入图片描述

实际结果

这是做出来的效果

表盘

这里我的表盘主要由表盘底部，针，和响应顶部三部分

表盘底部

表盘底部是三层，分别有三个div块，
最下面是一个绿色的大圆，其上是一个稍小的蓝色圆，蓝色圆上面是另一种蓝色的半圆，共同构成表盘底部
表盘数字是另外一个css样式.te控制

针

这里我的针是拼合的，有少许不和谐

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>时钟</title>
<style type="text/css">
	.clock{
		width: 540px;
		height: 540px;
		position: relative;
	}
	.clock_table_0{
		margin: 200px 0 0 0;
		width: 540px;
		height: 540px;
		position: absolute;
		background: rgb(187,187,0);
		border-radius: 50% 50% 50% 50%;
		border: 1px solid black;
		transform: rotate(45deg);
	}
	.clock_table_1{
		position: absolute;
		top: 20px;
		margin: 0px 0px 0px 0px;
		width:500px;
        height:500px;
        border-radius: 250px 250px 250px 250px;
        //box-shadow:0px 0px 20px red;
		//transform:rotate(45deg);
		//background:rgb(193,224,255);
		background:radial-gradient(circle,rgb(193,224,255) 55%,rgb(154,178,201));
	}
	.clock_table_2{
		position: absolute;
		top: -480px;
		margin: 0px 0px 0px 250px;
		width:250px;
        height:500px;
       	border-radius: 0px 250px 250px 0px;
        //transform:rotate(45deg);
		//background:rgb(178,210,243);
		background:radial-gradient(circle,rgb(178,210,243) 55%,rgb(154,178,201));
	}
	.te{
		font-size: 64px;
		color:rgb(193,224,255);
		text-shadow: 5px 0px 1px rgb(126,145,164);
	}
	.shizhen_ro{
		width: 200px;
		height: 36px;
		left: 5px;
		top: -628px;
		animation: action_0 360s linear infinite;
	}
	@keyframes action_0 {
	from {
	transform: rotate(-90deg) ;
	}
	to {
	transform: rotate(270deg) ;
	}		
	}
	.shizhen_0{
		width: 100px;
		height: 18px;
		background: black;
		border-radius: 18px;
		//border-left: 20px solid red;
		border-left: 20px solid transparent;
 		border-right: 20px solid transparent;
 		border-bottom: 18px solid  rgb(86,86,86);
		left: 60px;
		transform: rotate(180deg);
	}
	.shizhen_1{
		width: 0;
 		height: 0;
		left:59px;
		top: 9px;
		transform: rotate(90deg);
 		border-left: 18px solid transparent;
 		border-right: 18px solid transparent;
 		border-top: 20px solid  rgb(86,86,86);
 		border-radius: 100%;
	}
	.fenzhen_ro{
		width: 260px;
		height: 24px;
		left: 5px;
		top: -655px;
		animation: action_1 30s linear infinite;
	}
	@keyframes action_1 {
	from {
	transform: rotate(-90deg) ;
	}
	to {
	transform: rotate(270deg) ;
	}		
}
	.fenzhen_0{
		width: 130px;
		height: 12px;
		background: rgb(0,86,162);
		border-radius: 12px;
		//border-left: 20px solid red;
		border-left: 13px solid transparent;
 		border-right: 13px solid transparent;
 		border-bottom: 12px solid  rgb(0,129,243);
		left: 75px;
		transform: rotate(180deg);
	}
	.fenzhen_1{
		width: 0;
 		height: 0;
		left:70px;
		top: 6px;
		transform: rotate(90deg);
 		border-left: 12px solid transparent;
 		border-right: 12px solid transparent;
 		border-top: 13px solid  rgb(0,129,243);
 		border-radius: 100%;
	}
	.miaozhen_ro{
		width: 320px;
		height: 16px;
		left: 5px;
		top: -690px;
		visibility:hidden;
		animation: action_2 60s linear infinite;

	}

	@keyframes action_2 {
	from {
	transform: rotate(-90deg) ;
	}
	to {
	transform: rotate(270deg) ;
	}	
}
	.miaozhen_0{
		width: 160px;
		height: 8px;
		background: rgb(255,25,25);
		border-radius: 8px;
		//border-left: 20px solid red;
		border-left: 9px solid transparent;
 		border-right: 9px solid transparent;
 		border-bottom: 8px solid  rgb(179,25,25);
		left: 75px;
		transform: rotate(180deg);
	}
	.miaozhen_1{		
		width: 0;
 		height: 0;
		left:84px;
		top: 6px;
		transform: rotate(90deg);
 		border-left: 8px solid transparent;
 		border-right: 8px solid transparent;
 		border-top: 9px solid  rgb(179,25,25);
 		border-radius: 100%;
	}
	.ta{
		width: 540px;
		height: 540px;
		border-radius: 50%;
	}
</style>
<script type="text/javascript">
	function miaozhen_1()
	{
		document.getElementById("miaozhen").style.visibility="visible";
		document.getElementById("fenzhen").style.animationDuration="3600s";
		document.getElementById("shizhen").style.animationDuration="43200s";
	}
	function miaozhen_2()
	{
		document.getElementById("miaozhen").style.visibility="hidden";
		document.getElementById("fenzhen").style.animationDuration="30s";
		document.getElementById("shizhen").style.animationDuration="360s";
	}
</script>
</head>

<body><center>
	<!--表盘-->
	<div class="ta" onMouseOver="miaozhen_1()" style="z-index: 100;position: relative" onMouseOut="miaozhen_2()">
		<div id="clock" class="Clock" style="z-index: -100;position: relative">
			<div class="clock_table_0" style="z-index: -90;position: relative" >
				<div class="clock_table_1" style="z-index: -80;position: relative"></div>
				<div class="clock_table_2" style="z-index: -50;position: relative"></div>
			</div>
			<!--表盘数字-->	
			<div class="te" style="z-index: -20;position: relative;top: -530px">12</div>
			<div class="te" style="z-index: -20;position: relative;left: 220px;top:-399px">3</div>
			<div class="te" style="z-index: -20;position: relative;top: -266px">6</div>
			<div class="te" style="z-index: -20;position: relative;left:-220px;top: -565px">9</div>
			<!--时针-->
			<div id="shizhen" class="shizhen_ro" style="z-index: -15;position: relative">
				<div  class="shizhen_0" style="z-index: -10;position: relative">
					<div class="shizhen_1" style="z-index: 0;position: relative"></div>		
				</div>
			</div>
			<!--分针-->	
			<div id="fenzhen" class="fenzhen_ro" style="z-index: -5;position: relative">
				<div  class="fenzhen_0" style="z-index: 0;position: relative">
					<div class="fenzhen_1" style="z-index: 10;position: relative"></div>		
				</div>
			</div>		
			<!--秒针-->	
			<div id="miaozhen" class="miaozhen_ro" style="z-index: 15;position: relative" >
				<div  class="miaozhen_0" style="z-index: 20;position: relative">
					<div class="miaozhen_1" style="z-index: 30;position: relative"></div>		
				</div>
			</div>
		</div>
	</div>	
</center></body>
</html>
枫姿雾雨
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
CSS 绘制一个时钟
老司机的后备箱
05-24 2477
练习 CSS 一个很好的方法就是绘制各式各样的 UI，比如这样一个时钟？ 你也可以访问这个 CSS clock或者以下代码片段查看实际效果 CSS clock CSS 绘制这样一个布局有几个难点： 环形排列的刻度 环形分布的数字 自动运行的指针 下面就来一一实现它，相信能学到很多 CSS 绘制和动画的小技巧 一、环形排列的刻度 提到“环形”，可以想到锥形渐变 conic-gradient。假设有这样一个容器 <clock></clock> 加上一点锥形渐变 clock{
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1378
Document
容器边框跳动
qq_41915899的博客
09-10 232
实现的样式是这样的 直接贴代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=..
CSS时钟案例
xiaomohhh的博客
08-14 1862
效果如果图下 下面是html代码 <div class="box"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class...
3、CSS动态时钟
不迁怒，不贰过。小知识，大智慧。
08-28 1011
- 创建时针 -->-- 创建秒 -->-- 创建秒 -->/* 设置表的样式 */-- 创建表的容器 -->/* 设置关键帧 *//* 设置时针 *//* 设置分针 *//* 设置秒针 */
day2纯CSS 时钟_纯CSS时钟_
10-04
总的来说，这个“纯CSS时钟”项目涵盖了HTML、CSS和JavaScript的基础知识，通过这个项目，你可以深入理解如何用纯CSS实现动态效果，以及JavaScript如何与CSS和HTML协同工作来创建动态的网页元素。这不仅有助于提升你...
js+css时钟效果 js+css时钟效果
04-18
js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+...
js-css-clock：JS + CSS时钟
02-26
【JS + CSS时钟】是一种使用JavaScript和CSS技术来实现的动态时钟应用。这个项目是作为30天原生JS编码挑战的一部分被创建的，旨在帮助开发者提升他们的前端技能，特别是JavaScript和CSS的交互使用。 **JavaScript...
html+js+css时钟走动效果.zip
最新发布
07-02
2. **CSS**：定义了时钟的样式，包括大小、边框、位置等。`.hand` 类用于定义时钟指针的样式。 3. **JavaScript**：通过 `setClock` 函数获取当前时间，并计算秒针、分针和时针的旋转角度。`setRotation` 函数用于...
jsm,html,css时钟
08-17
练习一下html,css,js，写的一个时钟效果
很漂亮的时钟样式
03-13
js完成的很漂亮的时钟样式
用css做的时钟
04-19
用css做的时钟,好用，占用资源少！相信一定否合你的要求！
DOM案例-结合CSS绘制钟表
张培跃的个人博客
04-13 382
DOM结合CSS绘制钟表
【浪漫 罗盘时钟 Js、css实现（附源代码） 美化版本】，前端面试必问的HashMap
2301_76224223的博客
04-16 603
HL.ZHCNArr=[‘零’,‘一’,‘二’,‘三’,‘四’,‘五’,‘六’,‘七’,‘八’,‘九’,‘十’];this.els.date.html(yearStr+‘年’+monthStr+‘月’+dayStr+‘日’);大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。/* 小于 10 *//* 设置日期 *//* 设置小时 *//* 设置分钟 */
CSS动画篇之炫酷时钟之时钟墙
南城
05-07 584
通过CSS制作的时钟大家肯定看到的多了，但是像下面这样的时钟是不是很少见，整个时钟是有很多个小的时钟组合而成，每秒通过多个时钟的动画来切换时间，不得不说这个设计是非常的炫酷且有特色。 前言 看到这个动画效果你有什么思路，你会怎么实现呢？可以先想一下你的答案，看看与本文的思路是否一致。本文既然是探讨的CSS动画，那么界面上这么多的时钟是尽可能的不是真的多个时钟，那样操作DOM及JS的逻辑就太复杂了，也没有和此设计理念一样，简洁且优美。 实现过程 HTML 当你仔细看这个动图的时候可以看出我们可以
css 钟表
全易
05-03 432
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯css钟表</title> <style> body { background-color: bisque; } .cl...
纯css实现时钟功能
weixin_44484520的博客
02-23 1741
时间与我们的生活密不可分，下面我将用css来实现一个简单的时钟，并且实现其功能 时钟主要分为两个部分，一个是four的表盘部分，一个为five的指针部分，six为表中心的一个小黑点，接下来开始样式的编写 首先，four表盘的样式，完成效果如下，想要多一些针可以自行添加 具体代码如下： .four{ width: 200px; height: 200px; border-radius: 50%;...
web前端之时钟(css+js)
一个假胖子
10-23 7579
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;时钟&lt;/title&gt; &lt;style type="text/css"&gt; .clock_box{ wi
css时钟立体数字标识
11-09
根据提供的引用内容，我们可以看到这是一个CSS时钟的样式代码，其中包括了时针、分针和秒针的样式。并没有提到立体数字标识。如果您需要实现CSS时钟立体数字标识，可以参考以下步骤： 1. 首先，您需要在HTML中创建...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

枫姿雾雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值