html模拟手表报时指针动画效果
代码语言：html
所属分类：动画
代码描述：html模拟手表报时指针动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/**
* If you're looking for any type of best practice, probably best to look elsewhere. :)
*/
@import url("https://fonts.googleapis.com/css?family=Archivo:600,700&display=swap");
.case {
filter: drop-shadow(0 0.5vmin 0.25vmin rgba(0, 0, 0, 0.3));
position: relative;
}
.case-gradient-1 {
background: linear-gradient(0deg, #545454 0%, #595b5a 13%, #c3c4be 50%, #c3c4be 77%, #626260 100%);
border-radius: 100%;
height: 84vmin;
width: 84vmin;
position: absolute;
top: calc(50% - 42vmin);
left: calc(50% - 42vmin);
z-index: 9;
}
.case-gradient-2 {
background: linear-gradient(180deg, #b9b9b7 0%, #b9b9b7 5%, #222325 10%, #737373 30%, #c4c2c3 50%, #dbd9da 74%, #c7c3c2 82%, #cbc6c2 100%);
border-radius: 100%;
height: 88vmin;
width: 88vmin;
position: absolute;
top: calc(50% - 44vmin);
left: calc(50% - 44vmin);
z-index: 8;
}
.face {
background-color: #1e1e20;
border-radius: 100%;
height: 80vmin;
position: relative;
width: 80vmin;
z-index: 10;
}
.face-border-1 {
border: 1vmin solid #1e1e20;
box-shadow: inset 0 0 0 0.5vmin white;
border-radius: 100%;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.dial .index {
background-color: white;
height: 4vmin;
left: calc(50% - 0.375vmin);
position: absolute;
top: 0;
transform: rotate(calc(6deg * var(--index)));
transform-origin: 50% 40vmin;
width: 0.75vmin;
}
.dial .index:nth-child(5n + 5) {
height: 8vmin;
left: calc(50% - 0.75vmin);
width: 1.5vmin;
}
.dial .index:nth-child(15) {
height: 4vmin;
}
.dial .index:nth-child(60):after {
background-color: white;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
content: "";
display: block;
height: 6vmin;
left: calc(50% - 4vmin);
position: absolute;
top: calc(100% + 2vmin);
width: 8vmin;
}
.dial .index:nth-child(60):before {
background-color: white;
border-radius: 100%;
box-shadow: 6.5vmin 0 0 0 white;
content: "";
display: block;
height: 2vmin;
position: absolute;
top: calc(100% + 2vmin);
left: -3.5vmin;
width: 2vmin;
}
.dial .index[data-arabic-number]:after {
color: white;
content: attr(data-arabic-number);
font-size: 9vmin;
left: 50%;
position: absolute;
top: calc(100% + 0.5vmin);
transform: translateX(-50%) rotate(calc(-6deg * var(--index)));
}
.dial .hand {
background-color: #1b1b79;
border-radius: 100%;
filter: drop-shadow(0 0 0.75vmin rgba(0, 0, 0, 0.5));
height: 5vmin;
left: 37.5vmin;
position: absolute;
top: 37.5vmin;
transform-origin: 50%;
width: 5vmin;
z-index: 1;
}
.dial .hand:before, .dial .hand:after {
bottom: 3.5vmin;
content: "";
left: -1vmin;
display: block;
height: 25vmin;
position: absolute;
width: 7vmin;
z-index: 1;
}
.dial .hand:before {
background-color: #1b1b79;
clip-path: polygon(50% 0%, 100% 65%, 50% 100%, 0% 65%);
}
.dial .hand:after {
background: linear-gradient(90deg, #c8c8c8 0%, white 50%, #c8c8c8 100%);
clip-path: polygon(50% 10%, 90% 65%, 50% 92.5%, 10% 65%);
}
.dial .hand--hours:before, .dial .hand--hours:after {
bottom: 3.5vmin;
height: 25vmin;
}
.dial .hand--minutes {
height: 3.5vmin;
left: 38.25vmin;
top: 38.25vmin;
width: 3.5vmin;
}
.dial .hand--minutes:before, .dial .hand--minutes:after {
bottom: 2vmin;
height: 38vmin;
left: -1.75vmin;
}
.subdial {
box-shadow: 0 0 0 0.5vmin #19191a, inset 0 0 1vmin 0 #111;
border-radius: 100%;
counter-reset: seconds;
height: 30vmin;
position: absolute;
right: 5vmin;
top: 25vmin;
width: 30vmin;
}
.subdial .hand {
background-color: white;
height: 18vmin;
left: calc(50% - 0.25vmin);
position: absolute;
top: 0;
transform-origin: 50% 15vmin;
width: 0.5vmin;
}
.subdial .hand:after {
background-color: white;
border-radius: 100%;
content: "";
display: block;
height: 2vmin;
left: calc(50% - 1vmin);
position: absolute;
top: 14vmin;
width: 2vmin;
}
.subdial .index {
background-color: white;
height: 1.5vmin;
left: calc(50% - 0.0375vmin);
position: absolute;
top: 0;
transform: rotate(calc(6deg * var(--index)));
transform-origin: 50% 15vmin;
width: 0.075vmin;
}
.subdial .index:nth-child(5n + 5) {
left: calc(50% - 0.25vmin);
width: 0.75vmin;
}
.subdial .index:after {
color: white;
content: attr(data-arabics);
left: 50%;
position: absolute;
top: calc(100% + 0.5vmin);
transform: translateX(-50%) rotate(calc(-30deg * var(--index)));
}
.svg {
position: absolute;
width: 0;
height: 0;
}
.lug {
width: 15vmin;
height: 30vmin;
clip-path: url(#lug);
position: absolute;
}
.lug--1 {
background: linear-gradient(90deg, #303133 0%, rgba(122, 124, 123, 0.1) 9%, rgba(255, 255, 255, 0) 100%), linear-gradient(-110deg, #e3e2e0 7%, rgba(122, 124, 123, 0.5) 25%, rgba(185, 183, 184, 0.5) 35%, rgba(185, 183, 184, 0.5) 74%, rgba(214, 213, 213, 0.5) 100%), linear-gradient(180deg, #b9b9b7 0%, #b9b9b7 5%, #222325 10%, #737373 30%, #c4c2c3 50%, #dbd9da 74%, #c7c3c2 82%, #cbc6c2 100%);
bottom: calc(100% - 17.5vmin);
left: 2.5vmin;
}
.lug--2 {
bottom: calc(100% - 17.5vmin);
background: linear-gradient(90deg, #303133 0%, rgba(122, 124, 123, 0.1) 9%, rgba(255, 255, 255, 0) 100%), linear-gradient(-110deg, #e3e2e0 7%, rgba(122, 124, 123, 0.5) 25%, rgba(185, 183, 184, 0.5) 35%, rgba(185, 183, 184, 0.5) 74%, rgba(214, 213, 213, 0.5) 100%), linear-gradient(180deg, #b9b9b7 0%, #b9b9b7 5%, #222325 10%, #737373 30%, #c4c2c3 50%, #dbd9da 74%, #c7c3c2 82%, #cbc6c2 100%);
right: 2.5vmin;
transform: rotateY(180deg);
}
.lug--3 {
background: linear-gradient(-30deg, #6b6865 40%, #a39f9c 52%, #e7e3e4 100%);
top: calc(100% - 17.5vmin);
left: 2.5vmin;
transform: rotateX(180deg);
}
.lug--4 {
background: linear-gradient(-30deg, #6b6865 40%, #a39f9c 52%, #e7e3e4 100%);
top: calc(100% - 17.5vmin);
right: 2.5vmin;
transform: rotateX(180deg) rotateY(180deg);
}
.lume {
background-color: #0d0d10;
}
.lume .face-border-1 {
box-shadow: none;
}
.lume [class*="case-gradient"]:after {
background-color: rgba(0, 0, 0, 0.8);
border-radius: 100%;
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.lume .lug {
opacity: 0.05;
}
.lume .subdial > .hand {
background: #52ffff;
box-shadow: inset 0 0 1vmin 0 rgba(0, 0, 0, 0.5), 0 0 1vmin 0vmin rgba(82, 255, 255, 0.2);
}
.lume .subdial > .hand:after {
background: #52ffff;
box-shadow: inset 0 0 1vmin 0 rgba(0, 0, 0, 0.5), 0 0 1vmin 0vmin rgba(82, 255, 255, 0.2);
}
.lume .dial > .hand {
background: #1e1e20;
}
.lume .dial > .hand:before {
background: #1e1e20;
}
.lume .dial > .hand:after {
background: #52ffff;
box-shadow: inset 0 0 1vmin 0 rgba(0, 0, 0, 0.5), 0 0 1vmin 0vmin rgba(82, 255, 255, 0.2);
}
.lume .index {
background-color: #52ffff;
box-shadow: inset 0 0 1vmin 0 rgba(0, 0, 0, 0.5), 0 0 1vmin 0vmin rgba(82, 255, 255, 0.2);
}
.lume .index[data-arabic-number]:after {
color: #52ffff;
text-shadow: 0 0 1vmin rgba(82, 255, 255, 0.5);
}
.lume .index:nth-child(60):after {
background-color: #52ffff;
box-shadow: inset 0 0 1vmin 0 rgba(0, 0, 0, 0.5);
}
.lume .index:nth-child(60):before {
background-color: #52ffff;
box-shadow: 0vmin 0 1vmin 0 rgba(82, 255, 255, 0.4), 6.5vmin 0 0 0 #52ffff, 6.5vmin 0 1vmin 0 rgba(82, 255, 255, 0.4);
}
button {
align-items: center;
background-color: #1e1e20;
border-radius: 3em;
border-width: 0;
display: flex;
color: #52ffff;
font-size: 16px;
font-family: monospace, monospace;
font-weight: 700;
padding: 0.75em 1em;
text-transform: uppercase;
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 10;
}
.lume button {
background-color: #f0f4f8;
}
* {
margin: 0;
padding: 0;
}
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
font-family: Archivo;
font-weight: 600;
min-height: 100vh;
min-width: 100vmin;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body translate="no">
<div class="case">
<div class="lug lug--1"></div>
<div class="lug lug--2"></div>
<div class="lug lug--3"></div>
<div class="lug lug--4"></div>
<div class="case-gradient-1"></div>
<div class="case-gradient-2"></div>
<div class="face">
<div class="face-border-1"></div>
<div class="dial">
<div class="hand hand--hours"></div>
<div class="hand hand--minutes"></div>
<div class="indeces">
<div class="index" style="--index: 1;"></div>
<div class="index" style="--index: 2;"></div>
<div class="index" style="--index: 3;"></div>
<div class="index" style="--index: 4;"></div>
<div class="index" style="--index: 5;" data-arabic-number="1"></div>
<div class="index" style="--index: 6;"></div>
<div class="index" style="--index: 7;"></div>
<div class="index" style="--index: 8;"></div>
<div class="index" style="--index: 9;"></div>
<div class="index" style=&q.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0