div+css实现雪花剪纸挂起来飘动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现雪花剪纸挂起来飘动动画效果代码

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

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

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


  
  
<style>
div, div:before, div:after {
  display: block;
  content: "";
  position: absolute;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: top;
  margin: 0;
  background: linear-gradient(#0a60cc 15%, #05326B);
}

div.paper-snowflake {
  width: 80vmin;
  height: 80vmin;
  transform-origin: bottom left 10px;
  animation: swaying 7s ease-in-out infinite;
  background: radial-gradient(ellipse at right, transparent 3vmin, #E6E6EC 3.25vmin, #E6E6EC 7vmin, transparent 7.25vmin) calc(-15vmin + 34.75vmin) calc(0vmin + 29vmin)/15.5vmin 30vmin no-repeat, radial-gradient(ellipse at left, transparent 3vmin, #d8d8e1 3.25vmin, #d8d8e1 7vmin, transparent 7.25vmin) calc(-15vmin + 50vmin) calc(0vmin + 29vmin)/15vmin 30vmin no-repeat, linear-gradient(90deg, #E6E6EC 2vmin, #c6c6d4 2.25vmin, #d8d8e1 4vmin, transparent 1vmin) calc(-15vmin + 48vmin) calc(0vmin + 16vmin)/4vmin 22vmin no-repeat, radial-gradient(ellipse at bottom right, #E6E6EC 2vmin, transparent 1vmin) calc(-15vmin + 45.75vmin) calc(0vmin + 12vmin)/4.25vmin 4.5vmin no-repeat, radial-gradient(ellipse at bottom left, #d8d8e1 2vmin, transparent 1vmin) calc(-15vmin + 50vmin) calc(0vmin + 12vmin)/4.25vmin 4.5vmin no-repeat, linear-gradient(45deg, transparent 5vmin, #E6E6EC 5.25vmin, #E6E6EC 8.25vmin, transparent 8.5vmin) calc(-15vmin + 45.25vmin) calc(0vmin + 19.5vmin)/4vmin 10vmin no-repeat, radial-gradient(ellipse, #d8d8e1 1.75vmin, transparent 1vmin) calc(-15vmin + 52vmin) calc(0vmin + 19.25vmin)/3.5vmin 3.5vmin no-repeat, linear-gradient(-45deg, transparent 5vmin, #d8d8e1 5.25vmin, #d8d8e1 8.25vmin, transparent 8.5vmin) calc(-15vmin + 50vmin) calc(0vmin + 20vmin)/4vmin 10vmin no-repeat, radial-gradient(ellipse, #E6E6EC 1.75vmin, transparent 1vmin) calc(-15vmin + 44.5vmin) calc(0vmin + 19.25vmin)/3.5vmin 3.5vmin no-repeat, linear-gradient(135deg, transparent 5vmin, #d8d8e1 5.25vmin, #d8d8e1 8.25vmin, transparent 8.5vmin) calc(-15vmin + 48vmin) calc(0vmin + 24.75vmin)/10vmin 15vmin no-repeat, radial-gradient(ellipse, #d8d8e1 1.75vmin, transparent 1vmin) calc(-15vmin + 55.25vmin) calc(0vmin + 23.5vmin)/3.5vmin 3.5vmin no-repeat, linear-gradient(-135deg, transparent 5vmin, #E6E6EC 5.25vmin, #E6E6EC 8.25vmin, transparent 8.5vmin) calc(-15vmin + 41.75vmin) calc(0vmin + 25vmin)/10vmin 15vmin no-repeat, radial-gradient(ellipse, #E6E6EC 1.75vmin, transparent 1vmin) calc(-15vmin + 41vmin) calc(0vmin + 24vmin)/3.5vmin 3.5vmin no-repeat, linear-gradient(-30deg, transparent 15vmin, #d8d8e1 15.25vmin, #ccccd8 17vmin, #d8d8e1 17.25vmin, #d8d8e1 19.25vmin, transparent 19.5vmin) calc(-15vmin + 55vmin) calc(0vmin + 30vmin)/20vmin 20vmin no-repeat, radial-gradient(ellipse, #d8d8e1 2.25vmin, transparent 1vmin) calc(-15vmin + 71vmin) calc(0vmin + 28.75vmin)/4.5vmin 4.5vmin no-repeat, linear-gradient(15deg, transparent 5vmin, #d8d8e1 5.25vmin, #d8d8e1 8.25vmin, transparent 8.5vmin) calc(-15vmin + 68.5vmin) calc(0vmin + 32vmin)/5vmin 10vmin no-repeat, radial-gradient(ellipse, #d8d8e1 1.75vmin, transparent 1vmin) calc(-15vmin + 71.5vmin) calc(0vmin + 34.5vmin)/3.5vmin 3.5vmin no-repeat, linear-gradient(-75deg, transparent 5vmin, #d8d8e1 5.25vmin, #d8d8e1 8.25vmin, transparent 8.5vmin) calc(-15vmin + 64.5vmin) calc(0vmin + 28.5vmin)/10vmin 5vmin no-repeat, radial-gradient(ellipse, #d8d8e1 1.75vmin, transparent 1vmin) calc(-15vmin + 67.25vmin) calc(0vmin + 26.5vmin)/3.5vmin 3.5vmin no-repeat, linear-gradient(15deg, transparent 15vmin, #d8d8e1 15.25vmin, #d8d8e1 18.25vmin, transparent 18.5vmin) calc(-15vmin + 60.5vmin) calc(0vmin + 31vmin)/10vmin 25vmin no-repeat, radial-gradient(ellipse, #d8d8e1 1.75vmin, transparent 1vmin) calc(-15vmin + 68.5vmin) calc(0vmin + 39.5vmin)/3.5vmin 3.5vmin no-repeat, linear-gradient(-75deg, transparent 15vmin, #d8d8e1 15.25vmin, #d8d8e1 18.25vmin, transparent 18.5vmin) calc(-15vmin + 52.75vmin) calc(0vmin + 28vmin)/25vmin 10vmin no-repeat, radial-gradient(ellipse, #d8d8e1 1.75vmin, transparent 1vmin) calc(-15vmin + 61.25vmin) calc(0vmin + 26.5vmin)/3.5vmin 3.5vmin no-repeat, linear-gradient(-150deg, transparent 15vmin, #d8d8e1 15.25vmin, #d8d8e1 17vmin, #ccccd8 17.25vmin, #d8d8e1 19.25vmin, transparent 19.5vmin) calc(-15vmin + 54vmin) calc(0vmin + 38.5vmin)/20vmin 20vmin no-repeat, radial-gradient(ellipse, #d8d8e1 2.25vmin, transparent 1vmin) calc(-15vmin + 71vmin) calc(0vmin + 55.5vmin)/4.5vmin 4.5vmin no-repeat, linear-gradient(-15deg, transparent 5vmin, #d8d8e1 5.25vmin, #d8d8e1 8.25vmin, transparent 8.5vmin) calc(-15vmin + 67.5vmin) calc(0vmin + 50vmin)/5vmin 10vmin no-repeat, radial-gradient(ellipse, #d8d8e1 1.75vmin, transparent 1vmin) calc(-15vmin + 71vmin) calc(0vmin + 51.25vmin)/3.5vmin 3.5vmin no-repeat, linear-gradient(75deg, transparent 5vmin, #d8d8e1 5.25vmin, #d8d8e1 8.25vmin, transparent 8.5vmin) calc(-15vmin + 61.75vmin) calc(0vmin + 55vmin)/10vmin 5vmin no-repeat, radial-gradient(ellipse, #d8d8e1 1.75vmin, transparent 1vmin) calc(-15vmin + 67vmin) calc(0vmin + 58.5vmin)/3.5vmin 3.5vmin no-repeat, linear-gradient(-15deg, transparent 15vmin, #d8d8e1 15.25vmin, #d8d8e1 18.25vmin, transparent 18.5vmin) calc(-15vmin + 60vmin) calc(0vmin + 40.25vmin)/10vmin 25vmin no-repeat, radial-gradient(ellipse, #d8d8e1 1.75vmin, transparent 1vmin) calc(-15vmin + 68.5vmin) calc(0vmin + 46vmin)/3.5vmin 3.5vmin no-repeat, linear-gradient(75deg, transparent 15vmin, #d8d8e1 15.25vmin, #d8d8e1 18.25vmin, transparent 18.5vmin) calc(-15.........完整代码请登录后点击上方下载按钮下载查看