js+css实现竖条数字上下移动时钟显示时间效果代码-html代码-BFW代码库

js+css实现竖条数字上下移动时钟显示时间效果代码

代码语言：html

所属分类：其他

代码描述：js+css实现竖条数字上下移动时钟显示时间效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        html,
        body {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          background: linear-gradient(to right bottom, #7d7d7d, #070707);
        }
        
        li {
          list-style: none;
          height: 30px;
          width: 30px;
          margin: 0;
          padding: 0;
          font-size: 22ox;
          line-height: 30px;
          color: #bbbbbb;
        }
        
        .container {
          width: 100%;
          position: fixed;
          top: 50%;
          left: 50%;
          z-index: 4;
          transform: translate(-50%, -50%);
        }
        
        .clock {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          width: 500px;
          height: 30px;
          margin: 50% auto;
          background-color: #3b3b3b;
          box-shadow: 2px 2px 10px 3px #2f2f2f;
          transform: translateY(-50%);
          border-radius: 20px;
        }
        
        .time-box {
          width: 30px;
          height: 100%;
        }
        
        .numbers {
          background-color: #272727;
          box-shadow: 2px 2px 10px 3px #2f2f2f;
          text-align: center;
          border-radius: 10px;
          transition: all 0.5s;
        }
    </style>



</head>

<body translate="no">
    <div class="container">
        <div class="clock">
            <div class="time-box">
                <div class="numbers" id="hours-first">
                    <li>0</li>
                    <li>1</li>
                    <li>2</li>
                </div>
            </div>
            <div class="time-box">
                <div class="numbers" id="hours-second">
                    <li>0</li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </div>
            </div>
            <div class="time-box">
                <div class="numbers" id="minutes-first">
                    <li>0</li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </div>
            </div>
            <div class="time-box">
                <div class="numbers" id="minutes-second">
                    <li>0</li>
                    <li>1</li>
                    <li>2</li>
       .........完整代码请登录后点击上方下载按钮下载查看