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/css?family=Roboto:100,900&display=swap");
body {
  background: #f0f3f6;
  background-image: radial-gradient(50% 81%, #fff 9%, #cbd5de 82%);
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

.countdown__message {
  color: #4C6377;
  font-family: 'Roboto', sans-serif;
  font-size: 25px;
  font-weight: 100;
  padding-top: 1em;
  text-align: center;
}

.countdown__digit {
  background: #eaeef2;
  background-image: linear-gradient(180deg, #eaeef2 10%, #FFFFFF 100%);
  border-radius: 0.25em;
  box-shadow: 0 20px 30px -10px rgba(76, 99, 119, 0.1), inset 0 -1px 0 0 rgba(76, 99, 119, 0.3), inset 0 1px 0 0 #fff;
  color: #4C6377;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 100px;
  font-weight: 900;
  margin: 0 0.05em;
  padding: 0.2em 0;
  position: relative;
  text-align: center;
  width: 1.2em;
}
.countdown__digit:after {
  background: rgba(16, 21, 26, 0.05);
  box-shadow: 0 2px 1px 0 rgba(255, 255, 255, 0.2);
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  top: 50%;
  width: 100%;
}

.countdown__list {
  margin: 0;
  padding: 0;
}

.countdown__list-item {
  list-style: none;
  margin: 0;
  padding: 0;
}

</sty.........完整代码请登录后点击上方下载按钮下载查看