css实现下雪动画效果代码

代码语言:html

所属分类:动画

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

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

网友评论0