2020-09-22

学游泳的飞鱼

于 2020-09-22 18:21:34 发布

阅读量113

点赞数

文章标签： css js html javascript

本文链接：https://blog.csdn.net/qq_45140055/article/details/108737888

版权

动态炫酷时钟（仿手机壁纸效果）

在这里插入图片描述

                              这里是一张静态的效果图

下面直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			background-color: #444444;
		}

		.containers {
			width: 300px;
			height: 300px;
			border-radius: 50%;
			box-shadow: 10px 10px 10px #505050, -10px -10px 10px #050505;
			margin: 0px auto;
			margin-top: 90px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.container {
			width: 300px;
			height: 300px;
			border-radius: 50%;
			position: absolute;
			/* radial-gradient(circle at 50% 0, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0) 70.71%) */
			background:
				radial-gradient(circle at 50% 0, #f155ff, #13fff8 80.71%),
				radial-gradient(circle at 6.7% 75%, rgba(255, 94, 66, 0.5), rgba(255, 0, 0, 0) 70.71%),
				radial-gradient(circle at 92% 75%, #c6ff0b, #48ff06 70.71%) #73fdff;
			animation: Rotate 1s linear infinite;
		}

		.container::before {
			content: "";
			width: 300px;
			height: 300px;
			border-radius: 50%;
			background:
				radial-gradient(circle at 50% 0, #f155ff, #13fff8 80.71%),
				radial-gradient(circle at 6.7% 75%, rgba(255, 94, 66, 0.5), rgba(255, 0, 0, 0) 70.71%),
				radial-gradient(circle at 92% 75%, #c6ff0b, #48ff06 70.71%) #73fdff;
			position: absolute;
			filter: blur(15px);
		}

		.clock {
			width: 285px;
			height: 285px;
			background-color: #444444;
			border-radius: 50%;
			position: absolute;
			z-index: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.time {
			font-size: 45px;
			color: #13FFF8;
		}

		.dot {
			width: 10px;
			height: 10px;
			background-color: #13FFF8;
			border-radius: 50%;
			position: absolute;
			top: 50px;
			right: 60px;
		}

		.dot::before {
			content: "";
			width: 10px;
			height: 10px;
			background-color: #3bc0cf;
			border-radius: 50%;
			position: absolute;
			filter: blur(3px);
		}

		@keyframes Rotate {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}
	</style>
	<body>
		<div class="containers">
			<div class="container"></div>
			<div class="clock">
				<div class="time">13:14</div>
				<div class="dot"></div>
			</div>
		</div>
		<script>
			const time = document.querySelector('.time');
			setInterval(() => {
				let date = new Date();
				let h = date.getHours();
				let m = date.getMinutes();
				let s = date.getSeconds();
				time.innerHTML = `${h}:${m}:${s}`;
			});
		</script>
	</body>
</html>

 //其中最后的动态时间使用的``;
 //可以这样来理解
 var a = 1; console.log('一共有'+a+'个鸡蛋！');
 //那么现在你只要,把+拼接给替换掉了
 console.log('一共有${a}个鸡蛋！');

学游泳的飞鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-09-22

动态炫酷时钟（仿手机壁纸）这里的是一张静态的效果图
复制链接

扫一扫

2020-09-22

动态炫酷时钟（仿手机壁纸效果）

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