jquery+css实现一个指针时钟效果代码-html代码-BFW代码库

jquery+css实现一个指针时钟效果代码

代码语言：html

所属分类：其他

代码描述：jquery+css实现一个指针时钟效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        @import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
        
        body {
        	margin: 0;
        }
        
        .clock {
        	position: absolute;
        	width: 300px;
        	height: 300px;
        	left: calc(50% - 150px);
        	top: calc(50% - 150px);
        	background-color: white;
        	border-radius: 50%;
        	border: 8px solid black;
        	box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.2);
        }
        
        .hour-hand {
        	position: absolute;
        	height: 100px;
        	width: 7px;
        	background-color: black;
        	left: calc(50% - 3.5px);
        	bottom: 50%;
        	transform-origin: center 100%;
        	z-index: 30;
        }
        
        .hour-hand::after {
        	content: "";
        	width: 7px;
        	height: 10px;
        	background-color: black;
        	position: absolute;
        	bottom: -10px;
        	z-index: 30;
        }
        
        .minute-hand {
        	position: absolute;
        	height: 140px;
        	width: 4px;
        	background-color: black;
        	left: calc(50% - 2px);
        	bottom: 50%;
        	transform-origin: center 100%;
        	z-index: 20;
        }
        
        .minute-hand::after {
        	content: "";
        	width: 4px;
        	height: 15px;
        	background-color: black;
        	position: absolute;
        	bottom: -15px;
        	z-index: 20;
        }
        
        .second-hand {
        	position: absolute;
        	height: 140px;
        	width: 2px;
        	background-color: red;
        	left: calc(50% - 1px);
        	bottom: 50%;
        	transform-origin: center 100%;
        	z-index: 10;
        }
        
        .second-hand::after {
        	content: "";
        	width: 2px;
        	height: 15px;
        	background-color: red;
        	position: absolute;
        	bottom: -15px;
        	z-index: 10;
        }
        
        .circle {
        	position: absolute;
        	width: 12px;
        	height: 12px;
        	background-color: black;
        	left: calc(50% - 6px);
        	top: calc(50% - 6px);
        	border-radius: 50%;
        	z-index: 40;
        }
        
        .circle::after {
        	content: "";
        	width: 6px;
        	height: 6px;
        	background-color: #B0BEC5;
        	border-radius: 50%;
        	position: absolute;
        	left: calc(50% - 3px);
        	top: calc(50% - 3px);
        }
        
        .digits {
        	list-style: none;
        	padding: 0;
        	margin: 0;
        }
        
        .digit {
        	position: absolute;
        	width: 24px;
        	height: 24px;
        	font-size: 24px;
        	font-family: Roboto, sans-serif;
        	text-align: center;
        	line-height: 24px;
        }
        
        .digit:nth-child(1) {
        	top: 8%;
        	right: 24%;
        }
        
        .digit:nth-child(2) {
        	top: 24%;
        	right: 8%;
        }
        
        .digit:nth-child(3) {
        	right: 5px;
        	top: calc(50% - 12px);
        }
        
        .digit:nth-child(4) {
        	bottom: 24%;
        	right: 8%;
        }
        
        .digit:nth-child(5) {
        	bottom: 8%;
        .........完整代码请登录后点击上方下载按钮下载查看