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=Cormorant:wght@300&display=swap");
        html {
        	background: #f9f6ef;
        	text-align: center;
        	font-size: 10px;
        }
        
        body {
        	margin: 0;
        	font-size: 2rem;
        	display: flex;
        	flex: 1;
        	min-height: 100vh;
        	align-items: center;
        }
        
        .clock {
        	width: 30rem;
        	height: 30rem;
        
        	border: 1px solid #0007;
        	background: linear-gradient(
        			45deg,
        			transparent 30%,
        			#f9f6efd0 50%,
        			transparent 70%
        		),
        		linear-gradient(135deg, #fccd4d 40%, #f8b500 70%);
        	box-shadow: -4px -4px 10px rgba(67, 67, 67, 0.5),
        		inset 4px 4px 10px rgba(0, 0, 0, 0.5),
        		inset -4px -4px 10px rgba(67, 67, 67, 0.5), 4px 4px 10px rgba(0, 0, 0, 0.3);
        	border-radius: 50%;
        	margin: 50px auto;
        	position: relative;
        	padding: 2rem;
        	overflow: hidden;
        }
        .clock::before {
        	content: "";
        	position: absolute;
        	inset: 1.3rem;
        	background: #25282a;
        	border-radius: 50%;
        }
        
        .outer-clock-face {
        	position: relative;
        	width: 100%;
        	height: 100%;
        	border-radius: 100%;
        	background: #25282a;
        	overflow: hidden;
        }
        
        .outer-clock-face::after {
        	transform: rotate(90deg);
        }
        
        .outer-clock-face::before,
        .outer-clock-face::after,
        .outer-clock-face .marking {
        	content: "";
        	position: absolute;
        	width: 5px;
        	height: 100%;
        	background: #ebebe3;
        	z-index: 0;
        	left: 49%;
        }
        
        .outer-clock-face .marking {
        	background: #4e5851;
        	width: 3px;
        }
        
        .outer-clock-face .marking.marking-one {
        	transform: rotate(30deg);
        }
        
        .outer-clock-face .marking.marking-two {
        	transform: rotate(60deg);
        }
        
        .outer-clock-face .marking.marking-three {
        	transform: rotate(120deg);
        }
        
        .outer-clock-face .marking.marking-four {
        	transform: rotate(150deg);
        }
        
        .inner-clock-face {
        	position: absolute;
        	top: 10%;
        	left: 10%;
        	width: 80%;
        	height: 80%;
        	background: #25282a;
        	border-radius: 100%;
        	z-index: 1;
        }
        
        .inner-clock-face::before {
        	content: "";
        	position: absolute;
        	top: 50%;
        	left: 50%;
        	width: 16px;
        	height: 16px;
        	border-radius: 18px;
        	margin-left: -9px;
        	margin-top: -6px;
        	background: #f9f6ef;
        	background: radial-gradient(ellipse at center, #25282a 40%, transparent 40%),
        		linear-gradient(135deg, #fccd4d 40%, #f8b500 70%);
        	z-index: 11;
        }
        
        .hand {
        	width: 50%;
        	right: 50%;
        	height: 6px;
        	background: #5eb0e5;
        	position: absolute;
        	top: 50%;
        	border-radius: 50%;
        	transform-origin: 100%;
        	transform: rotate(90deg);
        	transition-timing-function: c.........完整代码请登录后点击上方下载按钮下载查看