web钟表小动画制作

colock.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/colockStyle.css"/>
		<script src="../js/colock.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="bg">
			<div class="maxbox">
				<div class="minbox">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
					<div class="hour"></div>
					<div class="minite"></div>
					<div class="second"></div>
					<div id="colock"></div>
				</div>
			</div>
		</div>
	</body>
</html>

colockStyle.css

*{
	margin: 0px;
	padding: 0px;
}
li{
	list-style: none;
}
.bg{
	width: 100%;
	height: 100%;
	background: gray;
	position: fixed;
}
.maxbox{
	width: 300px;
	height: 300px;
	background: black;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	border-radius: 30px; 
}
.minbox{
	width: 250px;
	height: 250px;
	background: white;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	border-radius: 50%;
}
.minbox ul li{
	width: 240px;
	height: 20px;
	/* background: red;
	border: aqua solid 1px; */
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
}
.minbox ul li:nth-child(1){
	transform: rotate(120deg);
}
.minbox ul li:nth-child(1):before{
	content: "1";
	position: absolute;
	left: 0px;
	transform: rotate(-120deg);
}
.minbox ul li:nth-child(1):after{
	content: "7";
	position: absolute;
	right: 0px;
	transform: rotate(-120deg); 
}



.minbox ul li:nth-child(2){
	transform: rotate(150deg);
}
.minbox ul li:nth-child(2):before{
	content: "2";
	position: absolute;
	left: 0px;
	transform: rotate(-150deg);
}
.minbox ul li:nth-child(2):after{
	content: "8";
	position: absolute;
	right: 0px;
	transform: rotate(-150deg); 
}
.minbox ul li:nth-child(3){
	transform: rotate(180deg);
/* 	z-index: 10; */
}
.minbox ul li:nth-child(3):before{
	content: "3";
	position: absolute;
	left: 0px;
	transform: rotate(-180deg);
}
.minbox ul li:nth-child(3):after{
	content: "9";
	position: absolute;
	right: 0px;
	transform: rotate(-180deg); 
}
.minbox ul li:nth-child(4){
	transform: rotate(210deg);
}
.minbox ul li:nth-child(4):before{
	content: "4";
	position: absolute;
	left: 0px;
	transform: rotate(-210deg);
}
.minbox ul li:nth-child(4):after{
	content: "10";
	position: absolute;
	right: 0px;
	transform: rotate(-210deg); 
}

.minbox ul li:nth-child(5){
	transform: rotate(240deg);
}
.minbox ul li:nth-child(5):before{
	content: "5";
	position: absolute;
	left: 0px;
	transform: rotate(-240deg);
}
.minbox ul li:nth-child(5):after{
	content: "11";
	position: absolute;
	right: 0px;
	transform: rotate(-240deg); 
}
.minbox ul li:nth-child(6){
	transform: rotate(270deg);
}
.minbox ul li:nth-child(6):before{
	content: "6";
	position: absolute;
	left: 0px;
	transform: rotate(-270deg);
}
.minbox ul li:nth-child(6):after{
	content: "12";
	position: absolute;
	right: 0px;
	transform: rotate(-270deg); 
}
/* 秒针 */
.second{
	width: 10px;
	height: 10px;
	background: red;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	animation: run 60s linear infinite;
	border-radius: 50%; 
}
.second:after{
	content: "";
	width: 130px;
	height: 2px;
	background: red;
	position: absolute;
	left:-20px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	margin: auto;
} 
/* 分针 */
.minite{
	width: 15px;
	height: 15px;
	background: blue;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	animation: run 3600s linear infinite;
	border-radius: 50%;
}
.minite:after{
	content: "";
	width: 100px;
	height: 5px;
	background: blue;
	position: absolute;
	left:-15px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	margin: auto;
	border-radius: 2px;
}
/* 时针 */
.hour{
	width: 20px;
	height: 20px;
	background: black;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	animation: run 43200s linear infinite;
	border-radius: 50%;
}
.hour:after{
	content: "";
	width: 80px;
	height: 8px;
	background: black;
	position: absolute;
	left:-10px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	margin: auto;
	border-radius: 2px;
}
#colock{
	width: 100px;
	height: 30px;
	background: rgba(0,0,0,0.2);
	position: absolute;
	left: 0px;
	right: 0px;
	margin: auto;
	top: 50px;
	border-radius: 2px;
	text-align: center;
	line-height: 30px;
}

@keyframes run{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}

colock.js

window.onload=function(){
	show();
}

function show(){
	var time=document.getElementById("colock");
	var d=new Date();
	time.innerHTML=d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
	setTimeout(show,1000);
}

在这里插入图片描述

web钟表小动画制作

猜你喜欢