js+css实现下雪天烟花绽放新年快乐倒计时贺卡信箱互动效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css实现下雪天烟花绽放新年快乐倒计时贺卡信箱互动效果代码，点击右下角信箱可看到祝福贺卡。

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @import url("https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");
:root {
  --font-script: "Gochi Hand";
  --font-sans-serif: "Poppins", sans-serif;
}

body {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  height: 100vh;
  margin: 0;
  background: linear-gradient(to bottom, #20202c 0%, #515175 100%);
  color: #ffffff;
  font-family: var(--font-sans-serif);
}

.font-sans-serif {
  font-family: var(--font-sans-serif);
  font-weight: 200;
  font-size: 0.75em;
}

.font-script {
  font-family: var(--font-script);
}

.header {
  position: relative;
  text-align: center;
  margin-bottom: 60px;
}

.newYear {
  font-family: var(--font-script);
  font-size: calc(2rem + 5vw);
  line-height: 1;
  letter-spacing: 0.02em;
  background: repeating-linear-gradient(45deg, #d80e13, #d80e13 10px, #ffffff 10px, #ffffff 20px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.24), 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}

.title,
.countdown {
  font-family: var(--font-sans-serif);
  text-transform: uppercase;
  font-weight: 200;
  letter-spacing: 0.4em;
  line-height: 1;
  margin: 0 0 1.5em;
  padding: 0;
  font-size: 1.3rem;
  position: relative;
}

.title {
  font-size: 1rem;
}
.title:before, .title:after {
  content: " ***** ";
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: #bad594;
}

.countdown {
  display: flex;
  gap: 0.35em;
  justify-content: space-between;
  max-width: 330px;
  margin: 0 auto;
}

.winter-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.snowflake {
  position: absolute;
  top: -2vh;
  font-size: 2rem;
  animation: fall linear infinite;
  opacity: 0.8;
}

.snowflake {
  position: absolute;
  z-index: 5;
  font-size: 10px;
  width: 2px;
  height: 2px;
  border-radius: 100%;
  background-color: #fff;
}
.snowflake._md {
  width: 3px;
  height: 3px;
}
.snowflake._lg {
  width: 5px;
  height: 5px;
}
.snowflake._sm-1 {
  left: 87vw;
  filter: blur(0px);
  animation: 11s fall -6s infinite;
}
.snowflake._sm-2 {
  left: 70vw;
  filter: blur(1px);
  animation: 17.4s fall -5.2s infinite;
}
.snowflake._sm-3 {
  left: -5vw;
  filter: blur(1px);
  animation: 13.2s fall -4.4s infinite;
}
.snowflake._sm-4 {
  left: 95vw;
  filter: blur(0px);
  animation: 20.2s fall -4.2s infinite;
}
.snowflake._sm-5 {
  left: 71vw;
  filter: blur(1px);
  animation: 25s fall -10.4s infinite;
}
.snowflake._sm-6 {
  left: 77vw;
  filter: blur(1px);
  animation: 20.8s fall -17.6s infinite;
}
.snowflake._sm-7 {
  left: -19vw;
  filter: blur(1px);
  animation: 28.8s fall -8.6s infinite;
}
.snowflake._sm-8 {
  left: 28vw;
  filter: blur(1px);
  animation: 20s fall -6.8s infinite;
}
.snowflake._sm-9 {
  left: 7vw;
  filter: blur(1px);
  animation: 25.6s fall -3.2s infinite;
}
.snowflake._sm-10 {
  left: 8vw;
  filter: blur(1px);
  animation: 29.2s fall -16.6s infinite;
}
.snowflake._sm-11 {
  left: 95vw;
  filter: blur(0px);
  animation: 11.6s fall -3s infinite;
}
.snowflake._sm-12 {
  left: 27vw;
  filter: blur(0px);
  animation: 12s fall -10s infinite;
}
.snowflake._sm-13 {
  left: 58vw;
  filter: blur(1px);
  animation: 28.2s fall -14s infinite;
}
.snowflake._sm-14 {
  left: 89vw;
  filter: blur(1px);
  animation: 27.8s fall -3.8s infinite;
}
.snowflake._sm-15 {
  left: 19vw;
  filter: blur(1px);
  animation: 12.2s fall -3.6s infinite;
}
.snowflake._sm-16 {
  left: 13vw;
  filter: blur(0px);
  animation: 23s fall -2.4s infinite;
}
.snowflake._sm-17 {
  left: 24vw;
  filter: blur(0px);
  animation: 29s fall -19.8s infinite;
}
.snowflake._sm-18 {
  left: 6vw;
  filter: blur(0px);
  animation: 26.6s fall -8.4s infinite;
}
.snowflake._sm-19 {
  left: 43vw;
  filter: blur(1px);
  animation: 20.2s fall -5.6s infinite;
}
.snowflake._sm-20 {
  left: 11vw;
  filter: blur(1px);
  animation: 27.8s fall -16.8s infinite;
}
.snowflake._sm-21 {
  left: 33vw;
  filter: blur(0px);
  animation: 10.2s fall -6.4s infinite;
}
.snowflake._sm-22 {
  left: 45vw;
  filter: blur(1px);
  animation: 23.4s fall -10.8s infinite;
}
.snowflake._sm-23 {
  left: -7vw;
  filter: blur(1px);
  animation: 26.4s fall -14.8s infinite;
}
.snowflake._sm-24 {
  left: -11vw;
  filter: blur(1px);
  animation: 15.4s fall -12s infinite;
}
.snowflake._sm-25 {
  left: 95vw;
  filter: blur(0px);
  animation: 11.4s fa.........完整代码请登录后点击上方下载按钮下载查看