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 fall -19s infinite;
}
.snowflake._sm-26 {
  left: 46vw;
  filter: blur(0px);
  animation: 29s fall -12.2s infinite;
}
.snowflake._sm-27 {
  left: -9vw;
  filter: blur(1px);
  animation: 29.8s fall -14.8s infinite;
}
.snowflake._sm-28 {
  left: 17vw;
  filter: blur(1px);
  animation: 21.8s fall -18s infinite;
}
.snowflake._sm-29 {
  left: 38vw;
  filter: blur(0px);
  animation: 27.6s fall -15.6s infinite;
}
.snowflake._sm-30 {
  left: 12vw;
  filter: blur(1px);
  animation: 10.8s fall -0.6s infinite;
}
.snowflake._sm-31 {
  left: 93vw;
  filter: blur(1px);
  animation: 11.2s fall -18s infinite;
}
.snowflake._sm-32 {
  left: 76vw;
  filter: blur(1px);
  animation: 15s fall -7.4s infinite;
}
.snowflake._sm-33 {
  left: -8vw;
  filter: blur(1px);
  animation: 20.4s fall -12.8s infinite;
}
.snowflake._sm-34 {
  left: 61vw;
  filter: blur(1px);
  animation: 25.4s fall -12.4s infinite;
}
.snowflake._sm-35 {
  left: 63vw;
  filter: blur(0px);
  animation: 14.2s fall -1s infinite;
}
.snowflake._sm-36 {
  left: 34vw;
  filter: blur(1px);
  animation: 17s fall -9s infinite;
}
.snowflake._sm-37 {
  left: 94vw;
  filter: blur(1px);
  animation: 23.2s fall -15.2s infinite;
}
.snowflake._sm-38 {
  left: 21vw;
  filter: blur(1px);
  animation: 18.6s fall -11.6s infinite;
}
.snowflake._sm-39 {
  left: 50vw;
  filter: blur(0px);
  animation: 27.6s fall -13.4s infinite;
}
.snowflake._sm-40 {
  left: 88vw;
  filter: blur(0px);
  animation: 21s fall -7.2s infinite;
}
.snowflake._sm-41 {
  left: 38vw;
  filter: blur(1px);
  animation: 12s fall -14.2s infinite;
}
.snowflake._sm-42 {
  left: 28vw;
  filter: blur(1px);
  animation: 17.4s fall -12.4s infinite;
}
.snowflake._sm-43 {
  left: -9vw;
  filter: blur(1px);
  animation: 11.2s fall -15s infinite;
}
.snowflake._sm-44 {
  left: 96vw;
  filter: blur(1px);
  animation: 10.6s fall -15.2s infinite;
}
.snowflake._sm-45 {
  left: 30vw;
  filter: blur(0px);
  animation: 12.8s fall -5.6s infinite;
}
.snowflake._sm-46 {
  left: 86vw;
  filter: blur(1px);
  animation: 22.8s fall -5.2s infinite;
}
.snowflake._sm-47 {
  left: -16vw;
  filter: blur(0px);
  animation: 21.4s fall -14.8s infinite;
}
.snowflake._sm-48 {
  left: 22vw;
  filter: blur(1px);
  animation: 13.2s fall -2.6s infinite;
}
.snowflake._sm-49 {
  left: 70vw;
  filter: blur(1px);
  animation: 25.2s fall -20s infinite;
}
.snowflake._sm-50 {
  left: 80vw;
  filter: blur(1px);
  animation: 14.8s fall -2.8s infinite;
}
.snowflake._sm-51 {
  left: 16vw;
  filter: blur(1px);
  animation: 27.4s fall -13.6s infinite;
}
.snowflake._sm-52 {
  left: 28vw;
  filter: blur(1px);
  animation: 14.4s fall -20s infinite;
}
.snowflake._sm-53 {
  left: 58vw;
  filter: blur(0px);
  animation: 24s fall -10.6s infinite;
}
.snowflake._sm-54 {
  left: 11vw;
  filter: blur(1px);
  animation: 26s fall -16.2s infinite;
}
.snowflake._sm-55 {
  left: 21vw;
  filter: blur(1px);
  animation: 23s fall -15.6s infinite;
}
.snowflake._sm-56 {
  left: 2vw;
  filter: blur(0px);
  animation: 26.4s fall -5.4s infinite;
}
.snowflake._sm-57 {
  left: 82vw;
  filter: blur(1px);
  animation: 11s fall -4.6s infinite;
}
.snowflake._sm-58 {
  left: 86vw;
  filter: blur(0px);
  animation: 24.8s fall -14.6s infinite;
}
.snowflake._sm-59 {
  left: 97vw;
  filter: blur(0px);
 .........完整代码请登录后点击上方下载按钮下载查看