svg+css实现万圣节南瓜loading加载动画效果代码-html代码-BFW代码库

svg+css实现万圣节南瓜loading加载动画效果代码

代码语言：html

代码描述：svg+css实现万圣节南瓜loading加载动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  background: #271D19;
    animation: darken-background 4s ease-in-out infinite alternate;
}
.container {
  position: absolute;
  top: 30%;
  left: 40%;
}
#face {
  fill: #271D19;
  animation: light 4s ease-in-out infinite alternate;
}
#pumpkin-body{
    animation: darken 4s ease-in-out infinite alternate;
}

@keyframes light {
  from{
    fill: #271D19;
  }
  to{
    fill: #FDB832;
  }
}
@keyframes darken {
  to{
   opacity: 0.3;
  }
}
@keyframes darken-background {
  to{
   background: #0E0701;
  }
}

@media screen and (max-width: 600px) {
  .container {
    top: 15%;
    left: 10%;
}
</style>



</head>

<body translate="no" >
  <div class="container">
  <svg width="291" height="272" viewBox="0 0 291 272" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g id="pumpkin">
  <g id="pumpkin-body" filter="url(#filter0_ddi)">
  <ellipse id="Ellipse 12" cx="116.5" cy="134.5" rx="55.5" ry="86.5" fill="url(#paint0_radial)"/>
  <ellipse id="Ellipse 13" cx="172.5" cy="138.5" rx="55.5" ry="86.5" fill="url(#paint1_radial)"/>
  <g id="Vector 62" filter="url(#filter1_i)">
  <path d="M170.5 77.1094C138.9 63.9094 166.667 26.9428 184.5 10.1094C186.167 8.60942 186.6 4.90942 175 2.10942C163.4 -0.690578 126.833 50.9428 110 77.1094H170.5Z" fill="url(#paint2_linear)"/>
  </g>
  <ellipse id="Ellipse 8" cx="211.256" cy="156.339" rx="71.2557" ry="96.3391" fill="url(#paint3_radial)"/>
  <ellipse id="Ellipse 9" cx="185.256" cy="164.339" rx="71.2557" ry="96.3391" fill="url(#paint4_radial)"/>
  <ellipse id="Ellipse 11" cx="75.2557" cy="148.339" rx="71.2557" ry="96.3391" fill="url(#paint5_radial)"/>
  <ellipse id="Ellipse 10" cx="94.2557" cy="156.339" rx="71.2557" ry="96.3391" fill="url(#paint6_radial)"/>
  <ellipse id="Ellipse 5" cx="141.114" cy="166.962" rx="71.2557" ry="96.3391" fill="url(#paint7_radial)"/>
  </g>
  <g id="face">
  <g id="eyes">
  <g id="Vector 60" filter="url(#filter2_i)">
  <path d="M85.66 143.786C50.6055 95.1616 76.6003 88.1166 88.2005 91.8505C92.2648 106.107 116.48 119.938 123 115.27C123 142.004 95.7551 157.789 85.66 143.786Z" />
  </g>
  <g id="Vector 61" filter="url(#filter3_i)">
  <path d="M209.624 143.786C242.129 95.1616 218.025 88.1166 207.269 91.8505C203.5 106.107 181.046 119.938 175 115.27C175 142.004 200.263 157.789 209.624 143.786Z" />
  </g>
  </g>
  <g id="nostrils">
  <g id="Polygon 6" filter="url(#filter.........完整代码请登录后点击上方下载按钮下载查看