「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」

渐变背景

画出div

这里引入了外部css文件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="style.css">
</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>
  </div>
</body>

</html>

添加样式

*{
	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,#03a9f4,#03a9f4 50%,transparent 50%,transparent);
	
}

*

*是通配符，选择所有元素的意思

vh

首先说一下——视窗：视窗即window.innerWidth/window.innerHeight。

vh是视窗单位，1vh = 1%的视窗高度。vw也是同理。

::before

body::before在每个body前插入内容，当然body只有一个。content是文本内容。

linear-gradient

用于创建渐变

/* 从上到下，蓝色渐变到红色 */ 
linear-gradient(blue, red); 
/* 渐变轴为45度，从蓝色渐变到红色 */ 
linear-gradient(45deg, blue, red); 
/* 从右下到左上、从蓝色渐变到红色 */ 
linear-gradient(to left top, blue, red); 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ 
linear-gradient(0deg, blue, green 40%, red);

到现在为止实现了一个渐变背景

动画

背景动画

@keyframes

把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长

给 body::after 添加 animation: animate 5s ease-in-out infinite;

body::after{
	content:'';
	position:absolute;
	top:-20px;
	left:0;
	width:100%;
	height:100%;
	background: linear-gradient(160deg,#03a9f4,#03a9f4 50%,transparent 50%,transparent);
	/*  animate就是选择器的动画名称 时长     ease-in-out动画以低速开始和结束 */
	animation: animate 5s ease-in-out infinite;
}
@keyframes animate{
	0%{
		/* 沿着旋转Y轴 */
		transform: translateY(10px);
	}
	50%{
		transform: translateY(-10px);
	}
}

钟表容器动画

.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 ;
}

截屏2022-02-21 上午11.42.08.png

容器底部阴影效果

.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%;
}

radial-gradient()

radial-gradient() 函数用径向渐变创建 "图像"。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。

这个图更明显

我们的两个终止色是透明色。

添加时钟

添加个时钟图片

.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)),url(clock.png);
	background-size: cover;
	border-radius: 50%;
	backdrop-filter: blur(25px);
	border:1px solid rgba(255,255,255,0.5);
	border-bottom:none;
	border-right:none;
	/* 为clock添加阴影 有一个从左上到右下浅色到深色的渐变 */
	box-shadow: -10px -10px 20px rgba(255,255,255,0.21),
				10px 10px 20px rgba(0,0,0,0.1),
				0px 40px 50px rgba(0,0,0,0.2);
}
}

画指针和中心圆点

中心圆点

.clock::before{
	content:'';
	position:absolute;
	width:15px;
	height:15px;
	background-color: #fff;
	border-radius: 50%;
	z-index:100;
}

指针

时针最短然后是分针秒针最长

/* 时针分针秒针的长度不通 */
.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:80px;
	background-color: #ff1053;
	z-index:12;
}

分针

.mn::before{
	content:'';
	position: absolute;
	width: 4px;
	height:90px;
	background-color: #fff;
	z-index:13;
	border-radius:6px;
}

秒针

 .sc::before{
	content:'';
	position: absolute;
	width: 2px;
	height:150px;
	background-color: #fff;
	z-index:14;
	border-radius:6px;
}

js实现动态时针

这里使用setInterval()让其更新。通过querySelector选择元素，然后使用hr.style.transform改变样式

	<script>
		const deg = 6;
                // querySelector选择元素
		const hr = document.querySelector('#hr');
		const mn = document.querySelector('#mn');
		const sc = document.querySelector('#sc');
		setInterval(() => {
			let day = new Date();
			//   12小时 360/12 所以每一个小时30°
			let hh = day.getHours() * 30;
			// 1h=60m 360/60 所以每分钟6°
			let mm = day.getMinutes() * deg;
			//  同样1s 6°  
			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>

来来来，给您送🕐了