svg+css+particles实现冬季树林夜晚下雪动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg+css+particles实现冬季树林夜晚下雪动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
:root {
  --font-color: rgb(42 58 123);
  --main-background: rgb(206 220 255);
  --layer-1-background: rgb(64 110 226);
  --layer-2-background: rgb(40, 71, 149);
  --layer-3-background: rgb(28, 55, 122);
  --layer-4-background: rgb(22, 38, 80);
  --stag-fill: rgb(255,255,255);
  --moon-fill: rgb(255,255,255);
  /* LAYER 1 */
  --layer-1-width: 700px;
  --layer-1-height: 500px;
  /* LAYER 2 */
  --layer-2-width: 600px;
  --layer-2-height: 450px;
  /* LAYER 3 */
  --layer-3-width: 540px;
  --layer-3-height: 400px;
  /* LAYER 4 */
  --layer-4-width: 480px;
  --layer-4-height: 350px;
  /* TREE 1 */
  --tree-1-fill: rgb(42 58 123);
  --tree-2-fill: rgb(42 58 123);
  --tree-3-fill: rgb(255, 255, 255);
  --tree-4-fill: rgb(190 208 246);
  --tree-5-fill: rgb(255, 255, 255);

}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body, #container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--main-background);
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
}

.layer {
  border-radius: 50%;
  position: absolute;
  overflow: hidden;
}

#layer-1 {
  width: var(--layer-1-width);
  height: var(--layer-1-height);
  background-color: var(--layer-1-background);
  border-radius: 51% 49% 34% 66% / 39% 66% 34% 61%;
  box-shadow: 3px 1px 7px 3px rgb(0 0 0 / 40%) inset;
  -webkit-box-shadow: 3px 1px 7px 3px rgb(0 0 0 / 40%) inset;
  -moz-box-shadow: 3px 1px 7px 3px rgb(0 0 0 / 40%) inset;
}

#layer-2 {
  width: var(--layer-2-width);
  height: var(--layer-2-height);
  background-color: var(--layer-2-background);
  border-radius: 41% 44% 45% 64% / 54% 65% 37% 57%;
  box-shadow: 3px 1px 8px 5px rgb(0 0 0 / 40%) inset;
  -webkit-box-shadow: 3px 1px 8px 5px rgb(0 0 0 / 40%) inset;
  -moz-box-shadow: 3px 1px 8px 5px rgb(0 0 0 / 40%) inset;
}

#layer-3 {
  width: var(--layer-3-width);
  height: var(--layer-3-height);
  background-color: var(--layer-3-background);
  border-radius: 61% 41% 45% 64% / 51% 68% 40% 54%;
  box-shadow: 1px 1px 13px 2px rgb(0 0 0 / 45%) inset;
  -webkit-box-shadow: 1px 1px 13px 2px rgb(0 0 0 / 45%) inset;
  -moz-box-shadow: 1px 1px 13px 2px rgb(0 0 0 / 45%) inset;
  overflow: hidden;
}

#layer-4 {
  background-color: var(--layer-4-background);
  width: var(--layer-4-width);
  height: var(--layer-4-height);
  box-shadow: 1px 1px 30px 7px rgb(0 0 0 / 42%) inset;
  -webkit-box-shadow: 1px 1px 30px 7px rgb(0 0 0 / 42%) inset;
  -moz-box-shadow: 1px 1px 30px 7px rgb(0 0 0 / 42%) inset;
}

svg {
  width: 270px;
  position: absolute;
  filter: drop-shadow(0px 3px 1px rgb(0 0 0 / 0.3));
  z-index: 2;
}

#front-tree-1 {
  width: 200px;
  bottom: 0px;
  right: 0;
  fill: var(--tree-5-fill);
  z-index: 4;
}

#front-tree-2 {
  width: 183px;
  bottom: 0;
  left: 16px;
  fill: var(--tree-3-fill);
  z-index: 4;
}

#tree-1 {
  fill: var(--tree-1-fill);
  top: 30px;
}

#tree-2 {
  fill: var(--tree-2-fill);
  right: 0px;
  top: 60px;
}

#stag {
  width: 200px;
  right: 150px;
  z-index: 4;
  bottom: -152px;
  fill: var(--stag-fill);
}

#moon {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: var(--moon-fill);
  left: 87px;
  top: 49px;
}
</style>

</head>


  <body>
  <div id="container">
    <div id="layer-1" class="layer">
      <svg id="front-tree-1" viewBox="0 0 131.33362 251.64629" xmlns="http://www.w3.org/2000/svg">
        <g transform="translate(-1250.9 -447.79)">
          <path
            d="m1314.5178,692.41111c.2183-3.86228.0827-9.95561-.3012-13.54074-.6568-6.13291-.8262-6.47357-2.8642-5.75982-1.1913.41723-3.4035.72515-4.916.68426s-2.75.22435-2.75.58944-1.3342.57142-2.965.45852c-2.1454-.14854-3.1315.31935-3.5674,1.69269-.6968,2.19548-3.4676,2.58417-3.4676.48644 0-1.47179-1.6175-1.5836-3.7385-.25842-.8355.52197-1.0539.29246-.6711-.70516 .425-1.1074-.0175-1.3689-1.7614-1.04085-1.281.24097-1.7665.17064-1.079-.1563 1.7198-.81781 1.5858-2.49383-.1462-1.82919-.7708.29576-2.1148-.48998-3-1.75389l-1.6038-2.28968v2.2225c0,1.22238-.45,2.22251-1,2.22251s-1-.3876-1-.86133-1.125-.64627-2.5-.38342c-1.4593.27897-2.5.01312-2.5-.63867 0-.61412.8449-1.11658 1.8776-1.11658s2.4137-.64607 3.0691-1.43572 2.5052-1.72427 4.1109-2.07694c4.6952-1.03124 4.2233-2.1212-.9319-2.15206-2.622-.01569-5.9822-.33344-7.4671-.70611-1.5117-.37943-3.6596-.16381-4.8813.49003-1.6379.87655-2.2772.88103-2.5649.01797-.2108-.6323-.7871-.9-1.2808-.5949-1.3172.81407-8.0028-.61802-7.4045-1.58608 .2802-.45347 1.9638-.58896 3.7412-.30107 2.8549.46241 3.3585.18665 4.3191-2.36528 .9577-2.54409.8592-2.90591-.8256-3.03283-1.4816-.11161-1.6647.15508-.8119,1.18266 .8336,1.00439.6744,1.49053-.6553,2.00078-.966.3707-1.915.19825-2.1089-.38322s-.8832-1.05723-1.5319-1.05723-1.6238-1.0125-2.1667-2.25c-.619-1.41095-1.9194-2.29044-3.4871-2.35843-5.3463-.23188-5.5185-.3401-3.1645-1.98891 2.0007-1.4013 2.091-1.73879.736-2.75-.8495-.63396-1.8319-2.61516-2.183-4.40266-.7927-4.03486 1.1853-4.39698 4.536-.83041 3.3178,3.53163 7.3966,5.01409 9.9848,3.62897 2.1663-1.15941 2.8422-3.04856 1.0907-3.04856-.55,0-.8875-.5625-.75-1.25s-.3125-1.1375-1-1-1.25-.15787-1.25-.65638-.9192-.66601-2.0426-.37223-1.9278.13915-1.7875-.34362-.3114-1.89957-1.0037-3.14844c-1.636-2.95136-.8832-4.00419 3.4436-4.8159 2.28-.42774 3.1954-1.00826 2.5723-1.63137s-1.6939-.57853-3.009.1253c-2.5452,1.36215-4.1731,1.39829-4.1731.09264 0-.55.8734-1 1.941-1 3.3393,0 3.3437-1.97684.0075-3.37959l-3.1925-1.34236 2.872-.72264 2.872-.72264-2.75-2.36842c-1.5125-1.30263-2.75-2.60375-2.75-2.89138 0-.57139 5.595.25191 8,1.1772 .825.3174 1.8.61596 2.1667.66346s1.0041.42387 1.4166.83637c1.5523,1.5523 10.4167.38932 10.4167-1.36663 0-.48585-1.0125-.89114-2.25-.90065s-3.2871-1.11095-4.5546-2.44766c-1.4316-1.50974-2.9179-2.19505-3.9236-1.80912-1.2704.48748-1.4612.20701-.8862-1.30233 .5671-1.48843.4626-1.65536-.4621-.7379-1.4201,1.40914-3.2635-.03088-4.3264-3.37963-.4497-1.41688-1.2633-1.94462-2.4996-1.62132-1.3548.35428-1.9617-.19427-2.3266-2.10272-.4895-2.56062.5414-3.50381 1.7291-1.58204 .9471,1.53251 4.4907,1.18769 5.1384-.5 .3166-.825 1.2024-1.5 1.9686-1.5s1.393-.45 1.393-1-.675-1-1.5-1-1.5-.45-1.5-1-.7301-1-1.6224-1c-1.2439,0-1.3626-.31311-.5087-1.34201 1.422-1.71337.2322-2.98676-1.4704-1.57372-.9791.81251-1.2496.58852-1.1345-.9394 .0832-1.10347.6203-1.77912 1.1936-1.50143s.2549-.14061-.7076-.92953-1.75-1.72229-1.75-2.07415c0-1.35998 2.3142-.51966 6.5,2.36024 2.3982,1.65 4.6168,3 4.9302,3 1.5197,0 .2544-2.94289-2.4582-5.71748-2.1021-2.15005-2.6373-3.26626-1.75-3.65015 .7029-.30415.0405-.29708-1.472.01572-2.0959.43345-2.75.18615-2.75-1.03968 0-.97792.882-1.63936 2.25-1.68736 1.2375-.04342 1.6875-.30592 1-.58333s-1.25-1.21689-1.25-2.08772 .3016-1.28175.6702-.91316 1.7157-.01489 2.9936-.8522c1.3737-.9001 4.0192-1.41247 6.4721-1.2535 2.6764.17345 4.3088-.18582 4.6001-1.01239 .2483-.70469.0718-1.2139-.3923-1.13158s-1.5187.08949-2.3437.01594c-1.3333-.11888-1.3333-.24144 0-1.10311 1.2853-.83063 1.2522-.97157-.2309-.98469-1.807-.01598-3.4362-4.12692-2.339-5.90213 .3642-.58943 2.6919.28855 5.6653,2.13692 4.1927,2.60633 5.2017,2.89302 5.9605,1.69366 1.3237-2.09209 1.1497-3.54936-.2559-2.14376-.66.66-1.8401,1.2-2.6224,1.2-1.1391,0-1.1791-.2933-.2007-1.47212s.8796-1.8142-.5115-3.20536c-1.1158-1.11579-1.3293-1.86788-.5993-2.11121 .6236-.20789 1.1339-.8208 1.1339-1.36203 0-.54831-.9411-.68537-2.1252-.30953-1.4302.4539-1.9015.31241-1.441-.43262 .3885-.62867.0105-1.10713-.8748-1.10713-.8574,0-1.559-.42344-1.559-.94098 0-1.9835 2.0062-2.02588 5.1583-.10896 2.9413,1.78875 3.5077,1.84357 5.5077.53314 1.2261-.80336 2.8823-1.21004 3.6805-.90375s1.7483.07622 2.1114-.51128 .1836-1.06817-.3989-1.06817-1.0733-.7875-1.0908-1.75c-.0288-1.58346-.1715-1.56527-1.5.19113-1.7484,2.31164-1.9321,1.31189-.3227-1.75687 1.1404-2.17443 1.1358-2.1756-1.0211-.26014s-2.1688,1.91861-3.3625-1.24401c-.7191-1.90518-1.807-3.07086-2.7289-2.92412-.9467.15069-1.6617-.66625-1.8696-2.13613-.2959-2.09242-.0335-2.30408 2.1705-1.7509 3.5474.89033 6.0583-.19144 4.5797-1.97301-.6255-.75376-.8721-2.06162-.548-2.90635 .4768-1.2425.2242-1.34044-1.3224-.51274-3.1251,1.67254-4.1358,1.24037-3.4538-1.47686 .4009-1.59734.2059-2.5-.54-2.5-.6421,0-.8771-.46971-.5223-1.0438s.0466-1.8116-.6849-2.75 .6922.1.........完整代码请登录后点击上方下载按钮下载查看