css3制作简易钟表

红太狼 2022-02-22 04:25 272阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.Wapper{
    				width: 300px;
    				height: 300px;
    				border-radius: 50%;
    				border: 5px solid #ccc;
    				margin: 100px auto;
    				position: relative;
    			}
    			.Wapper ul{
    				width: 300px;
    				height: 300px;
    				border-radius: 50%;
    				position: relative;				
    			}								
    			 ul li{
    				list-style: none;
    				height: 300px;
    				position: absolute;
    				left: 50%;
    			}
    			ul li:nth-child(1){
    				font: normal 24px/24px "微软雅黑";
    				margin-left: -6px;
    				margin-top: 3px;
    			}
    			ul li:nth-child(2){
    				margin-left: -3px;
    				transform: rotate(30deg);
    			}
    			ul li:nth-child(3){
    				margin-left: -3px;
    				transform: rotate(60deg);
    			}
    			ul li:nth-child(4){
    				font: normal 24px/24px "微软雅黑";
    				margin-left: -3px;
    				transform: rotate(90deg);
    								
    			}
    			ul li:nth-child(5){
    				margin-left: -3px;
    				transform: rotate(120deg);			
    			}
    			ul li:nth-child(6){
    				margin-left: -3px;
    				transform: rotate(150deg);					
    			}
    			ul li:nth-child(7){
    				font: normal 24px/24px "微软雅黑";
    				margin-left: -3px;
    				transform: rotate(180deg);					
    			}
    			ul li:nth-child(8){
    				margin-left: -3px;
    				transform: rotate(-150deg);					
    			}
    			ul li:nth-child(9){
    				margin-left: -3px;
    				transform: rotate(-120deg);					
    			}
    			ul li:nth-child(10){
    				font: normal 24px/24px "微软雅黑";
    				margin-left: -3px;
    				transform: rotate(-90deg);					
    			}
    			ul li:nth-child(11){
    				margin-left: -3px;
    				transform: rotate(-60deg);					
    			}
    			ul li:nth-child(12){
    				margin-left: -3px;
    				transform: rotate(-30deg);					
    			}
    			/*钟表的中心点*/
    			.disc {
    				width: 20px;
    				height: 20px;
    				border-radius: 50%;
    				background: #000;
    				position: absolute;
    				top: 50%;
    				left: 50%;
    				margin-left: -10px;
    				margin-top: -10px;
    				z-index: 2;
    			}
    			/*时针*/
    			.hour {
    				width: 6px;
    				height: 60px;
    				background: #000;
    				position: absolute;
    				border-radius: 2px 2px 0px 0px;
    				top: -50px;
    				left: 50%;
    				margin-left: -3px;
    				transform-origin: bottom center;
    				animation: move 43200s steps(60) 0s infinite;
    			}
    			/*分针*/
    			.minu {
    				width: 4px;
    				height: 80px;
    				background: green;
    				position: absolute;
    				border-radius: 2px 2px 0px 0px;
    				top: -70px;
    				left: 50%;
    				margin-left: -2px;
    				transform-origin: bottom center;
    				animation: move 3600s steps(60) 0s infinite;
    			}
    			/*秒针*/
    			.second {
    				width: 2px;
    				height: 100px;
    				background: #f00;
    				position: absolute;
    				top: -90px;
    				left: 50%;
    				margin-left: -1px;
    				transform-origin: bottom center;
    				-webkit-animation: move 60s steps(60) infinite;
    			}
    			/*开始旋转的点*/
    			.cover {
    				width: 20px;
    				height: 20px;
    				border-radius: 50%;
    				background: #000;				
    				position: absolute;
    			}
    			
    			@keyframes move {
    				0% {
    					transform: rotate(0deg);
    				}
    				100% {
    					transform: rotate(360deg);
    				}
    		</style>
    	</head>
    	<body>
    		<div class="Wapper">
    			<ul>
    				<li>12</li>		
    				<li>1</li>
    				<li>2</li>
    				<li>3</li>
    				<li>4</li>
    				<li>5</li>
    				<li>6</li>
    				<li>7</li>
    				<li>8</li>
    				<li>9</li>
    				<li>10</li>
    				<li>11</li>						
    			</ul>			
    			<div class="disc">	
    				<div class="hour"></div>
    				<div class="minu"></div>
    				<div class="second"></div>
    				<div class="cover"></div>
    			</div>
    			<div class="middisc">
    			</div>
    		</div>
    	</body>
    </html>

实现的效果：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2OTIwNA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2OTIwNA_size_16_color_FFFFFF_t_70]: /images/20220222/acd86819ba3b4751869da5dee63daabe.png