纯CSS3 好看的时钟案列 不需图片素材

先让我们来看看代码后的效果吧

话不多说 直接上代码开干 如有不懂的可以评论提问哦

<div class="clock">
			<ul id="list">
			</ul>
			<div class="hour"></div>
			<div class="min"></div>
			<div class="sec"></div>
</div>

* {
				margin: 0;
				padding: 0;

			}

			body {
				background-color: #FFFF00;
			}

			.clock {
				top: 50px;
				left: 20%;
				width: 400px;
				height: 400px;
				box-shadow: inset 0 0 10px 6px rgba(255, 255, 255, 0.5),
					0 0px 25px rgba(255, 255, 255, 0.5);
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.5);
				border: 6px solid rgba(255, 255, 255, 0.8);
				backdrop-filter: blur(15px);
				position: relative;
			}

			.clock::before {
				content: '';
				position: absolute;
				top: -30px;
				left: -30px;
				bottom: -30px;
				right: -30px;
				border: 2px solid rgba(255, 255, 255, 0.8);
				box-shadow: inset 0 0 10px 6px rgba(255, 255, 255, 0.5),
					0 0px 25px rgba(255, 255, 255, 0.5);
				border-radius: 50%;
			}

			.clock::after {
				content: '';
				position: absolute;

				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				/* 上面三句可以让圆点剧中对其 */
				width: 20px;
				height: 20px;
				border-radius: 50%;
				/* z-index控制最外层 */
				z-index: 3;
				background-color: rgb(255, 255, 255);
			}

			.hour {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 16px;
				height: 170px;
				background-image: linear-gradient(360deg, transparent 50%, rgb(0, 0, 0) 50%);
				transform: translate(-50%, -50%);
				border-radius: 8px;
				transform-origin: center;
			}

			.min {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 10px;
				height: 250px;
				background-image: linear-gradient(360deg, transparent 50%, rgb(0, 183, 255) 50%);
				transform: translate(-50%, -50%);
				border-radius: 5px;
				z-index: 1;
				transform-origin: center;
			}

			.sec {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 0.375rem;
				height: 300px;
				background-image: linear-gradient(360deg, transparent 30%, rgb(237, 243, 235) 30%);
				transform: translate(-50%, -50%);
				border-radius: 3px;
				z-index: 2;
				transform-origin: center;
			}

			ul>li {
				list-style: none;
				position: absolute;
				left: 50%;
				top: 3px;
				line-height: 60px;
				width: 6px;
				text-indent: 0px;
				border-radius: 2px;
				height: 10px;
				background-color: gray;
				transform-origin: center 200px;
			}

var ulNode = document.querySelector(".clock>ul")
		var styleNode = document.querySelector('#css')
		var liHtml = ""
		var cssText = ''
		var a = 12
		for (var i = 0; i < 12; i++) {
			liHtml += "<li>" + a + "</li>"
			if (a = 12) a = i
			else a = i + 1
			cssText += "ul>li:nth-child(" + (i + 1) + "){transform:rotate(" + (i * 30) + "deg);}"
		}
		ulNode.innerHTML = liHtml
		styleNode.innerHTML += cssText
		var hour = document.querySelector('.hour')
		var min = document.querySelector('.min')
		var sec = document.querySelector('.sec')
		window.setInterval(function() {
			let shijian = new Date()
			let shi = shijian.getHours() * 30
			let fen = shijian.getMinutes() * 6
			let miao = shijian.getSeconds() * 6
			hour.style.transform = 'translate(-50%,-50%) rotateZ({'+shi+shijian.getMinutes()*0.5+'}deg)';
			min.style.transform = 'translate(-50%,-50%) rotateZ('+fen+'deg)';
			sec.style.transform = 'translate(-50%,-50%) rotateZ('+miao+'deg)';
		}, 1000)