css特效组件---玻璃时钟表盘

最新推荐文章于 2022-09-23 20:03:18 发布
最新推荐文章于 2022-09-23 20:03:18 发布
阅读量292 收藏 3
点赞数
文章标签： javascript css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jasonslw/article/details/123951771
版权

效果展示

玻璃时钟表盘

实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../css/玻璃时钟表盘.css">
		<title></title>
	</head>
	<body>
		<div class="container">
			<div class="box">
				<div class="clock">
					<div class="hour">
						<div class="hr" id='hr'></div>
					</div>
					<div class="min">
						<div class="mn" id='mn'></div>
					</div>
					<div class="sec">
						<div class="sc" id='sc'></div>
					</div>
					
				</div>
				<div class="num">
					<div>|</div>
					<div>|</div>
					<div>3</div>
					<div>|</div>
					<div>|</div>
					<div>12</div>
					<div>|</div>
					<div>|</div>
					<div>9</div>
					<div>|</div>	
					<div>|</div>
					<div>6</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		const deg = 6;
		const hr = document.querySelector('#hr')
		const mn = document.querySelector('#mn')
		const sc = document.querySelector('#sc')
		setInterval(()=>{
			let day = new Date();
			let hh = day.getHours() * 30
			let mm = day.getMinutes() * deg
			let ss = day.getSeconds() * deg
			
			hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`
			mn.style.transform = `rotateZ(${mm}deg)`
			sc.style.transform = `rotateZ(${ss}deg)`
		})
		
	</script>
</html>

css样式

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}
body::before{
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg,#e91e63,#e91e63 50%,
	#ffc107 50%,#ffc107);
}
body::after{
	content:"";
	position: absolute;
	top: -20px;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(160deg,#1e34e9 ,#1e34e9  50%,
	transparent 50%,transparent);
	animation: animate 5s ease-in-out infinite;
}
@keyframes animate{
	0%,100%{
		transform: translateY(10px);
	}
	50%{
		transform: translateY(-10px);
	}
	
}
.container{
	position: relative;
}
.container::before{
	content:"";
	position: absolute;
	bottom: -150px;
	width: 100%;
	height: 60px;
	background: radial-gradient(rgba(0,0,0,0.2),transparent,transparent);
	border-radius: 50%;
}
.box{
	position: relative;
	z-index: 1;
	width: 400px;
	height: 400px;
	backdrop-filter: blur(25px);
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.5);
	animation: animate 5s ease-in-out infinite;
	animation-delay: -2.5s;
}
.clock{
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: radial-gradient(transparent,rgba(255,255,255,0.2));
	border-radius: 50%;
	backdrop-filter: blur(25px);/*高斯模糊*/
	border: 1px solid rgba(255,255,255,0.5);
	border-bottom: none;
	border-right: none;
}
.num{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	z-index: 100;
	
	width: 100%;
	height: 100%;
	border-radius: 50%;
	
}
.num div{
	color: #fff;
	position: absolute;	
}
.num div:nth-child(1){
	transform: rotate(30deg) translateY(180px);
}
.num div:nth-child(2){
	transform: rotate(60deg) translateY(180px);
}
.num div:nth-child(3){
	
	transform:  translateX(180px);
}
.num div:nth-child(4){
	transform: rotate(120deg) translateY(180px);
}
.num div:nth-child(5){
	
	transform: rotate(150deg) translateY(180px);
}
.num div:nth-child(6){
	transform: translateY(-180px);
}
.num div:nth-child(7){
	
	transform: rotate(210deg) translateY(180px);
}
.num div:nth-child(8){
	transform: rotate(240deg) translateY(180px);
}
.num div:nth-child(9){
	
	transform: translateX(-180px);
}
.num div:nth-child(10){
	transform: rotate(300deg) translateY(180px);
}
.num div:nth-child(11){
	
	transform: rotate(330deg) translateY(180px);
}
.num div:nth-child(12){
	transform: rotate(360deg) translateY(180px);
}
.clock::before{
	position: absolute;
	content: "";
	width: 15px;
	height: 15px;
	background: #fff;
	border-radius: 50%;
	z-index: 10000;
}
.hour, .mim, .sec{
	position: absolute;
}
.hour, .hr{
	width: 160px;
	height: 160px;
}
.min, .mn{
	width: 190px;
	height: 190px;
}
.sec, .sc{
	width: 230px;
	height: 230px;
}
.hr, .mn , .sc{
	display: flex;
	justify-content: center;
	position: absolute;
	border-radius: 50%;
}
.hr::before{
	content:'';
	position: absolute;
	width: 8px;
	height: 90px;
	background: #ff105e;
	z-index: 11;
	border-radius: 6px;
}
.mn::before{
	content:'';
	position: absolute;
	width: 4px;
	height: 90px;
	background: #fff;
	z-index: 12;
	border-radius: 6px;
}
.sc::before{
	content:'';
	position: absolute;
	width: 2px;
	height: 150px;
	background: #fff;
	z-index: 13;
	border-radius: 6px;
}
jason--slw
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3动画-表盘
.
01-29 717
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body,html{ color: #fff; font-family: 'Sourc
canvas绘制仪表盘/刻度盘
最新发布
ant_dreams的博客
07-02 830
在vue模板下用canvas实现仪表盘/刻度盘的绘制，含弧度切换、刻度盘、指针等元素
CSS3简易表盘时钟
web前端学习部落22群
01-07 1884
css3时钟 .box{ width: 300px; height: 300px; border-radius: 50%; border: 5px solid #ccc; margin: 100px auto; position: relative; } .kedu{ width: 300px; height: 300px; border-radius: 50%; p
css特效组件---动态滚动炫彩进度显示器
Jasonslw的博客
04-04 257
css特效组件---动态滚动炫彩进度显示器
css创意罗盘表盘
天天的博客
01-22 425
效果如上 <!doctype html> <html> <head> <meta charset="utf-8"> <title>模拟数字钟</title> <script src="js/jquery.min.js"></script> <style> @import url("https://fonts.googleapis.com/css?.
CSS 利用动画制作表盘
知远同学的博客
01-26 535
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鸭子表</title> <style> *{ marg.
CSS3特效-CSS3实现烟花特效
12-19
在本文中，我们将深入探讨如何使用CSS3来创建引人入胜的烟花特效。CSS3是层叠样式表（Cascading ...然而，需要注意的是，虽然CSS3特效能提升用户体验，但过度使用可能会影响页面性能，因此在设计时应兼顾美观与性能。
postcss-prefix-selector:使用选择器为所有CSS规则添加前缀
05-12
$ npm install postcss-prefix-selector 与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) // css to be processed const css = fs . readFileSync ( "input.css" , "utf8" ) const out ...
css3特效-css实现烟花特效
12-19
css3+js实现烟花绽放的动画效果
css-doodle绘制糖果掉落特效特效代码
03-20
总的来说，利用CSS-Doodle创建“糖果掉落”特效涉及到了CSS的动画、变换、颜色、延迟等基础知识，同时结合Web组件和可能的JavaScript交互，可以构建出生动有趣的网页互动体验。通过不断学习和实践，开发者可以不断...
HTML5 CSS3 text-shadow 文字阴影立体特效.rar
07-10
HTML5 CSS3 text-shadow 文字阴影立体特效，prefixfree.min.js插件和jquery配合实现的文字特效，使用时只需定义需要显示阴影的文字即可，页面打开后会自动生成阴影文字，测试时请使用支持HTML5内核的浏览器。
css3时间控件
05-22
css3精美时间控件！走过路过，来看看！谢谢
用 CSS background 实现刻度线的呈现
09-22
主要介绍了用 CSS background 实现刻度线的呈现,需要的朋友可以参考下
一些以后现在和以后可能会用到的css特效或js插件(自己先mark 持续更新)
weixin_43796496的博客
07-18 255
10种CSS3鼠标悬停图片特效 :http://www.bootstrapmb.com/item/4121 jQuery图片放大预览插件1:http://www.bootstrapmb.com/item/5085 2:http://www.bootstrapmb.com/item/2384 jQuery垂直圆点页面切换单页滚动:http://www.bootstrapmb.com/item/182...
css特效详解
weixin_43765641的博客
09-23 577
（3）0-20%颜色为hotpink，80%-100%颜色为skyblue，20%-80%为两种颜色过渡。text-shadow：横向偏移量 纵向偏移量 模糊距离 阴影颜色;linear-gradient(方向，颜色，颜色····);radial-gradient(方向，颜色，颜色····);横向伸缩：transform：scaleX(1.5);纵向伸缩：transform：scaleY(1.5);横向倾斜：transform：skewX();纵向倾斜：transform：skewY();
CSS实现钟表
FanZaiYo的博客
03-31 270
/* 定位属性 相对行为relative 绝对定位absolute 固定定位fixed /* 相对定位 1.是相对于自身原来的位置 2.还占据原来的位置 */ /* position: relative; bottom: 10px; left: 10px; */ /* 绝对定位 1.相对于有定位属性的父...
玻璃拟态的时钟制作
UNknowmer的博客
01-29 511
直接上代码和图片，有问题的建议面向搜索引擎 图片 这是一张时钟图，背景是白色的，所以现在看不见，保存下来，导到vs里面就看见了。 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
CSS时钟案例
xiaomohhh的博客
08-14 1868
效果如果图下 下面是html代码 <div class="box"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class...
css时钟
安陵的博客
11-01 752
**css时钟**纯css时钟表盘和动画要求实际结果表盘表盘底部针代码 纯css时钟表盘和动画 web前端的老师留下了一个只能用css做时钟的作业，尝试了一下，但表针拼接的还是有点怪异。 要求 实际结果 表盘 这里我的表盘主要由表盘底部，针，和响应顶部三部分 表盘底部 表盘底部是三层，分别有三个div块， 最下面是一个绿色的大圆，其上是一个稍小的蓝色圆，蓝色圆上面是另一种蓝色的半圆，共同构...
css-in-css
02-05
而CSS-in-CSS通过将样式封装在组件内部，实现了样式的局部作用域。这样一来，每个组件都可以拥有自己独立的样式规则，不会相互干扰。 CSS-in-CSS有多种实现方式，其中比较常见的有以下几种： 1. CSS Modules：CSS ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值