“This is the 24th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Source code address: gitee.com/yang-yiming…

The gradient background

Draw a div

External CSS files are introduced here

<! DOCTYPEhtml>
<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>
Copy the code

Add the style

* {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);
	
}
Copy the code

*

* is a wildcard character that selects all elements

vh

Said the first, Windows, Windows that window. The innerWidth/window innerHeight.

Vh is the window unit, 1vh = 1% window height. Same thing with VW.

::before

Body :: Before Inserts content before each body, of course there is only one body. Content is text content.

linear-gradient

For creating gradients

/* From top to bottom, blue fades to red */ 
linear-gradient(blue, red); 
/* The gradient axis is 45 degrees, from blue to red */ 
linear-gradient(45deg, blue, red); 
/* From bottom right to top left, from blue to red */ 
linear-gradient(to left top, blue, red); 
/* From bottom to top, the gradient starts with blue, starts with green at 40% of the height, and ends with red */ 
linear-gradient(0deg, blue, green 40%, red);
Copy the code

So far a gradient background has been implemented

animation

Background animation

@keyframes

Bind it to a selector, otherwise the animation will have no effect.

Specify that at least two CSS3 animation properties are bound to a selector:

  • Specifies the name of the animation
  • Specifies the duration of the animation

Add animation: animate 5s ease-in-out Infinite to body:: After;

body::after{
	content:' ';
	position:absolute;
	top: -20px;
	left:0;
	width:100%;
	height:100%;
	background: linear-gradient(160deg.#03a9f4.#03a9f4 50%,transparent 50%,transparent);
	Ease-in-out animations start and end at low speeds */
	animation: animate 5s ease-in-out infinite;
}
@keyframes animate{
	0%{
		/* Along the Y-axis */
		transform: translateY(10px);
	}
	50%{
		transform: translateY(-10px); }}Copy the code

Watch container animation

.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 ;
}
Copy the code

Container bottom shadow effect

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

radial-gradient()

The radial gradient() function creates an “image” with a radial gradient. The radial gradient is defined by the center point. To create a radial gradient you must set two stop colors.

This picture is even more obvious

Our two terminating colors are transparent.

Add the clock

Add a clock image

.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;
	/* Add a shadow for clock with a gradient from top left to bottom right light to dark */
	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); }}Copy the code

Draw the pointer and the center dot

Center dot

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

Pointer to the

The hour hand is the shortest and then the minute hand is the longest

/* The second hand is not the same length */
.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%;
}
Copy the code

The hour hand

.hr::before{
	content:' ';
	position: absolute;
	width: 8px;
	height:80px;
	background-color: #ff1053;
	z-index:12;
}
Copy the code

Minute hand

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

The second hand

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

Js to implement the dynamic hour hand

Here we use setInterval() to update it. Select the element with querySelector and change the style using hr.style.transform

	<script>
		const deg = 6;
                // querySelector selects elements
		const hr = document.querySelector('#hr');
		const mn = document.querySelector('#mn');
		const sc = document.querySelector('#sc');
		setInterval(() = > {
			let day = new Date(a);// 12 hours 360/12 so every hour is 30°
			let hh = day.getHours() * 30;
			// 1h=60m 360/60 so 6° per minute
			let mm = day.getMinutes() * deg;
			// Same 1s 6°
			let ss = day.getSeconds() * deg;
                        // Add styles
			// The hour hand rotates by the same degree as the minute hand
			hr.style.transform = `rotateZ(${hh + (mm / 12)}deg)`;
			mn.style.transform = `rotateZ(${(mm)}deg)`;
			sc.style.transform = `rotateZ(${(ss)}deg)`;
		})

	</script>
Copy the code