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(#filter4_i)">
<path d="M137.124 149.923C137.768 151.665 140.232 151.665 140.876 149.923L144.933 138.943C145.416 137.637 144.449 136.25 143.057 136.25H134.943C133.551 136.25 132.584 137.637 133.067 138.943L137.124 149.923Z" />
</g>
<g id="Polygon 7" filter="url(#filter5_i)">
<path d="M159.124 149.923C159.768 151.665 162.232 151.665 162.876 149.923L166.933 138.943C167.416 137.637 166.449 136.25 165.057 136.25H156.943C155.551 136.25 154.584 137.637 155.067 138.943L159.124 149.923Z" />
</g>
</g>
<g id="mouth">
<g id="Vector 63" filter="url(#filter6_ddi)">
<path d="M74.4291 177.596C67.7297 196.422 36.4662 172.367 32 167.661L53.7728 193.807V206.881L69.4046 213.679C68.6602 207.578 67.6181 195.899 69.4046 197.991C71.1911 200.083 85.7807 203.394 92.8522 204.789V216.294H112.392L111.275 204.789C118.868 208.972 124.488 206.532 126.349 204.789L124.116 221H156.496L154.263 204.789C161.409 208.972 172.128 206.532 176.594 204.789V216.294H197.808L196.692 204.789H220.698L218.465 213.679H238.563L236.888 204.789C246.378 206.358 268.16 164.821 260.335 174.459C257.788 177.596 242.471 193.284 227.397 185.44L230.747 175.505L208.416 174.459C208.416 178.642 211.207 176.028 211.207 185.44C211.207 192.842 191.667 187.532 185.526 185.44L187.759 174.459H162.079C160.962 176.55 164.312 185.44 164.312 185.44C164.312 185.44 141.981 187.532 134.165 185.44L136.398 164H110.159L111.275 185.44C97.4301 190.461 93.2244 187.532 92.8522 185.44L94.5271 164H74.4291V177.596Z" />
</g>
</g>
</g>
</g>
<defs>
<filter id="filter0_ddi" x="0" y="-2" width="290.511" height="273.301" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dx="4" dy="2"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect3_innerShadow"/>
</filter>
<filter id="filter1_i" x="110" y="-2" width="75.3757" height="79.1094" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-6"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
</filter>
<filter id="filter2_i" x="68" y="91" width="55" height="63" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="5"/>
<feGaussianBlur stdDeviation="2.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.99 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
</filter>
<filter id="filter3_i" x="175" y="91" width="51" height="63" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="5"/>
<feGaussianBlur stdDeviation="2.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.99 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
</filter>
<filter id="filter4_i" x=.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0