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