单个div+css布局实现圣诞雪花球水晶球雪景球效果代码-html代码-BFW代码库

代码语言：html
代码描述：单个div+css布局实现圣诞雪花球水晶球雪景球效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

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

  
  
<style>
*, *:before, *:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  position: relative;
  display: flex;
  transform: scale(0.9);
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #2ca1d1 15%, #FFFFFF 100%);
}

div:before, div:after {
  display: block;
  content: "";
  position: absolute;
}

div.snowglobe {
  width: 90vmin;
  height: 90vmin;
  justify-self: center;
  align-self: center;
  overflow: hidden;
  border-radius: 50%;
  border: solid 10px #A9D9ED;
  background: radial-gradient(circle, #9ddddf, 2vmin, transparent 2vmin) 56.5vmin 61vmin/6vmin 6vmin no-repeat, radial-gradient(circle, #9ddddf, 2vmin, transparent 2vmin) 58.5vmin 60.5vmin/6vmin 6vmin no-repeat, radial-gradient(circle, #9ddddf, 2vmin, transparent 2vmin) 63.5vmin 61vmin/6vmin 6vmin no-repeat, radial-gradient(circle, #9ddddf, 2vmin, transparent 2vmin) 61.5vmin 60vmin/6vmin 6vmin no-repeat, radial-gradient(circle, #9ddddf, 2vmin, transparent 2vmin) 65.5vmin 63vmin/6vmin 6vmin no-repeat, radial-gradient(circle, #9ddddf, 2vmin, transparent 2vmin) 55.5vmin 63vmin/6vmin 6vmin no-repeat, linear-gradient(#9ddddf, 5vmin, transparent 5vmin) 58vmin 64vmin/10vmin 4vmin no-repeat, radial-gradient(circle, #4A877F 1vmin, #FFFFFF 1vmin, #FFFFFF 1.125vmin, transparent 1.125vmin) 44.75vmin 57vmin/2.25vmin 2.25vmin no-repeat, linear-gradient(90deg, #FFFFFF 0.25vmin, transparent 0.25vmin, transparent 1.375vmin, #FFFFFF 1.375vmin, #FFFFFF 1.5vmin, transparent 1.625vmin, transparent 2.75vmin, #FFFFFF 2.75vmin, #FFFFFF 3vmin, transparent 3vmin) 42vmin 61.5vmin/3vmin 4vmin no-repeat, linear-gradient(#FFFFFF 0.25vmin, #F4D31A 0.25vmin, #F4D31A 1.875vmin, #FFFFFF 1.875vmin, #FFFFFF 2vmin, #F4D31A 2.175vmin, #F4D31A 3.625vmin, #FFFFFF 3.625vmin, #FFFFFF 4vmin, transparent 4vmin) 42vmin 61.5vmin/2.75vmin 4vmin no-repeat, linear-gradient(90deg, #FFFFFF 0.25vmin, transparent 0.25vmin, transparent 1.375vmin, #FFFFFF 1.375vmin, #FFFFFF 1.5vmin, transparent 1.625vmin, transparent 2.75vmin, #FFFFFF 2.75vmin, #FFFFFF 3vmin, transparent 3vmin) 47vmin 61.5vmin/3vmin 4vmin no-repeat, linear-gradient(#FFFFFF 0.25vmin, #4A877F 0.25vmin, #4A877F 1.875vmin, #FFFFFF 1.875vmin, #FFFFFF 2vmin, #4A877F 2.175vmin, #4A877F 3.625vmin, #FFFFFF 3.625vmin, #FFFFFF 4vmin, transparent 4vmin) 47vmin 61.5vmin/2.75vmin 4vmin no-repeat, linear-gradient(90deg, #FFFFFF 0.25vmin, transparent 0.25vmin, transparent 1.375vmin, #FFFFFF 1.375vmin, #FFFFFF 1.5vmin, transparent 1.625vmin, transparent 2.75vmin, #FFFFFF 2.75vmin, #FFFFFF 3vmin, transparent 3vmin) 53.5vmin 61.5vmin/3vmin 4vmin no-repeat, linear-gradient(#FFFFFF 0.25vmin, #4A877F 0.25vmin, #4A877F 1.875vmin, #FFFFFF 1.875vmin, #FFFFFF 2vmin, #4A877F 2.175vmin, #4A877F 3.625vmin, #FFFFFF 3.625vmin, #FFFFFF 4vmin, transparent 4vmin) 53.5vmin 61.5vmin/2.75vmin 4vmin no-repeat, linear-gradient(90deg, #c31c23 0.75vmin, #e5474e 1.5vmin, transparent 1.5vmin) 53vmin 54vmin/3vmin 4vmin no-repeat, conic-gradient(from 130deg, #c31c23 100deg, transparent 0) 40vmin 43vmin/12vmin 25vmin no-repeat, conic-gradient(from 89deg, #e5474e 93deg, transparent 0) 46vmin 54vmin/12vmin 14vmin no-repeat, conic-gradient(from 130deg, #d3ecf6 140deg, transparent 0) 46vmin 48vmin/12vmin 14vmin no-repeat, conic-gradient(from 180deg, #d3ecf6 50deg, transparent 0) 40vmin 47.5vmin/12vmin 14vmin no-repeat, radial-gradient(ellipse, #9ddddf 4vmin, transparent 4vmin) 49vmin 38vmin/15vmin 18vmin no-repeat, linear-gradient(#645251 100%, transparent 100%) 56vmin 47vmin/0.75vmin 10vmin no-repeat, radial-gradient(ellipse at bottom, #4A877F 1vmin, #FFFFFF 1vmin, #FFFFFF 1.125vmin, transparent 1.125vmin) 64.5vmin 40vmin/3vmin 2vmin no-repeat, linear-gradient(#FFFFFF 0.5vmin, transparent 0.5vmin) 64.875vmin 42vmin/2.25vmin 2.25vmin no-repeat, linear-gradient(90deg, #FFFFFF 0.25vmin, transparent 0.25vmin, transparent 1.375vmin, #FFFFFF 1.375vmin, #FFFFFF 1.5vmin, transparent 1.625vmin, transparent 2.75vmin, #FFFFFF 2.75vmin, #FFFFFF 3vmin, transparent 3vmin) 67vmin 45vmin/3vmin 4vmin no-repeat, linear-gradient(#FFFFFF 0.25vmin, #31879e 0.25vmin, #31879e 1.875vmin, #FFFFFF 1.875vmin, #FFFFFF 2vmin, #31879e 2.175vmin, #31879e 3.625vmin, #FFFFFF 3.625vmin, #FFFFFF 4vmin, transparent 4vmin) 67vmin 45vmin/2.75vmin 4vmin no-repeat, linear-gradient(90deg, #FFFFFF 0.25vmin, transparent 0.25vmin, transparent 1.375vmin, #FFFFFF 1.375vmin, #FFFFFF 1.5vmin, transparent 1.625vmin, transparent 2.75vmin, #FFFFFF 2.75vmin, #FFFFFF 3vmin, transparent 3vmin) 62vmin 45vmin/3vmin 4vmin no-repeat, linear-gradient(#FFFFFF 0.25vmin, #F4D31A 0.25vmin, #F4D31A 1.875vmin, #FFFFFF 1.875vmin, #FFFFFF 2vmin, #F4D31A 2.175vmin, #F4D31A 3.625vmin, #FFFFFF 3.625vmin, #FFFFFF 4vmin, transparent 4vmin) 62vmin 45vmin/2.75vmin 4vmin no-repeat, linear-gradient(90deg, #FFFFFF 0.25vmin, transparent 0.25vmin, transparent 1.375vmin, #FFFFFF 1.375vmin, #FFFFFF 1.5vmin, transparent 1.625vmin, transparent 2.75vmin, #FFFFFF 2.75vmin, #FFFFFF 3vmin, transparent 3vmin) 62vmin 52vmin/3vmin 4vmin no-repeat, linear-gradient(#FFFFFF 0.25vmin, #31879e 0.25vmin, #31879e 1.875vmin, #FFFFFF 1.875vmin, #FFFFFF 2vmin, #31879e 2.175vmin, #31879e 3.625vmin, #FFFFFF 3.625vmin, #FFFFFF 4vmin, transparent 4vmin) 62vmin 52vmin/2.75vmin 4vmin no-repeat, linear-gradient(90deg, #FFFFFF 0.25vmin, transparent 0.25vmin, transparent 1.375vmin, #FFFFFF 1.375vmin, #FFFFFF 1.5vmin, transparent 1.625vmin, transparent 2.75vmin, #FFFFFF 2.75vmin, #FFFFFF 3vmin, transparent 3vmin) 73.5vmin 45vmin/3vmin 4vmin no-repeat, linear-gradient(#FFFFFF 0.25vmin, #F4D31A 0.25vmin, #F4D31A 1.875vmin, #FFFFFF 1.875vmin, #FFFFFF 2vmin, #F4D31A 2.175vmin, #F4D31A 3.625vmin, #FFFFFF 3.625vmin, #FFFFFF 4vmin, transparent 4vmin) 73.5vmin 45vmin/2.75vmin 4vmin no-repeat, linear-gradient(90deg, #FFFFFF 0.25vmin, transparent 0.25vmin, transparent 1.375vmin, #FFFFFF 1.375vmin, #FFFFFF 1.5vmin, transparent 1.625vmin, transparent 2.75vmin, #FFFFFF 2.75vmin, #FFFFFF 3vmin, transparent 3vmin) 73.5vmin 52vmin/3vmin 4vmin no-repeat, linear-gradient(#FFFFFF 0.25vmin, #F4D31A 0.25vmin, #F4D31A 1.875vmin, #FFFFFF 1.875vmin, #FFFFFF 2vmin, #F4D31A 2.175vmin, #F4D31A 3.625vmin, #FFFFFF 3.625vmin, #FFFFFF 4vmin, transparent 4vmin) 73.5vmin 52vmin/2.75vmin 4vmin no-repeat, radial-gradient(ellipse at bottom, #31879e 0.25vmin, transparent 0.25vmin) 67.25vmin 55vmin/0.5vmin 0.5vmin no-repeat, linear-gradient(90deg, #FFFFFF 0.25vmin, transparent 0.25vmin, transparent 1.375vmin, #FFFFFF 1.375vmin, #FFFFFF 1.5vmin, transparent 1.5vmin, transparent 2.625vmin, #FFFFFF 2.625vmin, #FFFFFF 3vmin, transparent 3vmin) 67vmin 52vmin/3vmin 4vmin no-repeat, linear-gradient(#FFFFFF 0.5vmin, #31879e 0.5vmin, #31879e 1.5vmin, #FFFFFF 1.5vmin, #FFFFFF 1.625vmin, #31879e 1.625vmin, #31879e 2.625vmin, #FFFFFF 2.625vmin, #FFFFFF 5.5vmin, #256677 5.5vmin, #256677 6vmin, transparent 6vmin) 67vmin 52vmin/3vmin 6vmin no-repeat, linear-gradient(90deg, #177172 0.75vmin, #24b0b2 1.5vmin, transparent 1.5vmin) 73vmin 38vmin/3vmin 4vmin no-repeat, conic-gradient(from 130deg, #177172 100deg, transparent 0) 60vmin 18vmin/12vmin 40vmin no-repeat, conic-gradient(from 89deg, #24b0b2 93deg, transparent 0) 66vmin 29vmin/12vmin 29vmin no-repeat, conic-gradient(from 130deg, #d3ecf6 140deg, transparent 0) 66vmin 30vmin/12vmin 14vmin no-repeat, conic-gradient(from 180deg, #d3ecf6 50deg, transparent 0) 60vmin 29.75vmin/12.25vmin 14vmin no-repeat, radial-gradient(ellipse at bottom, #4A877F 1vmin, #FFFFFF 1vmin, #FFFFFF 1.125vmin, transparent 1.125vmin) 19.75vmin 47.5vmin/3vmin 2vmin no-repeat, linear-gradient(#FFFFFF 0.5vmin, transparent 0.5vmin) 20vmin 49.625vmin/2.25vmin 2.25vmin no-repeat, linear-gradient(90deg, #FFFFFF 0.25vmin, transparent 0.25vmin, transparent 1.375vmin, #FFFFFF 1.375vmin, #FFFFFF 1.5vmin, transparent 1.625vmin, transparent 2.75vmin, #FFFFFF 2.75vmin, #FFFFFF 3vmin, transparent 3vmin) 17vmin 52vmin/3vmin 4vmin no-repeat, linear-gradient(#FFFFFF 0.25vmin, #31879e 0.25vmin, #31879e 1.875vmin, #FFFFFF 1.875vmin, #FFFFFF 2vmin, #31879e 2.175vmin, #31879e 3.625vmin, #FFFFFF 3.625vmin, #FFFFFF 4vmin, transparent 4vmin) 17vmin 52vmin/2.75vmin 4vmin no-repeat, linear-gradient(90deg, #FFFFFF 0.25vmin, transparent 0.25vmin, transparent 1.375vmin, #FFFFFF 1.375vmin, #FFFFFF 1.5vmin, transparent 1.625vmin, transparent 2.75vmin, #FFFFFF 2.75vmin, #FFFFFF 3vmin, transparent 3vmin) 11.125vmin 52vmin/3vmin 4vmin no-repeat, linear-gradient(#FFFFFF 0.25vmin, #F4D31A 0.25vmin, #F4D31A 1.875vmin, #FFFFFF 1.875vmin, #FFFFFF 2vmin, #F4D31A 2.175vmin, #F4D31A 3.625vmin, #FFFFFF 3.625vmin, #FFFFFF 4vmin, transparent 4vmin) 11.25vmin 52vmin/2.75vmin 4vmin no-repeat, radial-gradient(ellipse at bottom, #31879e 0.25vmin, transparent 0.25vmin) 22.25vmin 55vmin/0.5vmin 0.5vmin no-repeat, linear-gradient(#FFFFFF 0.5vmin, transparent 0.5vmin) 20vmin 49.625vmin/2.25vmin 2.25vmin no-repeat, linear-gradient(90deg, #FFFFFF 0.25vmin, transparent 0.25vmin, transparent 1.375vmin, #FFFFFF 1.375vmin, #FFFFFF 1.5vmin, transparent 1.5vmin, transparent 2.625vmin, #FFFFFF 2.625vmin, #FFFFFF 3vmin, transparent 3vmin) 22vmin 52vmin/3vmin 4vmin no-repeat, linear-gradient(#FFFFFF 0.5vmin, #31879e 0.5vmin, #31879e 1.5vmin, #FFFFFF 1.5vmin, #FFFFFF 1.625vmin, #31879e 1.625vmin, #31879e 2.625vmin, #FFFFFF 2.625vmin, #FFFFFF 5.5vmin, #256677 5.5vmin, #256677 6vmin, transparent 6vmin) 22vmin 52vmin/3vmin 6vmin no-repeat, conic-gradient(from 120deg, #256677, 120deg, transparent 0) 20.9vmin 48.5vmin/5vmin 4vmin no-repeat, linear-gradient(90deg, #31879e 0.75vmin, #52b0c9 1.5vmin, transparent 1.5vmin) 14vmin 45vmin/3vmin 4vmin no-repeat, conic-gradient(from 130deg, #52b0c9 100deg, transparent 0) 15vmin 33vmin/12vmin 25vmin no-repeat, conic-gradient(from 180deg, #31879e 91deg, transparent 0) 10vmin 44vmin/12vmin 14vmin no-repeat, conic-gradient(from 130deg, #e8f5fa 140deg, transparent 0) 16vmin 38.5vmin/12vmin 14vmin no-repeat, conic-gradient(from 180deg, #e8f5fa 50deg, transparent 0) 10vmin 38.5vmin/12vmin 14vmin no-repeat, conic-gradient(from -65deg, #177172 30deg, transparent 0) 25vmin 33vmin/8vmin 20vmin no-repeat, conic-gradient(from 65deg, transparent 330deg, #177172 0) 17vmin 33vmin/8vmin 20vmin no-repeat, conic-gradient(from -65deg, #177172 30deg, transparent 0) 25vmin 36.5vmin/10vmin 20vmin no-repeat, conic-gradient(from 65deg, transparent 330deg, #177172 0) 15.25vmin 36.5vmin/10vmin 20vmin no-repeat, conic-gradient(from -65deg, #177172 30deg, transparent 0) 25vmin 41vmin/13vmin 20vmin no-repeat, conic-gradient(from 65deg, transparent 330deg, #177172 0) 12.25vmin 41vmin/13vmin 20vmin no-repeat, conic-gradient(from 145deg, #177172 70deg, transparent 0) 15vmin 35vmin/20vmin 20vmin no-repeat, radial-gradient(ellipse, #D7F1F2 4vmin, transparent 4vmin) 24vmin 33vmin/15vmin 18vmin no-repeat, linear-gradient(#645251 100%, transparent 100%) 31vmin 43vmin/0.75vmin 10vmin no-repeat, linear-gradient(90deg, #FFFFFF 0.25vmin, transparent 0.25vmin, transparent 1.375vmin, #FFFFFF 1.375vmin, #FFFFFF 1.5vmin, transparent 1.5vmin, transparent 2.625vmin, #FFFFFF 2.625vmin, #FFFFFF 2.75vmin, transparent 2.75vmin, transparent 3.825vmin, #FFFFFF 3.825vmin) 34vmin 39vmin/4vmin 4vmin no-repeat, linear-gradient(#FFFFFF 0.25vmin, #F4D31A 0.25vmin, #F4D31A 1.875vmin, #FFFFFF 1.875vmin, #FFFFFF 2vmin, #F4D31A 2.175vmin, #F4D31A 3.625vmin, #FFFFFF 3.625vmin, #FFFFFF 4vmin, transparent 4vmin) 34vmin 39vmin/4vmin 4vmin no-repeat, linear-gradient(90deg, #FFFFFF 0.25vmin, transparent 0.25vmin, transparent 1.375vmin, #FFFFFF 1.375vmin) 42.5vmin 39vmin/1.5vmin 4vmin no-repeat, linear-gradient(#FFFFFF 0.25vmin, #31879e 0.25vmin, #31879e 1.875vmin, #FFFFFF 1.875vmin, #FFFFFF 2vmin, #31879e 2.175vmin, #31879e 3.625vmin, #FFFFFF 3.625vmin, #FFFFFF 4vmin, transparent 4vmin) 42.5vmin 39vmin/1.5vmin 4vmin no-repeat, radial-gradient(ellipse at bottom, #31879e 0.25vmin, transparent 0.25vmin) 39vmin 42vmin/0.5vmin 0.5vmin no-repeat, linear-gradient(90deg, #FFFFFF 0.25vmin, transparent 0.25vmin, transparent 1.375vmin, #FFFFFF 1.375vmin, #FFFFFF 1.5vmin, transparent 1.5vmin, transparent 2.625vmin, #FFFFFF 2.625vmin, #FFFFFF 3vmin, transparent 3vmin) 38.75vmin 39vmin/3vmin 4vmin no-repeat, linear-gradient(#FFFFFF 0.5vmin, #31879e 0.5vmin, #31879e 1.5vmin, #FFFFFF 1.5vmin, #FFFFFF 1.625vmin, #3.........完整代码请登录后点击上方下载按钮下载查看