js+css实现铁血战士外星符号显示当前时间时钟代码
代码语言：html
所属分类：其他
代码描述：js+css实现铁血战士外星符号显示当前时间时钟代码
代码标签： js css 铁血 战士 外星 符号 显示 当前 时间 时钟 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*
global
*/
@import url(//fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap); *, *::before, *::after {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
/*
yautja-clock
*/
.yautja-clock {
--_d-color-on: rgb(255, 0, 0);
--_d-color-off: rgb(110, 0, 0);
--_d-element-thickness: 3px;
--_d-el-r: calc(var(--_d-element-thickness) * 0.5);
--_d-element-length: calc(var(--_d-el-r) * 8);
--_d-distance-x: var(--_d-element-thickness);
--_d-distance-y: var(--_d-distance-x);
--_d-width: calc(var(--_d-element-length) * 2 + var(--_d-el-r) * 6);
--_d-height: calc(var(--_d-width) * 2.13636);
--_digits-distance-x: calc(var(--_d-element-thickness) * 0);
--_digits-distance-y: var(--_digits-distance-x);
--_digits-width: calc(calc(var(--_d-width) + var(--_d-distance-x)) * 6 + var(--_digits-distance-x));
--_digits-height: calc(var(--_d-height) + var(--_d-distance-y) + var(--_digits-distance-y));
--_digits-background-color: rgb(0, 0, 0);
--_d-1-el-1-c: var(--_d-color-on);
--_d-1-el-2-c: var(--_d-color-on);
--_d-1-el-3-c: var(--_d-color-on);
--_d-1-el-4-c: var(--_d-color-on);
--_d-1-el-5-c: var(--_d-color-on);
--_d-1-el-6-c: var(--_d-color-on);
--_d-1-el-7-c: var(--_d-color-on);
--_d-1-el-8-c: var(--_d-color-on);
--_d-1-el-9-c: var(--_d-color-on);
--_d-2-el-1-c: var(--_d-color-on);
--_d-2-el-2-c: var(--_d-color-on);
--_d-2-el-3-c: var(--_d-color-on);
--_d-2-el-4-c: var(--_d-color-on);
--_d-2-el-5-c: var(--_d-color-on);
--_d-2-el-6-c: var(--_d-color-on);
--_d-2-el-7-c: var(--_d-color-on);
--_d-2-el-8-c: var(--_d-color-on);
--_d-2-el-9-c: var(--_d-color-on);
--_d-3-el-1-c: var(--_d-color-on);
--_d-3-el-2-c: var(--_d-color-on);
--_d-3-el-3-c: var(--_d-color-on);
--_d-3-el-4-c: var(--_d-color-on);
--_d-3-el-5-c: var(--_d-color-on);
--_d-3-el-6-c: var(--_d-color-on);
--_d-3-el-7-c: var(--_d-color-on);
--_d-3-el-8-c: var(--_d-color-on);
--_d-3-el-9-c: var(--_d-color-on);
--_d-4-el-1-c: var(--_d-color-on);
--_d-4-el-2-c: var(--_d-color-on);
--_d-4-el-3-c: var(--_d-color-on);
--_d-4-el-4-c: var(--_d-color-on);
--_d-4-el-5-c: var(--_d-color-on);
--_d-4-el-6-c: var(--_d-color-on);
--_d-4-el-7-c: var(--_d-color-on);
--_d-4-el-8-c: var(--_d-color-on);
--_d-4-el-9-c: var(--_d-color-on);
--_d-5-el-1-c: var(--_d-color-on);
--_d-5-el-2-c: var(--_d-color-on);
--_d-5-el-3-c: var(--_d-color-on);
--_d-5-el-4-c: var(--_d-color-on);
--_d-5-el-5-c: var(--_d-color-on);
--_d-5-el-6-c: var(--_d-color-on);
--_d-5-el-7-c: var(--_d-color-on);
--_d-5-el-8-c: var(--_d-color-on);
--_d-5-el-9-c: var(--_d-color-on);
--_d-6-el-1-c: var(--_d-color-on);
--_d-6-el-2-c: var(--_d-color-on);
--_d-6-el-3-c: var(--_d-color-on);
--_d-6-el-4-c: var(--_d-color-on);
--_d-6-el-5-c: var(--_d-color-on);
--_d-6-el-6-c: var(--_d-color-on);
--_d-6-el-7-c: var(--_d-color-on);
--_d-6-el-8-c: var(--_d-color-on);
--_d-6-el-9-c: var(--_d-color-on);
--_d-1-el-1-p-x: calc(var(--_d-element-length) + var(--_d-el-r) * 3);
--_d-1-el-1-p-y: var(--_d-el-r);
--_d-1-el-2-p-x: var(--_d-el-r);
--_d-1-el-2-p-y: calc(var(--_d-element-length) + var(--_d-el-r) * 3);
--_d-1-el-3-p-x: calc(var(--_d-element-length) + var(--_d-el-r) * 6);
--_d-1-el-3-p-y: var(--_d-1-el-2-p-y);
--_d-1-el-4-p-x: calc(var(--_d-element-length) + var(--_d-el-r) * 1);
--_d-1-el-4-p-y: calc(var(--_d-element-length) + var(--_d-el-r) * 7);
--_d-1-el-5-p-x: calc(var(--_d-element-length) + var(--_d-el-r) * 5);
--_d-1-el-5-p-y: var(--_d-1-el-4-p-y);
--_d-1-el-6-p-x: calc(var(--_d-el-r) * 3);
--_d-1-el-6-p-y: calc(var(--_d-1-el-5-p-y) * 1.75);
--_d-1-el-7-p-x: calc(var(--_d-element-length) + var(--_d-el-r) * 11);
--_d-1-el-7-p-y: var(--_d-1-el-6-p-y);
--_d-1-el-8-p-x: var(--_d-1-el-3-p-x);
--_d-1-el-8-p-y: calc(var(--_d-element-length) * 4 + var(--_d-el-r) * 4.25);
--_d-1-el-9-p-x: var(--_d-1-el-1-p-x);
--_d-1-el-9-p-y: calc(var(--_d-1-el-8-p-y) + var(--_d-el-r) * 3);
--_d-2-el-1-p-x: calc(var(--_d-1-el-1-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-2-el-1-p-y: var(--_d-1-el-1-p-y);
--_d-2-el-2-p-x: calc(var(--_d-1-el-2-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-2-el-2-p-y: var(--_d-1-el-2-p-y);
--_d-2-el-3-p-x: calc(var(--_d-1-el-3-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-2-el-3-p-y: var(--_d-1-el-3-p-y);
--_d-2-el-4-p-x: calc(var(--_d-1-el-4-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-2-el-4-p-y: var(--_d-1-el-4-p-y);
--_d-2-el-5-p-x: calc(var(--_d-1-el-5-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-2-el-5-p-y: var(--_d-1-el-5-p-y);
--_d-2-el-6-p-x: calc(var(--_d-1-el-6-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-2-el-6-p-y: var(--_d-1-el-6-p-y);
--_d-2-el-7-p-x: calc(var(--_d-1-el-7-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-2-el-7-p-y: var(--_d-1-el-7-p-y);
--_d-2-el-8-p-x: calc(var(--_d-1-el-8-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-2-el-8-p-y: var(--_d-1-el-8-p-y);
--_d-2-el-9-p-x: calc(var(--_d-1-el-9-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-2-el-9-p-y: var(--_d-1-el-9-p-y);
--_d-3-el-1-p-x: calc(var(--_d-2-el-1-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-3-el-1-p-y: var(--_d-1-el-1-p-y);
--_d-3-el-2-p-x: calc(var(--_d-2-el-2-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-3-el-2-p-y: var(--_d-1-el-2-p-y);
--_d-3-el-3-p-x: calc(var(--_d-2-el-3-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-3-el-3-p-y: var(--_d-1-el-3-p-y);
--_d-3-el-4-p-x: calc(var(--_d-2-el-4-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-3-el-4-p-y: var(--_d-1-el-4-p-y);
--_d-3-el-5-p-x: calc(var(--_d-2-el-5-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-3-el-5-p-y: var(--_d-1-el-5-p-y);
--_d-3-el-6-p-x: calc(var(--_d-2-el-6-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-3-el-6-p-y: var(--_d-1-el-6-p-y);
--_d-3-el-7-p-x: calc(var(--_d-2-el-7-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-3-el-7-p-y: var(--_d-1-el-7-p-y);
--_d-3-el-8-p-x: calc(var(--_d-2-el-8-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-3-el-8-p-y: var(--_d-1-el-8-p-y);
--_d-3-el-9-p-x: calc(var(--_d-2-el-9-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-3-el-9-p-y: var(--_d-1-el-9-p-y);
--_d-4-el-1-p-x: calc(var(--_d-3-el-1-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-4-el-1-p-y: var(--_d-1-el-1-p-y);
--_d-4-el-2-p-x: calc(var(--_d-3-el-2-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-4-el-2-p-y: var(--_d-1-el-2-p-y);
--_d-4-el-3-p-x: calc(var(--_d-3-el-3-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-4-el-3-p-y: var(--_d-1-el-3-p-y);
--_d-4-el-4-p-x: calc(var(--_d-3-el-4-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-4-el-4-p-y: var(--_d-1-el-4-p-y);
--_d-4-el-5-p-x: calc(var(--_d-3-el-5-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-4-el-5-p-y: var(--_d-1-el-5-p-y);
--_d-4-el-6-p-x: calc(var(--_d-3-el-6-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-4-el-6-p-y: var(--_d-1-el-6-p-y);
--_d-4-el-7-p-x: calc(var(--_d-3-el-7-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-4-el-7-p-y: var(--_d-1-el-7-p-y);
--_d-4-el-8-p-x: calc(var(--_d-3-el-8-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-4-el-8-p-y: var(--_d-1-el-8-p-y);
--_d-4-el-9-p-x: calc(var(--_d-3-el-9-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-4-el-9-p-y: var(--_d-1-el-9-p-y);
--_d-5-el-1-p-x: calc(var(--_d-4-el-1-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-5-el-1-p-y: var(--_d-1-el-1-p-y);
--_d-5-el-2-p-x: calc(var(--_d-4-el-2-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-5-el-2-p-y: var(--_d-1-el-2-p-y);
--_d-5-el-3-p-x: calc(var(--_d-4-el-3-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-5-el-3-p-y: var(--_d-1-el-3-p-y);
--_d-5-el-4-p-x: calc(var(--_d-4-el-4-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-5-el-4-p-y: var(--_d-1-el-4-p-y);
--_d-5-el-5-p-x: calc(var(--_d-4-el-5-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-5-el-5-p-y: var(--_d-1-el-5-p-y);
--_d-5-el-6-p-x: calc(var(--_d-4-el-6-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-5-el-6-p-y: var(--_d-1-el-6-p-y);
--_d-5-el-7-p-x: calc(var(--_d-4-el-7-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-5-el-7-p-y: var(--_d-1-el-7-p-y);
--_d-5-el-8-p-x: calc(var(--_d-4-el-8-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-5-el-8-p-y: var(--_d-1-el-8-p-y);
--_d-5-el-9-p-x: calc(var(--_d-4-el-9-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-5-el-9-p-y: var(--_d-1-el-9-p-y);
--_d-6-el-1-p-x: calc(var(--_d-5-el-1-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-6-el-1-p-y: var(--_d-1-el-1-p-y);
--_d-6-el-2-p-x: calc(var(--_d-5-el-2-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-6-el-2-p-y: var(--_d-1-el-2-p-y);
--_d-6-el-3-p-x: calc(var(--_d-5-el-3-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-6-el-3-p-y: var(--_d-1-el-3-p-y);
--_d-6-el-4-p-x: calc(var(--_d-5-el-4-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-6-el-4-p-y: var(--_d-1-el-4-p-y);
--_d-6-el-5-p-x: calc(var(--_d-5-el-5-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-6-el-5-p-y: var(--_d-1-el-5-p-y);
--_d-6-el-6-p-x: calc(var(--_d-5-el-6-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-6-el-6-p-y: var(--_d-1-el-6-p-y);
--_d-6-el-7-p-x: calc(var(--_d-5-el-7-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-6-el-7-p-y: var(--_d-1-el-7-p-y);
--_d-6-el-8-p-x: calc(var(--_d-5-el-8-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-6-el-8-p-y: var(--_d-1-el-8-p-y);
--_d-6-el-9-p-x: calc(var(--_d-5-el-9-p-x) + var(--_d-width) + var(--_d-distance-x));
--_d-6-el-9-p-y: var(--_d-1-el-9-p-y);
background: /*digit 1*/ radial-gradient(circle var(--_d-el-r) at calc(var(--_d-1-el-1-p-x) + var(--_d-el-r) * 0) calc(var(--_d-1-el-1-p-y) + var(--_d-el-r) * 0), var(--_d-1-el-1-c) 0px, var(--_d-1-el-1-c) var(--_d-el-r), transparent var(--_d-el-r)), radial-gradient(circle var(--_d-el-r) at calc(var(--_d-1-el-1-p-x) + var(--_d-el-r) * 0) calc(var(--_d-1-el-1-p-y) + var(--_d-el-r) * 1), var(--_d-1-el-1-c) 0px, var(--_d-1-el-1-c) var(--_d-el-r), transparent var(--_d-el-r)), radial-gradient(circle var(--_d-el-r) at calc(var(--_d-1-el-1-p-x) + var(--_d-el-r) * 0) calc(var(--_d-1-el-1-p-y) + var(--_d-el-r) * 2), var(--_d-1-el-1-c) 0px, var(--_d-1-el-1-c) var(--_d-el-r), transparent var(--_d-el-r)), radial-gradient(circle var(--_d-el-r) at calc(var(--_d-1-el-1-p-x) + var(--_d-el-r) * 0) calc(var(--_d-1-el-1-p-y) + var(--_d-el-r) * 3), var(--_d-1-el-1-c) 0px, var(--_d-1-el-1-c) var(--_d-el-r), transparent var(--_d-el-r)), radial-gradient(circle var(--_d-el-r) at calc(var(--_d-1-el-1-p-x) + var(--_d-el-r) * 0) calc(var(--_d-1-el-1-p-y) + var(--_d-el-r) * 4), var(--_d-1-el-1-c) 0px, var(--_d-1-el-1-c) var(--_d-el-r), transparent var(--_d-el-r)), radial-gradient(circle var(--_d-el-r) at calc(var(--_d-1-el-1-p-x) + var(--_d-el-r) * 0) calc(var(--_d-1-el-1-p-y) + var(--_d-el-r) * 5), var(--_d.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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