svg+css实现月色当空夜景加火苗燃烧动画代码
代码语言：html
所属分类：动画
代码描述：svg+css实现月色当空夜景加火苗燃烧动画代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #f5f5f5;
min-height: 100vh;
height: 100vh;
max-height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#Vector_114 {
animation: spark_fly_up 3.5s 0.4s infinite linear;
}
#Vector_123 {
animation: spark_fly_up 3.1s 0.6s infinite linear;
}
#Vector_124 {
animation: spark_fly_up 3s 0.4s infinite linear;
}
#Vector_122 {
animation: spark_fly_up 3s 0.5s infinite linear;
}
#Vector_116 {
animation: spark_fly_up_2 2.8s 0.8s infinite linear;
}
#Vector_113 {
animation: spark_fly_up_2 2.2s 0.6s infinite linear;
}
#Vector_119 {
animation: spark_fly_up_2 2.2s 0.7s infinite linear;
}
#Vector_117 {
animation: spark_fly_up_2 2s 0.4s infinite linear;
}
#Vector_115 {
animation: spark_fly_up_2 3.2s 0.7s infinite linear;
}
#Vector_118 {
animation: spark_fly_up_3 2.7s 0.6s infinite linear;
}
#Vector_120 {
animation: spark_fly_up_3 3s 0.4s infinite linear;
}
#Vector_121 {
animation: spark_fly_up_3 2.8s 0.8s infinite linear;
}
@keyframes spark_fly_up {
0% {
transform: translate(0, 10vw);
opacity: 1;
}
30% {
transform: translate(10px, 7vw);
}
60% {
transform: translate(0px, 3vw);
opacity: 0.8;
}
100% {
transform: translate(10px, -2vw);
opacity: 0;
}
}
@keyframes spark_fly_up_2 {
0% {
transform: translate(0, 5vw);
opacity: 1;
}
30% {
transform: translate(10px, 3vw);
}
60% {
transform: translate(0px, 1vw);
opacity: 0.8;
}
100% {
transform: translate(10px, -2vw);
opacity: 0;
}
}
@keyframes spark_fly_up_3 {
0% {
transform: translate(0, 0);
opacity: 0;
}
30% {
transform: translate(0, -2vw);
opacity: 0.4;
}
60% {
transform: translate(0px, -3vw);
opacity: 0.9;
}
100% {
transform: translate(0px, -4vw);
opacity: 0;
}
}
#Vector_91 {
animation: fire_halo 3s infinite alternate ease-in-out;
transform-origin: center bottom;
transform-box: fill-box;
}
@keyframes fire_halo {
0% {
transform: scale(1.02);
}
20% {
transform: scale(0.95);
}
40% {
transform: scale(0.92);
}
60% {
transform: scale(0.94);
}
80% {
transform: scale(1.03);
}
100% {
transform: scale(1);
}
}
#Vector_126 {
animation: flicker 1s 0.4s infinite alternate linear;
transform-origin: bottom;
transform-box: fill-box;
}
#Vector_125 {
animation: flicker 2s 0.5s infinite alternate linear;
transform-origin: bottom;
transform-box: fill-box;
}
@keyframes flicker {
0% {
transform: rotate(-1deg);
}
20% {
transform: rotate(1deg);
}
40% {
transform: rotate(-1deg);
}
60% {
transform: rotate(1deg) scaleY(1.02);
}
80% {
transform: rotate(-1deg) scaleY(0.95);
}
100% {
transform: rotate(1deg);
}
}
#Vector_16,
#Vector_19,
#Vector_60 {
animation: translate 100s infinite -40s linear;
}
#Vector_15,
#Vector_17,
#Vector_18,
#Vector_61,
#Vector_62 {
animation: translate 130s infinite -20s linear;
}
@keyframes translate {
from {
transform: translateX(-80%);
}
to {
transform: translateX(100%);
}
}
#meteor1 {
animation: meteorTraslate 2.2s linear 5s;
}
#meteor2 {
animation: meteorTraslate 1.8s linear 11s;
}
@keyframes meteorTraslate {
from {
transform: translate(0%, 0);
}
to {
transform: translate(-70%, 20%);
opacity: 0;
}
}
</style>
</head>
<body>
<svg width="650" height="650" viewBox="0 0 650 650" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Mask group">
<mask
id="mask0_11_2760"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="650"
height="650"
>
<rect id="mask" width="650" height="650" rx="325" fill="#3A4A6D" />
</mask>
<g mask="url(#mask0_11_2760)">
<g id="background">
<rect id="background_2" width="650" height="650" fill="#3A4A6D" />
</g>
<g id="Shadow">
<path
id="Vector"
d="M251.964 587.023C317.784 587.023 371.141 582.005 371.141 575.813C371.141 569.622 317.784 564.603 251.964 564.603C186.145 564.603 132.787 569.622 132.787 575.813C132.787 582.005 186.145 587.023 251.964 587.023Z"
fill="#415173"
/>
<path
id="Vector_2"
d="M415.489 574.231C471.158 574.231 516.286 569.574 516.286 563.83C516.286 558.086 471.158 553.429 415.489 553.429C359.821 553.429 314.693 558.086 314.693 563.83C314.693 569.574 359.821 574.231 415.489 574.231Z"
fill="#45567A"
/>
</g>
<g id="Meteor">
<path
id="meteor1"
d="M643 131.277L731.846 111.338"
stroke="url(#paint0_linear_11_2760)"
stroke-width="0.6"
stroke-linecap="round"
/>
<path
id="meteor2"
d="M546.21 56.5839L635.056 36.644"
stroke="url(#paint1_linear_11_2760)"
stroke-width="0.6"
stroke-linecap="round"
/>
</g>
<g id="background-complete">
<path
id="Vector_3"
d="M2.28723 296.737C2.28723 296.737 106.665 236.737 171.389 236.737C249.123 236.737 324.703 263.477 353.294 272.303C428.557 295.494 574.288 296.737 574.288 296.737H2.28723Z"
fill="#21293D"
/>
<path
id="Vector_4"
d="M650 297.143C650 297.143 580.79 256.286 502.612 256.286C448.031 256.286 369.708 264.742 295.95 278.614C267.853 283.885 121.643 297.143 121.643 297.143H650Z"
fill="#252E45"
/>
<path
id="Vector_5"
d="M329.231 240.963L330.433 243.394L333.126 243.781L331.179 245.673L331.635 248.353L329.231 247.082L326.842 248.353L327.298 245.673L325.35 243.781L328.03 243.394L329.231 240.963Z"
fill="white"
/>
<path
id="Vector_6"
d="M498.266 80.1215L499.468 82.5524L502.147 82.9391L500.2 84.8314L500.67 87.5109L498.266 86.2402L495.863 87.5109L496.319 84.8314L494.385 82.9391L497.065 82.5524L498.266 80.1215Z"
fill="white"
/>
<path
id="Vector_7"
d="M259.579 148.823L260.781 151.254L263.474 151.654L261.527 153.547L261.983 156.212L259.579 154.955L257.19 156.212L257.646 153.547L255.698 151.654L258.392 151.254L259.579 148.823Z"
fill="white"
/>
<path
id="Vector_8"
d="M88.3646 129.762L89.5663 132.193L92.2458 132.594L90.2983 134.486L90.7679 137.152L88.3646 135.895L85.9613 137.152L86.4171 134.486L84.4834 132.594L87.163 132.193L88.3646 129.762Z"
fill="white"
/>
<path
id="Vector_9"
d="M0.547596 52.0001L1.29345 53.5056L2.9509 53.7404L1.74925 54.9144L2.0393 56.5719L0.547596 55.7846L-0.930299 56.5719L-0.654061 54.9144L-1.85571 53.7404L-0.184449 53.5056L0.547596 52.0001Z"
fill="white"
/>
<path
id="Vector_10"
d="M101.39 142.801L102.136 144.293L103.793 144.541L102.592 145.715L102.882 147.359L101.39 146.585L99.9122 147.359L100.188 145.715L98.9868 144.541L100.658 144.293L101.39 142.801Z"
fill="white"
/>
<path
id="Vector_11"
d="M425.932 192.11L426.678 193.615L428.336 193.85L427.134 195.024L427.41 196.668L425.932 195.894L424.454 196.668L424.731 195.024L423.529 193.85L425.186 193.615L425.932 192.11Z"
fill="white"
/>
<path
id="Vector_12"
d="M331.096 83.8093L331.828 85.3148L333.485 85.5496L332.297 86.7236L332.574 88.3811L331.096 87.5938L329.604 88.3811L329.894 86.7236L328.692 85.5496L330.35 85.3148L331.096 83.8093Z"
fill="white"
/>
<path
id="Vector_13"
d="M576.096 166.088L576.828 167.594L578.499 167.842L577.297 169.002L577.574 170.66L576.096 169.873L574.604 170.66L574.894 169.002L573.692 167.842L575.35 167.594L576.096 166.088Z"
fill="white"
/>
<path
id="Vector_14"
d="M325.849 115.729C322.529 121.523 317.817 126.398 312.139 129.913C306.461 133.428 299.997 135.473 293.33 135.862C286.663 136.251 280.005 134.973 273.957 132.142C267.909 129.311 262.661 125.018 258.689 119.649C254.717 114.281 252.146 108.007 251.208 101.396C250.27 94.7841 250.994 88.0429 253.316 81.7816C255.637 75.5203 259.483 69.9364 264.505 65.5348C269.527 61.1331 275.567 58.0526 282.079 56.5718C277.006 58.9095 272.519 62.3483 268.943 66.6381C265.367 70.9279 262.791 75.9608 261.405 81.3708C260.018 86.7809 259.854 92.432 260.925 97.9132C261.997 103.394 264.276 108.568 267.598 113.058C270.92 117.547 275.201 121.24 280.129 123.868C285.057 126.495 290.509 127.991 296.088 128.247C301.667 128.503 307.233 127.512 312.381 125.347C317.53 123.181 322.13 119.896 325.849 115.729V115.729Z"
fill="white"
/>
<g id="trees-2">
<path
id="Vector_15"
d="M362.892 228.002H278.278C278.278 228.002 286.67 205.092 299.578 205.092C312.485 205.092 316.54 220.902 316.54 220.902C316.54 220.902 325.251 212.315 332.404 212.315C339.557 212.315 345.78 223.665 345.78 223.665C345.78 223.665 355.881 217.565 362.892 228.002Z"
fill="#253049"
/>
<path
id="Vector_16"
d="M289.008 166.724H249.471C249.471 166.724 258.324 153.923 265.265 153.923C272.205 153.923 274.286 162.457 274.286 162.457C274.286 162.457 279.199 158.473 283.749 159.19C288.299 159.907 289.008 166.724 289.008 166.724Z"
fill="#253049"
/>
<path
id="Vector_17"
d="M77.0919 213.564H0.0731201C0.0731201 213.564 10.6256 190.006 21.904 188.537C33.1823 187.067 38.5825 206.03 38.5825 206.03C38.5825 206.03 45.8595 199.328 51.5872 199.328C57.3149 199.328 61.7236 208.181 61.7236 208.181C61.7236 208.181 73.1701 202.108 77.0919 213.564Z"
fill="#253049"
/>
<path
id="Vector_18"
d="M156.979 156.605H104.961C104.961 156.605 113.893 139.537 123.551 139.289C133.21 139.041 138.344 152.205 138.344 152.205C138.344 152.205 153.465 140.086 156.979 156.605Z"
fill="#253049"
/>
<path
id="Vector_19"
d="M185.979 203.826H150.86C150.86 203.826 156.898 192.317 163.44 192.149C169.982 191.981 173.426 200.86 173.426 200.86C173.426 200.86 183.606 192.662 185.979 203.826Z"
fill="#263238"
/>
<path
id="Vector_20"
d="M143.982 260.368C143.982 260.368 148.931 258.411 152.835 265.237C156.845 272.239 151.799 276.843 147.807 274.089C147.807 274.089 144.664 280.676 138.387 279.1C132.111 277.524 131.101 272.505 131.101 272.505C131.101 272.505 125.542 272.894 125.383 268.734C125.223 264.573 129.313 260.899 129.313 260.899C129.313 260.899 129.561 250.55 136.307 250.639C143.053 250.727 143.982 260.368 143.982 260.368Z"
fill="#253559"
/>
<path
id="Vector_21"
d="M139.362 297.036L137.981 266.238L136.538 297.036H139.362Z"
fill="#1A2132"
/>
<path
id="Vector_22"
d="M138.387 277.817L142.725 269.177L137.679 276.462L138.387 277.817Z"
fill="#1A2132"
/>
<path
id="Vector_23"
d="M298.915 260.368C298.915 260.368 303.855 258.411 307.768 265.237C311.787 272.239 306.741 276.843 302.748 274.089C302.748 274.089 299.597 280.676 293.329 279.1C287.061 277.524 286.043 272.505 286.043 272.505C286.043 272.505 280.475 272.894 280.324 268.734C280.174 264.573 284.255 260.899 284.255 260.899C284.255 260.899 284.503 250.55 291.248 250.639C297.994 250.727 298.915 260.368 298.915 260.368Z"
fill="#253559"
/>
<path
id="Vector_24"
d="M294.295 297.036L292.914 266.238L291.471 297.036H294.295Z"
fill="#1A2132"
/>
<path
id="Vector_25"
d="M293.32 277.817L297.658 269.177L292.612 276.462L293.32 277.817Z"
fill="#1A2132"
/>
<path
id="Vector_26"
d="M146.752 245.575C146.752 245.575 132.827 276.506 155.561 276.56C178.295 276.613 163.599 244.548 163.599 244.548C163.599 244.548 168.858 242.238 162.776 224.966C156.694 207.694 153.923 207.694 151.427 207.694C148.222 207.694 145.23 215.157 147.407 226.639C147.407 226.639 139.396 240.936 146.752 245.575Z"
fill="#253049"
/>
<path
id="Vector_27"
d="M157.552 297.054L155.419 250.444L153.17 297.054H157.552Z"
fill="#1A2132"
/>
<path
id="Vector_28"
d="M156.289 269.982L148.038 260.324L154.51 271.257L156.289 269.982Z"
fill="#1A2132"
/>
<path
id="Vector_29"
d="M263.714 241.715C263.714 241.715 248.744 274.966 273.187 274.993C297.629 275.019 281.827 240.6 281.827 240.6C281.827 240.6 287.484 238.112 280.942 219.548C274.4 200.984 271.469 200.957 268.743 200.957C265.299 200.957 262.085 208.987 264.423 221.319C264.423 221.345 255.844 236.722 263.714 241.715Z"
fill="#253049"
/>
<path
id="Vector_30"
d="M275.332 297.054L273.03 246.938L270.622 297.054H275.332Z"
fill="#1A2132"
/>
<path
id="Vector_31"
d="M273.967 267.954L265.097 257.561L272.046 269.318L273.967 267.954Z"
fill="#1A2132"
/>
<path
id="Vector_32"
d="M2.35817 245.575C2.35817 245.575 -11.5672 276.506 11.2109 276.56C33.989 276.613 19.2049 244.548 19.2049 244.548C19.2049 244.548 24.4634 242.238 18.3816 224.966C12.2998 207.694 9.52888 207.694 7.03241 207.694C3.82773 207.694 0.835507 215.157 3.01328 226.639C3.01328 226.639 -4.99844 240.936 2.35817 245.575Z"
fill="#253049"
/>
<path
id="Vector_33"
d="M13.1674 297.054L11.0251 250.444L8.77649 297.054H13.1674Z"
fill="#1A2132"
/>
<path
id="Vector_34"
d="M11.8916 269.982L3.64087 260.324L10.1034 271.257L11.8916 269.982Z"
fill="#1A2132"
/>
<path
id="Vector_35"
d="M315.972 231.729C315.972 231.729 298.266 270.974 327.144 271.009C356.021 271.044 337.342 230.384 337.342 230.384C337.342 230.384 344.026 227.454 336.297 205.543C328.569 183.633 325.116 183.624 321.903 183.624C317.831 183.624 314.042 193.096 316.795 207.659C316.795 207.685 306.623 225.842 315.972 231.729Z"
fill="#253049"
/>
<path
id="Vector_36"
d="M329.678 297.054L326.96 237.891L324.118 297.045L329.678 297.054Z"
fill="#1A2132"
/>
<path
id="Vector_37"
d="M328.068 262.696L317.595 250.435L325.801 264.316L328.068 262.696Z"
fill="#1A2132"
/>
<path
id="Vector_38"
d="M108.501 235.943C108.501 235.943 116.734 232.685 123.249 244.061C129.933 255.72 121.532 263.387 114.875 258.81C114.875 258.81 109.643 269.77 99.1966 267.149C88.7503 264.529 87.0595 256.163 87.0595 256.163C87.0595 256.163 77.7906 256.809 77.5339 249.886C77.2772 242.963 84.1026 236.829 84.1026 236.829C84.1026 236.829 84.5187 219.592 95.744 219.734C106.969 219.876 108.501 235.943 108.501 235.943Z"
fill="#253559"
/>
<path
id="Vector_39"
d="M100.79 297.027L98.4973 245.725L96.0894 297.018L100.79 297.027Z"
fill="#1A2132"
/>
<path
id="Vector_40"
d="M99.1791 265.007L.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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