css实现下雪动画效果代码-html代码-BFW代码库

css实现下雪动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现下雪动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Henny+Penny&amp;display=swap'>
  
<style>
html,
body {
   min-height: 100%;
}

body {
   background: #aaa url(//repo.bfw.wiki/bfwrepo/image/65d420c223aa5.png) center no-repeat;
   background-size: cover;
}

h1 {
   text-align:center;
   color:#fffd; font-family: "Henny Penny", serif; 
  font-size:10vw;
  text-shadow:3px 3px 6px #0013;
  margin-top:20%;
}

/* cssnow style starts here */
.cssnow {
   pointer-events: none;
   position: absolute;
}

.cssnow span {
   display: block;
   background: #fff;
   border-radius: 50%;
   width: 9px;
   height: 12px;
   box-shadow: -100px -290px 0px -2px #fff5;
 rotate: 35deg;
  filter:blur(3px)
}

@keyframes cssnowflakes-fall {
   0% {
      top: -10%;
   }

   100% {
      top: 100%;
   }
}

@keyframes cssnowflakes-shake {
   0% {
      transform: translateX(0px);
   }

   50% {
      transform: translateX(80px);
   }

   100% {
      transform: translateX(0px);
   }
}

.cssnow span {
   position: fixed;
   top: -10%;
   z-index: 9999;
   animation-name: cssnowflakes-fall, cssnowflakes-shake;
   animation-duration: 10s, 3s;
   animation-timing-function: linear, ease-in-out;
   animation-iteration-count: infinite, infinite;
   animation-play-state: running, running;
}

.cssnow span:nth-of-type(0) {
   left: 1%;
   animation-delay: 0s, 0s;
}

.cssnow span:nt.........完整代码请登录后点击上方下载按钮下载查看