gsap+svg实现可爱的太阳升起发光动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap+svg实现可爱的太阳升起发光动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
display: grid;
gap: 1em;
place-items: center;
background: black;
}
svg {
width: 600px;
opacity: 0;
max-width: 80vw;
max-height: 80vh;
}
#flare-outline {
fill: none;
}
#rays {
fill: goldenrod;
}
</style>
</head>
<body >
<!-- SVG originally from https://www.svgrepo.com/svg/243799/sun -->
<!-- with edits, to group, reorder and add IDs/classes -->
<svg id="wake-up-svg" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
<circle cx="400" cy="400" r="379.505" fill="url(#radial-glow)" id="glow" />
<g id="flares" fill="#f78a68">
<path id="flare-1" d="m497.607 170.745.308 105.839c-22.963-18.257-51.156-30.219-81.966-33.322l74.068-75.594c2.77-2.834 7.578-.872 7.59 3.077Z" />
<path id="flare-2" d="M627.922 299.367c3.962-.038 5.987 4.744 3.192 7.552l-74.606 75.017c-3.5-30.694-15.834-58.721-34.399-81.453l.013-.013 105.8-1.103Z" />
<path id="flare-3" d="M632.332 490.017c2.821 2.769.872 7.577-3.09 7.59l-105.839.308c18.27-22.963 30.232-51.156 33.335-81.966l75.594 74.068Z" />
<path id="flare-4" d="M500.62 627.922c.038 3.962-4.744 5.987-7.552 3.192l-75.004-74.606c30.694-3.5 58.721-15.834 81.453-34.386l1.103 105.8Z" />
<path id="flare-5" d="m384.038 556.739-74.068 75.594c-2.769 2.821-7.577.872-7.59-3.09l-.308-105.851c22.963 18.269 51.156 30.244 81.966 33.347Z" />
<path id="flare-6" d="m277.878 499.518-105.812 1.102c-3.962.038-5.975-4.744-3.18-7.552l74.606-75.017c3.5 30.708 15.821 58.722 34.386 81.467Z" />
<path id="flare-7" d="m170.745 302.38 105.864-.308c-18.27 22.963-30.245 51.156-33.348 81.966l-75.593-74.068c-2.834-2.77-.872-7.577 3.077-7.59Z" />
<path id="flare-8" d="m306.918 168.886 75.017 74.606c-30.707 3.5-58.734 15.834-81.466 34.399l-1.103-105.826c-.038-3.961 4.745-5.974 7.552-3.179Z" />
</g>
<path id="sun" d="M557.534 400c0 5.385-.269 10.706-.795 15.95-3.103 30.809-15.065 59.003-33.335 81.966a157.34 157.34 0 0 1-23.886 24.206c-22.732 18.552-50.759 30.886-81.453 34.386h-.013a160.015 160.015 0 0 1-34.014.231c-30.809-3.103-59.003-15.078-81.966-33.348a157.177 157.177 0 0 1-24.194-23.873c-18.565-22.745-30.886-50.759-34.386-81.466v-.013a160.024 160.024 0 0 1-.231-34.001c3.103-30.809 15.078-59.003 33.348-81.966a157.638 157.638 0 0 1 23.86-24.181c22.732-18.565 50.759-30.899 81.466-34.399h.013A158.27 158.27 0 0 1 400 242.466c5.385 0 10.706.269 15.95.795 30.809 3.103 59.003 15.065 81.966 33.322a157.39 157.39 0 0 1 24.194 23.899c18.565 22.732 30.899 50.759 34.399 81.453A158.956 158.956 0 0 1 557.534 400Z" fill="#f0c419" />
<g id="face">
<g id="eyes">
<path id="eye-left" d="M381.82 391.615c0-23.973-19.504-43.477-43.477-43.477-23.981 0-43.489 19.504-43.489 43.477 0 7.08 5.74 12.821 12.821 12.821 7.081 0 12.821-5.741 12.821-12.821 0-9.834 8.007-17.834 17.847-17.834 9.834 0 17.834 8 17.834 17.834 0 7.08 5.74 12.821 12.821 12.821 7.081 0 12.822-5.741 12.822-12.821Z" />
<path id="eye-right" d="M431.643 404.436c7.081 0 12.821-5.741 12.821-12.821 0-9.834 8.007-17.834 17.847-17.834 9.834 0 17.834 8 17.834 17.834 0 7.08 5.74 12.821 12.821 12.821 7.081 0 12.821-5.741 12.821-12.821 0-23.973-19.504-43.477-43.477-43.477-23.981 0-43.489 19.504-43.489 43.477 0 7.08 5.74 12.821 12.822 12.821Z" />
</g>
<path id="smile" d="M368.692 440.889c-6.095 3.604-8.117 11.465-4.513 17.561a41.82 41.82 0 0 0 12.797 13.489c6.767 4.512 14.789 6.868 22.928 6.868 3.117 0 6.25-.346 9.338-1.049 11.186-2.548 20.904-9.583 26.66-19.298 3.609-6.093 1.596-13.957-4.495-17.566-6.091-3.608-13.957-1.598-17.566 4.495-2.186 3.69-5.937 6.376-10.295 7.368-4.378.997-8.766.233-12.372-2.171a16.058 16.058 0 0 1-4.921-5.186c-3.603-6.094-11.467-8.116-17.561-4.511Z" />
</g>
<g id="rays">
<path id="ray-n" d="M416.924 186.348v-29.527c0-7.08-5.74-12.821-12.821-12.821-7.081 0-12.821 5.741-12.821 12.821v29.527c0 7.08 5.74 12.821 12.821 12.821 7.081 0 12.821-5.74 12.821-12.821Z" />
<path id="ray-ne" d="m559.714 263.879 13.988-13.988c5.007-5.007 5.007-13.125 0-18.133-5.007-5.005-13.125-5.005-18.133 0l-13.988 13.988c-5.007 5.007-5.007 13.125 0 18.133a12.788 12.788 0 0 0 9.066 3.755c3.281 0 6.565-1.252 9.067-3.755Zm41.136-41.135 2.603-2.591c5.019-4.995 5.037-13.113.042-18.132-4.995-5.019-13.11.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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