js+css实现动态显示当年当月当日剩余时间进度条效果代码-html代码-BFW代码库

js+css实现动态显示当年当月当日剩余时间进度条效果代码

代码语言：html

所属分类：进度条

代码描述：js+css实现动态显示当年当月当日剩余时间进度条效果代码，显示了当年剩余时间进度，当月剩余时间进度，当日剩余时间进度，当时剩余时间进度，能够很好展现每天每年每月每日剩余时间进度，让我们更加珍惜时间。

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap");

* {
        margin: 0;
        box-sizing: border-box;
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none;
        user-select: none;
}

:root {
        --black: #eee;
        --white: #111;
        --red: rgb(206, 31, 31);
        --day_size: 0px;
        --barH: 20px;
        --margin: 2px;
        --gridMargin: 14px;
}

body {
        font-family: "Fira Code", monospace;
        background: var(--white);
        color: var(--black);
        overflow: hidden;
        transition: all 500ms cubic-bezier(0.87, -0.2, 0.15, 1.44);
}

.header {
        display: flex;
        align-items: flex-end;
        height: 20vh;
        padding-left: 100px;
        padding-bottom: var(--gridMargin);
        font-weight: 700;
}

.day_night {
        width: 80px;
        height: 80px;
        position: absolute;
        right: 0;
        top: 0;
        color: var(--white);
        transition: all 650ms cubic-bezier(0.87, -0.2, 0.15, 1.44);
        transform: translate(55px, -40px);
        cursor: pointer;
}

.day_night.light {
        transform: translate(55px, -40px) rotate(180deg);
}

.day_night:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0px;
        background: var(--black);
        border-radius: 10px;
        z-index: -1;
        transform: skewX(-30deg);
}

.day_night:hover {
        right: 5px;
        top: 5px;
}

.day_icon {
        position: absolute;
        bottom: 5px;
        left: -5px;
}

.night_icon {
        position: absolute;
        top: 5px;
        right: -5px;
        transform: rotate(-85deg);
}

.main {
        height: 80vh;
        margin: 0 100px;
        padding-bottom: 50px;
        display: grid;
        grid-template-rows: auto auto 1fr;
        grid-template-columns: auto auto;
        grid-template-areas:
                "year month"
                "day hour"
                "days days";
        column-gap: 14px;
}

.grid-item {
        align-self: center;
        margin: var(--gridMargin) 0;
}

.bar {
        border: 1px solid var(--black);
        background: var(--white);
        height: var(--barH);
        margin-top: var(--margin);
        width: 100%;
        box-shadow: 5px 3px #888;
        transition: background 500ms cubic-bezier(0.87, -0.2, 0.15, 1.44);
}

.bar div {
        background: var(--black);
        height: 100%;
        transition: width 450ms linear,
                background 500ms cubic-bezier(0.87, -0.2, 0.15, 1.44);
}

.days {
        grid-area: days;
        display: flex;
        flex-direction: column;
        margin: var(--gridMargin) 0 0 0;
}

.days_cont {
        display: flex;
        flex-wrap: wrap;
        height: 100%;
        margin-top: 5px;
        align-content: start;
}

.days_cont div {
        border: 1px solid var(--black);
        height: var(--day_size);
        width: var(--day_size);
        margin: 0 var(--margin) var(--margin) 0;
}

.passed {
        background: var(--black);
}

.passed.flicker {
        animation: flicker 1750ms linear infinite;
}

@keyframes flicker {
        0% {
                background: var(--white);
        }
        50% {
                background: var(--red);
        }
        100% {
                background: var(--white);
        }
}
</style>



</head>

<body >
  <header class="header">
        <h1 class="header__t.........完整代码请登录后点击上方下载按钮下载查看