纯div+css无js代码实现一个三维秒表跑表码表计时效果代码
代码语言：html
所属分类：三维
代码描述：纯div+css无js代码实现一个三维秒表跑表码表计时效果代码，纯div+css代码，没有一行js代码。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap");
.cuboid {
width: 100%;
height: 100%;
position: relative;
}
.cuboid__side {
filter: brightness(var(--b, 1));
position: absolute;
}
.cuboid__side:nth-of-type(1) {
--b: 1.1;
height: calc(var(--depth, 20) * 1vmin);
width: 100%;
top: 0;
transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
--b: 0.9;
height: 100%;
width: calc(var(--depth, 20) * 1vmin);
top: 50%;
right: 0;
transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
--b: 0.5;
width: 100%;
height: calc(var(--depth, 20) * 1vmin);
bottom: 0;
transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
--b: 1;
height: 100%;
width: calc(var(--depth, 20) * 1vmin);
left: 0;
top: 50%;
transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
--b: 0.8;
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--depth, 20) * 0.5vmin));
top: 0;
left: 0;
}
.cuboid__side:nth-of-type(6) {
--b: 1.2;
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--depth, 20) * -0.5vmin)) rotateY(180deg);
top: 0;
left: 0;
}
:root {
--stopwatch-size: 40;
--stopwatch-depth: 10;
--stopwatch-frame-depth: 4;
--body-clip: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
--state: paused;
--bg: #ead9f2;
--digit: #e6f2d9;
--face: #0d1306;
--content: #666;
--glare: rgba(255,255,255,0.2);
--stopwatch-frame: #667f99;
--glass: rgba(204,229,255,0.15);
--chord-one: #8c7373;
--chord-two: #544545;
--start: #80f20d;
--reset: #f2330d;
}
*,
*:after,
*:before {
box-sizing: border-box;
transform-style: preserve-3d;
}
#start:checked ~ .stopwatch__content .ms--tens,
#pause:checked ~ .stopwatch__content .ms--tens {
--name: ms-tens;
}
#start:checked ~ .stopwatch__content .ms--singles,
#pause:checked ~ .stopwatch__content .ms--singles {
--name: ms-singles;
}
#start:checked ~ .stopwatch__content .s--tens,
#pause:checked ~ .stopwatch__content .s--tens {
--name: s-tens;
}
#start:checked ~ .stopwatch__content .s--singles,
#pause:checked ~ .stopwatch__content .s--singles {
--name: s-singles;
}
#start:checked ~ .stopwatch__content .m--tens,
#pause:checked ~ .stopwatch__content .m--tens {
--name: m-tens;
}
#start:checked ~ .stopwatch__content .m--singles,
#pause:checked ~ .stopwatch__content .m--singles {
--name: m-singles;
}
#start:checked ~ .stopwatch__content {
--state: running;
}
#pause:checked ~ .stopwatch__content {
--state: paused;
}
#start:checked ~ .stopwatch__body .stopwatch__start {
z-index: -1;
display: none;
}
#start:checked ~ .stopwatch__body .stopwatch__pause {
display: block;
}
.stopwatch__start:active ~ .stopwatch__stop-start,
.stopwatch__pause:active ~ .stopwatch__stop-start {
--y: 25;
}
.stopwatch__reset:active ~ .stopwatch__restart {
--y: 15;
}
@property --ms-tens {
initial-value: 0;
inherits: false;
syntax: '<integer>';
}
@property --ms-singles {
initial-value: 0;
inherits: false;
syntax: '<integer>';
}
@property --s-tens {
initial-value: 0;
inherits: false;
syntax: '<integer>';
}
@property --s-singles {
initial-value: 0;
inherits: false;
syntax: '<integer>';
}
@property --m-tens {
initial-value: 0;
inherits: false;
syntax: '<integer>';
}
@property --m-singles {
initial-value: 0;
inherits: false;
syntax: '<integer>';
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--bg);
overflow: hidden;
font-family: 'Orbitron', sans-serif;
}
[type='checkbox'] {
position: fixed;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.scene {
--rotate-y: 0;
--rotate-x: 0;
transform: translate(-50%, -50%);
position: fixed;
top: 50%;
left: 50%;
transition: transform 0.1s;
transform: translate3d(-50%, -50%, 100vmin) rotateX(-24deg) rotateY(-24deg) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg));
}
.stopwatch {
--depth: var(--stopwatch-depth);
height: calc(var(--stopwatch-size, 50) * 1vmin);
margin: 0;
width: calc(var(--stopwatch-size, 50) * 1vmin);
}
.stopwatch__chords {
height: 100vmax;
width: 26%;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 0);
}
.stopwatch__chord {
height: 100%;
width: 10%;
position: absolute;
top: 0;
}
.stopwatch__chord .cuboid {
--depth: 1;
}
.stopwatch__chord .cuboid .cuboid__side {
background: repeating-linear-gradient(calc(var(--deg, 45) * 1deg), var(--chord-one) 0 1%, var(--chord-two) 1% 2%);
}
.stopwatch__chord .cuboid .cuboid__side:nth-of-type(even) {
--deg: -45;
--b: 0.5;
}
.stopwatch__chord:nth-of-type(1) {
left: 0;
}
.stopwatch__chord:nth-of-type(2) {
right: 0;
}
.stopwatch__logo {
height: 20%;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
filter: saturate(0);
opacity: 0.5;
}
.stopwatch__glass {
background: var(--glass);
height: 100%;
width: 100%;
clip-path: var(--body-clip);
-webkit-clip-path: var(--body-clip);
position: absolute;
transform: translate3d(0, 0, calc(var(--stopwatch-depth) * 0.3vmin)) scale(0.85);
}
.stopwatch__glass:after {
content: '';
position: absolute;
height: 300%;
width: 300%;
transition: transform 0.1s;
background: linear-gradient(transparent 0 35%, var(--glare) 36% 42%, transparent 43% 45%, var(--glare) 46% 48%, transparent 49%);
transform: translate(-50%, -50%) translateX(calc(var(--shift, 0) * 1%)) rotate(-60deg);
top: 50%;
left: 50%;
}
.stopwatch__content {
background: var(--content);
height: 100%;
width: 100%;
clip-path: var(--body-clip);
-webkit-clip-path: var(--body-clip);
position: absolute;
transform: scale(0.85);
}
.stopwatch__face {
color: var(--digit, #fff);
display: flex;
font-size: 6vmin;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1.75vmin;
border-radius: 1vmin;
background: var(--face, #000);
}
.stopwatch .stopwatch__body > .cuboid__side:nth-of-type(5),
.stopwatch .stopwatch__body > .cuboid__side:nth-of-type(6) {
display: none;
}
.stopwatch__back {
height: 100%;
width: 100%;
background: var(--stopwatch-frame);
position: absolute;
transform: translate3d(0, 0, calc(var(--stopwatch-depth) * -0.5vmin)) scale(1);
-webkit-clip-path: var(--body-clip);
clip-path: var(--body-clip);
}
.rotater {
z-index: -1;
position: fixed;
height: 100vh;
width: 20vw;
left: calc(var(--index) * 20%);
}
[data-multiplier="-2"]:hover ~ .scene {
--shift: 20;
--rotate-y: calc(-2 * var(--scene-rotation, 10));
}
[data-multiplier="-1"]:hover ~ .scene {
--shift: 10;
--rotate-y: calc(-1 * var(--scene-rotation, 10));
}
[data-multiplier="0"]:hover ~ .scene {
--shift: 0;
--rotate-y: calc(0 * var(--scene-rotation, 10));
}
[data-multiplier="1"]:hover ~ .scene {
--shift: -10;
--rotate-y: calc(1 * var(--scene-rotation, 10));
}
[data-multiplier="2"]:hover ~ .scene {
--shift: -20;
--rotate-y: calc(2 * var(--scene-rotation, 10));
}
.stopwatch__body .cuboid__side {
filter: none;
display: flex;
flex-direction: var(--flow, column);
}
.stopwatch__body .cuboid__side:nth-of-type(odd) {
--flow: row;
}
.stopwatch__body .cuboid__side:nth-of-type(even) .stopwatch__frame .cuboid__side:nth-of-type(4),
.stopwatch__body .cuboid__side:nth-of-type(odd) .stopwatch__frame .cuboid__side:nth-of-type(3) {
--b: 0.55;
}
.stopwatch__body .cuboid__side:nth-of-type(even) .stopwatch__frame .cuboid__side:nth-of-type(2),
.stopwatch__body .cuboid__side:nth-of-type(odd) .stopwatch__frame .cuboid__side:nth-of-type(1) {
--b: 1;
}
.stopwatch__body .cuboid__side:nth-of-type(even) .stopwatch__frame .cuboid__side:nth-of-type(1),
.stopwatch__body .cuboid__side:nth-of-type(even) .stopwatch__frame .cuboid__side:nth-of-type(3),
.stopwatch__body .cuboid__side:nth-of-type(odd) .stopwatch__frame .cuboid__side:nth-of-type(2),
.stopwatch__body .cuboid__side:nth-of-type(odd) .stopwatch__frame .cuboid__side:nth-of-type(4) {
--b: 0.5;
}
.stopwatch__body .cuboid__side:nth-of-type(1) .stopwatch__body-angle:nth-of-type(2) .stopwatch__frame .cuboid__side:nth-of-type(5) {
--b: 1.2;
}
.stopwatch__body .cuboid__side:nth-of-type(1) .stopwatch__body-angle:nth-of-type(1) .stopwatch__frame .cuboid__side:nth-of-type(5),
.stopwatch__body .cuboid__side:nth-of-type(4) .stopwatch__body-angle:nth-of-type(1) .stopwatch__frame .cuboid__side:nth-of-type(6) {
--b: 1.1;
}
.stopwatch__body .cuboid__side:nth-of-type(4) .stopwatch__body-angle:nth-of-type(2) .stopwatch__frame .cuboid__side:nth-of-type(6) {
--b: 1;
}
.stopwatch__body .cuboid__side:nth-of-type(3) .stopwatch__body-angle:nth-of-type(1) .stopwatch__frame .cuboid__side:nth-of-type(6),
.stopwatch__body .cuboid__side:nth-of-type(4) .stopwatch__body-angle:nth-of-type(3) .stopwatch__frame .cuboid__side:nth-of-type(6) {
--b: 0.9;
}
.stopwatch__body .cuboid__side:nth-of-type(3) .stopwatch__body-angle:nth-of-type(2) .stopwatch__frame .cuboid__side:nth-of-type(6) {
--b: 0.8;
}
.stopwatch__body .cuboid__side:nth-of-type(3) .stopwatch__body-angle:nth-of-type(3) .stopwatch__frame .cuboid__side:nth-of-type(6),
.stopwatch__body .cuboid__side:nth-of-type(2) .stopwatch__body-angle:nth-of-type(3) .stopwatch__frame .cuboid__side:nth-of-type(5) {
--b: 0.7;
}
.stopwatch__body .cuboid__side:nth-of-type(2) .stopwatch__body-angle:nth-of-type(2) .stopwatch__frame .cuboid__side:nth-of-type(5) {
--b: 0.7;
}
.stopwatch__body .cuboid__side:nth-of-type(1) .stopwatch__body-angle:nth-of-type(3) .stopwatch__frame .cuboid__side:nth-of-type(5),
.stopwatch__body .cuboid__side:nth-of-type(2) .stopwatch__body-angle:nth-of-type(1) .stopwatch__frame .cuboid__side:nth-of-type(5) {
--b: 1;
}
.stopwatch__body .cuboid__side:nth-of-type(1) .stopwatch__body-angle:nth-of-type(2) .stopwatch__frame .cuboid__side:nth-of-type(6) {
--b: 0.6;
}
.stopwatch__body .cuboid__side:nth-of-type(1) .stopwatch__body-angle:nth-of-type(1) .stopwatch__frame .cuboid__side:nth-of-type(6),
.stopwatch__body .cuboid__side:nth-of-type(4) .stopwatch__body-angle:nth-of-type(1) .stopwatch__frame .cuboid__side:nth-of-type(5) {
--b: 0.5;
}
.stopwatch__body .cuboid__side:nth-of-type(4) .stopwatch__body-angle:nth-of-type(2) .stopwatch__frame .cuboid__side:nth-of-type(5) {
--b: 0.4;
}
.stopwatch__body .cuboid__side:nth-of-type(3) .stopwatch__body-angle:nth-of-type(1) .stopwatch__frame .cuboid__side:nth-of-type(5),
.stopwatch__body .cuboid__side:nth-of-type(4) .stopwatch__body-angle:nth-of-type(3) .stopwatch__frame .cuboid__side:nth-of-type(5) {
--b: 0.5;
}
.stopwatch__body .cuboid__side:nth-of-type(3) .stopwatch__body-angle:nth-of-type(2) .stopwatch__frame .cuboid__side:nth-of-type(5) {
--b: 0.8;
}
.stopwatch__body .cuboid__side:nth-of-type(3) .stopwatch__body-angle:nth-of-type(3) .stopwatch__frame .cuboid__side:nth-of-type(5),
.stopwatch__body .cuboid__side:nth-of-type(2) .stopwatch__body-angle:nth-of-type(3) .stopwatch__frame .cuboid__side:nth-of-type(6) {
--b: 0.9;
}
.stopwatch__body .cuboid__side:nth-of-type(2) .stopwatch__body-angle:nth-of-type(2) .stopwatch__frame .cuboid__side:nth-of-type(6) {
--b: 1;
}
.stopwatch__body .cuboid__side:nth-of-type(1) .stopwatch__body-angle:nth-of-type(3) .stopwatch__frame .cuboid__side:nth-of-type(6),
.stopwatch__body .cuboid__side:nth-of-type(2) .stopwatch__body-angle:nth-of-type(1) .stopwatch__frame .cuboid__side:nth-of-type(6) {
--b: 0.8;
}
.stopwatch__body > .cuboid__side {
pointer-events: none;
}
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
background: none;
}
label,
label > *,
button,
button > * {
cursor: pointer;
pointer-events: all;
}
.stopwatch__body-angle {
flex: 1;
position: relative;
}
.stopwatch__body-angle:nth-of-type(1),
.stopwatch__body-angle:nth-of-type(3) {
flex: 0.5;
}
.stopwatch__body-angle {
transform-origin: var(--transform-origin, 50% 50%);
transform: var(--rotate, rotate(0deg)) translate3d(0, 0, calc((var(--stopwatch-frame-depth) * var(--coefficient, -0.5)) * 1vmin));
}
.stopwatch__body .cuboid__side:nth-of-type(1) .stopwatch__body-angle:nth-of-type(1) {
--transform-origin: 100% 50%;
--rotate: rotateY(-45deg);
}
.stopwatch__body .cuboid__side:nth-of-type(1) .stopwatch__body-angle:nth-of-type(3) {
--transform-origin: 0% 50%;
--rotate: rotateY(45deg);
}
.stopwatch__body .cuboid__side:nth-of-type(2) .stopwatch__body-angle:nth-of-type(1) {
--transform-origin: 50% 100%;
--rotate: rotateX(45deg);
}
.stopwatch__body .cuboid__side:nth-of-type(2) .stopwatch__body-angle:nth-of-type(3) {
--transform-origin: 50% 0%;
--rotate: rotateX(-45deg);
}
.stopwatch__body .cuboid__side:nth-of-type(3) .stopwatch__body-angle:nth-of-type(1) {
--transform-origin: 100% 50%;
--rotate: rotateY(45deg);
--coefficient: 0.5;
}
.stopwatch__body .cuboid__side:nth-of-type(3) .stopwatch__body-angle:nth-of-type(2) {
--coefficient: 0.5;
}
.stopwatch__body .cuboid__side:nth-of-type(3) .stopwatch__body-angle:nth-of-type(3) {
--transform-origin: 0% 50%;
--coefficient: 0.5;
--rotate: rotateY(-45deg);
}
.stopwatch__body .cuboid__side:nth-of-type(4) .stopwatch__body-angle:nth-of-type(1) {
--transform-origin: 50% 100%;
--rotate: rotateX(-45deg);
--coefficient: 0.5;
}
.stopwatch__body .cuboid__side:nth-of-type(4) .stopwatch__body-angle:nth-of-type(2) {
--coefficient: 0.5;
}
.stopwatch__body .cuboid__side:nth-of-type(4) .stopwatch__body-angle:nth-of-type(3) {
--transform-origin: 50% 0%;
--rotate: rotateX(45deg);
--coefficient: 0.5;
}
.stopwatch__frame {
--depth: var(--stopwatch-frame-depth);
}
.stopwatch__frame .cuboid__side {
background: var(--stopwatch-frame);
filter: brightness(var(--b));
}
.stopwatch__control {
position: absolute;
height: 100%;
width: calc(var(--width, 140) * 1%);
top: 50%;
left: 50%;
transform: translate3d(calc(var(--offset-x, -32) * 1%), -50%, calc(var(--stopwatch-frame-depth) * 0.5vmin));
}
.stopwatch__reset {
--offset-x: -64;
}
.stopwatch__pause {
display: none;
}
.cuboid__side > [type='reset'] {
height: 100%;
width: 100%;
position: absolute;
}
.stopwatch__pause,
.stopwatch__start {
--control-bg: var(--start);
}
.stopwatch__reset {
--control-bg: var(--reset);
}
.button {
--depth: calc(var(--stopwatch-frame-depth) * 1);
transform: translate3d(-50%, -50%, var(--elevation));
height: 75%;
width: 65%;
top: 50%;
left: 50%;
transition: transform 0.1s;
}
.button .cuboid__side {
background: var(--control-bg, #f00);
filter: brightness(var(--b));
}
.button__placeholder {
width: 100%;
height: 100%;
}
.button__container {
--depth: calc(var(--stopwatch-frame-depth) * 1.4);
--elevation: calc(var(--stopwatch-frame-depth) * -0.2vmin);
transform: translate3d(0, 0, calc(var(--depth) * 0.5vmin));
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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