svg+js实现帧动画效果代码
代码语言：html
所属分类：动画
代码描述：svg+js实现帧动画效果代码，通过js来实现svg的动画效果，主要是requestAnimationFrame。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html,
body {
height: 100%;
}
.wrapper {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
#logo-container {
width: 100%;
max-width: 700px;
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
svg {
height: 100%;
width: auto;
}
svg line,
svg path {
transform-origin: center;
}
svg #thin-lines {
fill: none;
stroke: #000;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: calc(9.917px * 0.382);
display: none;
}
svg #thick-lines {
fill: none;
stroke: #000;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 9.917px;
}
</style>
</head>
<body translate="no">
<div class="wrapper">
<div id="logo-container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1536">
<g id="thin-lines">
<line x1="4.958" y1="699.017" x2="4.958" y2="809.68" />
<line x1="20.992" y1="699.017" x2="20.992" y2="832.484" />
<line x1="37.098" y1="699.017" x2="37.098" y2="839.049" />
<line x1="53.18" y1="699.017" x2="53.18" y2="840.086" />
<line x1="69.285" y1="798.539" x2="69.285" y2="837.51" />
<line x1="85.391" y1="797.689" x2="85.391" y2="828.138" />
<line x1="101.485" y1="699.017" x2="101.485" y2="837.094" />
<line x1="117.578" y1="699.017" x2="117.578" y2="837.094" />
<line x1="133.684" y1="699.017" x2="133.684" y2="837.094" />
<line x1="149.766" y1="699.017" x2="149.766" y2="837.094" />
<line x1="181.965" y1="699.017" x2="181.965" y2="837.094" />
<line x1="198.059" y1="699.017" x2="198.059" y2="837.094" />
<line x1="214.165" y1="699.017" x2="214.165" y2="837.094" />
<line x1="230.246" y1="699.017" x2="230.246" y2="837.094" />
<line x1="246.352" y1="707.492" x2="246.352" y2="751.008" />
<line x1="262.458" y1="698.429" x2="262.458" y2="743.048" />
<line x1="278.54" y1="697.033" x2="278.54" y2="741.89" />
<path d="M310.739,699.017V837.094m0-194.522v35.469" />
<path d="M326.833,642.572v35.469m0,20.976V837.094" />
<path d="M342.938,642.572v35.469m0,20.976V837.094" />
<path d="M359.02,642.572v35.469m0,20.976V837.094" />
<line x1="391.219" y1="699.017" x2="391.219" y2="730.772" />
<line x1="407.325" y1="653.69" x2="407.325" y2="814.098" />
<line x1="423.419" y1="653.69" x2="423.419" y2="831.008" />
<line x1="439.501" y1="653.69" x2="439.501" y2="836.443" />
<line x1="455.606" y1="653.69" x2="455.606" y2="838.265" />
<path d="M471.712,699.017v31.755m0,70.669v36.893" />
<path d="M487.794,802.194v35.273m0-138.45v31.755" />
<line x1="519.993" y1="699.017" x2="519.993" y2="837.094" />
<line x1="536.087" y1="699.017" x2="536.087" y2="837.094" />
<line x1="552.192" y1="699.017" x2="552.192" y2="837.094" />
<line x1="568.274" y1="699.017" x2="568.274" y2="837.094" />
<line x1="584.38" y1="710.403" x2="584.38" y2="738.277" />
<line x1="600.462" y1="699.752" x2="600.462" y2="738.277" />
<line x1="616.567" y1="696.126" x2="616.579" y2="837.094" />
<line x1="632.673" y1="696.612" x2="632.673" y2="837.094" />
<line x1="648.755" y1="702.464" x2="648.755" y2="837.094" />
<line x1="664.86" y1="716.987" x2="664.86" y2="837.094" />
<line x1="680.966" y1="704.034" x2="680.966" y2="738.277" />
<line x1="697.048" y1="696.931" x2="697.048" y2="738.277" />
<line x1="713.154" y1="695.78" x2="713.165" y2="837.094" />
<line x1="729.235" y1="698.416" x2="729.235" y2="837.094" />
<line x1="745.341" y1="705.399" x2="745.341" y2="837.094" />
<line x1="761.447" y1="725.655" x2="761.447" y2="837.094" />
<path d="M793.646,642.572v35.469m0,20.976V837.094" />
<path d="M809.74,699.017V837.094m0-194.522v35.469" />
<path d="M825.821,699.017V837.094m0-194.522v35.469" />
<path d="M841.927,699.017V837.094m0-194.522v35.469" />
<path d="M874.115,798.783v9.59m0-83.449v30.284" />
<path d="M890.22,707.628v64.695m0,26.46v29.944" />
<path d="M906.3,798.783V836.71m0-136.267v78.889" />
<path d="M922.408,798.783v41.556m0-143.209v85.716" />
<path d="M938.489,748.3v36.789m0,26.915V841.7m0-145.949V723.24" />
<path d="M954.6,750.7v37m0,24.76v29.025m0-145.464v28.558" />
<path d="M970.7,753.079v86.65m0-141.737v38.769" />
<path d="M986.783,702.5v34.264m0,19.727v79.206" />
<path d="M1002.888,711.159v25.6m0,26.442v64.862" />
<path d="M1018.994,779.46v29.228m0-77.576v5.649" />
</g>
<g id="thick-lines">
<line x1="4.958" y1="699.017" x2="4.958" y2="809.68" />
<line x1="20.992" y1="699.017" x2="20.992" y2="832.484" />
<line x1="37.098" y1="699.017" x2="37.098" y2="839.049" />
<line x1="53.18" y1="699.017" x2="53.18" y2="840.086" />
<line x1="69.285" y1="798.539" x2="69.285" y2="837.51" />
<line x1="85.391" y1="797.689" x2="85.391" y2="828.138" />
<line x1="101.485" y1="699.017" x2="101.485" y2="837.094" />
<line x1="117.578" y1="699.017" x2="117.578" y2="837.094" />
<line x1="133.684" y1="699.017" x2="133.684" y2="837.094" />
<line x1="149.766" y1="699.017" x2="149.766" y2="837.094" />
<line x1="181.965" y1="699.017" x2="181.965" y2="837.094" />
<line x1="198.059" y1="699.017" x2="198.059" y2="837.094" />
<line x1="214.165" y1="699.017" x2="214.165" y2="837.094" />
<line x1="230.246" y1="699.017" x2="230.246" y2="837.094" />
<line x1="246.352" y1="707.492" x2="246.352" y2="751.008" />
<line x1="262.458" y1="698.429" x2="262.458" y2="743.048" />
<line x1="278.54" y1="697.033" x2="278.54" y2="741.89" />
<path d="M310.739,699.017V837.094m0-194.522v35.469" />
<path d="M326.833,642.572v35.469m0,20.976V837.094" />
<path d="M342.938,642.572v35.469m0,20.976V837.094" />
<path d="M359.02,642.572v35.469m0,20.976V837.094" />
<line x1="391.219" y1="699.017" x2="391.219" y2="730.772" />
<line x1="407.325" y1="653.69" x2="407.325" y2="814.098" />
<line x1="423.419" y1="653.69" x2="423.419" y2="831.008" />
<line x1="439.501" y1="653.69" x2="439.501" y2="836.443" />
<line x1="455.606" y1="653.69" x2="455.606" y2="838.265" />
<path d="M471.712,699.017v31.755m0,70.669v36.893" />
<path d="M487.794,802.194v35.273m0-138.45v31.755" />
<line x1="519.993" y1="699.017" x2="519.993" y2="837.094" />
<line x1="536.087" y1="699.017" x2="536.087" y2="837.094" />
<line x1="552.192" y1="699.017" x2="552.192" y2="837.094" />
<line x1="568.274" y1="699.017" x2="568.274" y2="837.094" />
<line x1="584.38" y1="710.403" x2="584.38" y2="738.277" />
<line x1="600.462" y1="699.752" x2="600.462" y2="738.277" />
<line x1="616.567" y1="696.126" x2="616.579" y2="837.094" />
<line x1="632.673" y1="696.612" x2="632.673" y2="837.094" />
<line x1="648.755" y1="702.464" x2="648.755" y2="837.094" />
<line x1="664.86" y1="716.987" x2="664.86" y2="837.094" />
<line x1="680.966" y1="704.034" x2="680.966" y2="738.277" />
<line x1="697.048" y1="696.931.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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