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

代码语言:html

所属分类:进度条

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

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

网友评论0