css+js实现精美逼真可点击秒表计时效果代码-html代码-BFW代码库

css+js实现精美逼真可点击秒表计时效果代码

代码语言：html

所属分类：其他

代码描述：css+js实现精美逼真可点击秒表计时效果代码，点击左侧按钮复位，右侧开始计时，指针走动。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://fonts.googleapis.com/css2?family=Cairo&display=swap");
        
        *,
        *::before,
        *::after {
        	margin: 0;
        	padding: 0;
        	box-sizing: border-box;
        }
        body {
        	display: grid;
        	height: 100vh;
        	place-items: center;
        	background: linear-gradient(to bottom right, grey, black);
        }
        
        .stopwatch {
        	padding: 2em;
        	font-size: 2vmin;
        	font-family: sans-serif;
        	filter: drop-shadow(2em 2em 1em black);
        	position: relative;
        	--animation-play-state: paused;
        }
        .rim {
        	padding: 2.5em;
        	background: linear-gradient(
        		to bottom right,
        		rgb(155, 155, 155),
        		rgb(196, 196, 196)
        	);
        	box-shadow: inset 1em 1em 2em rgba(255, 255, 255, 255.5),
        		inset -1em -1em 2em rgba(0, 0, 0, 0.8);
        	border-radius: 50%;
        }
        .clock-container {
        	border-radius: 50%;
        	display: grid;
        	grid-template-areas: "clock-container-center";
        	border: 0em solid black;
        	background: linear-gradient(to top left, rgb(200, 200, 200), white);
        	box-shadow: inset 0.5em 0.5em 1em rgba(0, 0, 0, 0.8),
        		inset -0.5em -0.5em 1em rgba(255, 255, 255, 0.5);
        	font-family: "Cairo", sans-serif;
        	line-height: 1;
        	position: relative;
        }
        
        .clock {
        	grid-area: clock-container-center;
        	width: 30em;
        	aspect-ratio: 1/1;
        	border-radius: 50%;
        	display: grid;
        	grid-template-areas: "sub-clock-container-center";
        	overflow: hidden;
        }
        .minutes-clock {
        	font-size: 0.32em;
        	justify-self: center;
        	margin-top: 14%;
        }
        .clock > * {
        	grid-area: sub-clock-container-center;
        	width: 100%;
        	height: 100%;
        }
        
        .clock > .lines {
        	display: grid;
        	grid-template-areas: "lines-center";
        	place-items: center;
        }
        .clock > .lines > .line {
        	grid-area: lines-center;
        	--line-width: 0.1em;
        	--line-length: 1em;
        	width: var(--line-width);
        	height: 100%;
        	background-image: linear-gradient(
        		black var(--line-length),
        		transparent 0 calc(100% - var(--line-length)),
        		black 0
        	);
        	transform: rotate(calc(360deg / 60 * var(--line-idx)));
        }
        
        .clock > .lines > div:nth-child(5n + 1) {
        	--line-width: 0.25em;
        	--line-length: 1.5em;
        }
        
        .clock > .numbers {
        	display: grid;
        	grid-template-areas: "numbers-center";
        	place-items: center;
        }
        .clock > .numbers > .number {
        	grid-area: numbers-center;
        	height: 86%;
        	font-size: 1.8em;
        	--rotate: calc(360deg / 12 * var(--number-idx));
        	transform: rotate(var(--rotate));
        }
        .clock > .numbers > .number > div {
        	transform: rotate(calc(-1 * var(--rotate)));
        }
        
        .clock > .handle {
        	displa.........完整代码请登录后点击上方下载按钮下载查看