svg+particles实现雪地白鹿下雪动画景色动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg+particles实现雪地白鹿下雪动画景色动画效果代码，svg实现布局构图，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;
}

/*  Particles JS */
#particles-js {
  height: 100%;
}
</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.10773 3.1639,2.32475 5.9507,4.63175 7.7312,5.36606 2.9914,1.73288 2.691,2.21905-.1823.91431.2627.95143 2.2715.25833 4.059.49158c1.9518.25469 3.25-.01474 3.25-.67448 0-.60421.583-.87486 1.2955-.60145 .7769.29812 1.0457.7183 1.1379-.5046 .1156-1.53585.2848-.19933-.5806-.68263-1.7446-.97433-4.8528.27271-4.8528-1.09591 0-.55-.7999-1-1.7775-1s-2.7185-.65911-3.8686-1.46469-2.3753-1.18059-2.7225-.83334-.6314-.11864-.6314-1.0353v-2.41667c0-1.68282 6.7792-.71616 10.75,1.53287l4.25.74718v-1.02865c0-1.84764-.6256-2.85224-2-3.21165-2.0478-.53552-2.8074-2.28975-.9915-2.28975 .628,0 .5761-.69231-.1376-1.83504-1.207-1.93284-5.9885-1.86326-5.5844.08126 .1174.56487-1.024,1.37663-2.5365,1.80392-1.7303.48881-2.75.39274-2.75-.25907s-.5246-.6006-1.411.13504c-.9601.79684-1.6172.83733-2.0564.1267-.3549-.57437.3925-1.46533 1.661-1.97992 8.9642-3.63645 10.7905-4.58915 11.2894-5.88918 .438-1.14136.2601-1.21539-.8021-.33383-.7507.62302-1.6575.84018-2.0151.48257s-2.99-.56739-5.8498-.46617c-5.0608.17912-6.3099-.49823-2.1028-1.14028 3.299-.50347 5.327-2.72011 4.8574-5.30946-.3747-2.06677-.2056-2.20553 1.4377-1.17931 1.0243.63969 1.7103,1.4105 1.5245,1.71292s1.221.66426 3.1263.8041 3.2345-.11743 2.9537-.5717 .0991-2.00077.844-3.43665c1.1539-2.22404 1.1463-2.53081-.0512-2.07131-.9334.35818-1.4056-.16844-1.4056-1.5676 0-1.15885-.6225-2.10699-1.3834-2.10699s-1.6002-.82943-1.8653-1.84318c-.4528-1.7315-.2528-1.71763 3.3009.22893 2.0806,1.13965 3.6388,2.30658 3.4628,2.59317s1.2456.63603 3.1593.77652c3.1682.2326 3.3384.11441 1.9026-1.32142-.8673-.86728-1.5769-1.88488-1.5769-2.26134s-1.3525-1.28315-3.0057-2.01489c-1.6771-.74236-2.7146-1.80136-2.3472-2.39582 .3622-.58596.0272-1.55961-.7443-2.16367s-1.916-2.53385-2.5433-4.28841c-1.0749-3.00647-1.0311-3.12172.7618-2.00206 1.0463.65343 1.73,1.63898 1.5193,2.19011s.9089,1.09644 2.4881,1.2118c1.9195.14022 2.8713-.26374 2.8713-1.21861 0-.93865.5883-1.20263 1.7158-.76996 1.3882.53271 1.3192.23273-.3616-1.57133-2.5088-2.69292-2.5803-6.70992-.1159-6.51604 .9354.0736 1.9718-.72044 2.3032-1.76452s.989-1.65945 1.4614-1.36749 1.1215.10589 1.4425-.41348-.3229-1.23204-1.4309-1.5837-2.0145-1.37406-2.0145-2.272c0-1.26981.2667-1.36594 1.2-.43261 1.6332,1.63321 2.8,1.50819 2.8-.3 0-.825.4915-1.5 1.0923-1.5s2.2775-.93229 3.7261-2.07176 2.7852-1.61759 2.9702-1.0625c.466,1.39811-3.6439,5.34171-4.8136,4.6188-.5261-.32513-.6856.10599-.3566.96352 .3276.85357.0974,1.55194-.5114,1.55194s-1.107.90915-1.107,2.02032c0,2.00883.0242,2.00816 4.25-.11651 2.3375-1.17526 4.9928-2.78872 5.9007-3.58547 1.1831-1.03825 1.849-1.12782 2.3506-.31618 .4116.66587-.1519,1.35521-1.3676,1.67312-1.1371.29736-2.3398,1.39861-2.6726,2.44721s-.9755,1.6776-1.4283,1.39777c-.9428-.58265-2.1536,1.89133-2.6072,5.32721-.1705,1.29111-1.1228,2.94182-2.1162,3.66824-2.6724,1.95408-1.1573,2.63684 2.1006.94662 1.5502-.80428 3.4076-1.46233 4.1276-1.46233s2.6935-1.165 4.3857-2.58889c2.9005-2.44063 3.0767-2.47312 3.0767-.56739 0,1.13633-.8669,2.29664-1.9797,2.64983-1.0888.34558-1.8763,1.14295-1.75,1.77194s-.4391,1.16405-1.2566,1.18905c-1.5148.04633-2.8386,3.55053-1.337,3.5393 .4528-.00339 2.1278-.68644 3.7221-1.51789s3.1318-1.27867 3.4166-.99384-.1196.52478-.8987.5332c-1.0312.01115-1.0909.22242-.2195.7764 1.9078,1.21283-.166,3.45829-3.194,3.45829-2.5358,0-2.6864.23354-2.1766,3.375 .4853,2.99079.293,3.375-1.6895,3.375-1.2304,0-2.7168-.47974-3.3032-1.06609-.7548-.75478-1.2328-.42839-1.6372,1.11777-.5381,2.05768-.3291,2.14601 3.6161,1.52902 2.303-.36016 5.8551-1.47202 7.8937-2.4708 3.2035-1.56952 3.579-1.59842 2.7669-.21293-1.5641,2.66834-4.7404,6.10303-5.6439,6.10303-1.6894,0-6.4886,5.24093-5.6067,6.12278 1.3846,1.38462 9.4968-1.81707 13.2199-5.2176 2.3541-2.15018 3.6366-2.72587 4.3913-1.97119s.6983,1.06601-.193,1.06601c-.6925,0-.9667.47307-.6093,1.05127s-.4806,2.09875-1.862,3.37902c-1.9261,1.78508-2.2387,2.60574-1.3407,3.52016 .6441.65582.721,1.07111.171.92285-2.2392-.60359-5.5,1.34558-5.5,3.28771 0,1.18523-.8301,2.24331-2,2.54924-1.1.28766-2,.9064-2,1.375s-.7488.56463-1.664.21343c-1.1447-.43924-1.4305-.26067-.9159.57206 1.3179,2.13241 5.2915.03926 12.094-6.37074 1.1674-1.1 2.9635-2.675 3.9914-3.5 1.6948-1.36022 1.8078-1.33693 1.2131.25-.3607.9625-.2244,1.75.303,1.75s.2004.88578-.7266,1.9684c-2.4795,2.89591-2.8181,7.02385-.5792,7.06201 1.5938.02716 1.5707.15413-.2158,1.1896-1.1.63755-2.1038.96137-2.2307.71959s-.94.5729-1.8067,1.8104c-.9032,1.2894-2.6191,2.25-4.0193,2.25-3.1533,0-3.1277,1.36716.0527,2.81624 1.6764.76379 3.3184.82463 5,.18527 1.5274-.5807 2.504-.58936 2.504-.02221 0,.51138 1.1045-.17475 2.4545-1.52475s3.0976-2.45455 3.8834-2.45455 1.6642-.9 1.9518-2c.6654-2.54432 1.8893-2.54432 3.4782,0 1.0709,1.71466.9982,2.00218-.5094,2.01531-1.4738.01284-1.5202.16601-.2865.94621 1.2543.79323 1.2088,1.03187-.3075,1.61373-.9787.37556-1.5477,1.28674-1.2645,2.02485s-.1443,2.00135-.9502,2.8072c-.9678.96786-1.1066,1.68676-.4089,2.11797 1.3407.82862-.6875,3.47473-2.6633,3.47473-.7577,0-1.3776.47757-1.3776,1.06127 0,.69617 1.6341.82411 4.75.37187 2.6125-.37917 4.3995-.31872 3.9711.13434-.7625.8063-1.6519,1.05583-6.7211,1.88553-1.375.22505-2.725.49001-3,.58878-.275.09878-1.625.15873-3,.13324-1.9312-.03581-2.0611.07731-.5707.49716 3.1943.8999 4.4831,2.68607 2.9628,4.10626-.7192.67185-2.0568,1.22155-2.9723,1.22155-1.2792,0-1.4068.31074-.5509,1.34201 .6126.7381.8282,1.62751.4793,1.97646s.1024.9172 1.0029,1.26278 1.3884,1.03117 1.0841,1.52353c-1.5523,2.51172 12.5111-1.35628 14.5648-4.0059 .8713-1.12408 6.1579-4.27432 6.5369-3.89529 .1999.19986-.2016,1.47332-.8922,2.8299-.816,1.60278-1.9366,2.3518-3.2002,2.13894-1.8903-.31843-1.8887-.28444.0555,1.2182 1.6759,1.29523 1.7337,1.55092.357,1.57757-1.769.03424-3.2206,2.63448-2.3012,4.12204 .3092.50037-.3558.90976-1.4777.90976-1.3495,0-2.2553.85803-2.6762,2.53491-.3499,1..........完整代码请登录后点击上方下载按钮下载查看