js+css实现莱茵塔光时标时钟代码-html代码-BFW代码库

js+css实现莱茵塔光时标时钟代码

代码语言：html

代码描述：js+css实现莱茵塔光时标时钟代码，这是一个基于德国杜塞尔多夫地标建筑——莱茵塔（Rheinturm）上著名灯光雕塑「Lichtzeitpegel」（光时标）创作的纯前端数字时钟。是世界上最大的十进制数字灯光钟。深蓝夜空背景下，白色光点垂直排列成六组，自上而下分别代表小时（00–24）、分钟（00–59）、秒（00–59），完美复现莱茵塔夜间报时的科技美感与艺术气质。

代码标签： js css 莱茵塔光时标时钟代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
/*
global
*/
*, *::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;
    background-color: #000;
    overflow: hidden;
    background: linear-gradient(
        to bottom,
        #1f4972 0%,
        #1f446a 20%,
        #2c5777 40%,
        #284259 60%,
        #182939 80%
    );
}

/*
rheinturm
*/
.scene {
    position: relative;
    width: min(100vw, calc(100svh * 320 / 433));
    aspect-ratio: 320 / 433;
}

.scene:after {
    content: '';
    width: 100vw;
    height: 1000%;
    position: absolute;
    background-color: #000;
    top: 99.9%;
    left: 50%;
    transform: translateX(-50%);
}

.rheinturm {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(
            to right,
            transparent 0%,
            transparent 40%,
            rgba(255, 255, 255, 0.09) 49%,
            transparent 58%,
            transparent 100%
        ),
        linear-gradient( 
            to bottom, 
            #000 0%, 
            #000 7%, 
            #535a6d 9.5%, 
            #8b9ea5 13%, 
            #000 14%, 
            #000 16%, 
            #9f9d90 17.5%, 
            #d6d0b0 20.5%,
            #9c9a74 24.1%,
            #7b7569 24.8%,
            #413c29 25.3%,
            #190f43 25.3%,
            #000 28.6%,
            #190f43 28.6%,
            #000 31.6%,
            #121211 31.6%,
            #000 33.5%,
            #000 36%,
            #121211 36.7%,
            #000 42%,
            #000 100%
        );

    clip-path: shape(
        from 51.547% 25.393%,
        line to 50.703% 25.393%,
        line.........完整代码请登录后点击上方下载按钮下载查看