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

代码语言:html

所属分类:其他

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

代码标签: 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 #2f2f.........完整代码请登录后点击上方下载按钮下载查看

网友评论0