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