svg柱状图图表动画展示效果代码
代码语言：html
所属分类：图表
代码描述：svg柱状图图表动画展示效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
#Master_2 {
transform: translateX(100%);
-webkit-animation: moveMenu 2000ms ease-out both;
animation: moveMenu 2000ms ease-out both;
-webkit-animation-delay: 2000ms;
animation-delay: 2000ms;
}
.firstGraph *,
.secGraph *,
.thirdGraph * {
transform-box: fill-box;
transform-origin: center bottom;
-webkit-animation: growAnim 300ms ease-out both;
animation: growAnim 300ms ease-out both;
}
.firstGraph .sec {
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.firstGraph .third {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.secGraph .first {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.secGraph .sec {
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.secGraph .third {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
.thirdGraph .first {
-webkit-animation-delay: 600ms;
animation-delay: 600ms;
}
.thirdGraph .sec {
-webkit-animation-delay: 700ms;
animation-delay: 700ms;
}
.thirdGraph .third {
-webkit-animation-delay: 800ms;
animation-delay: 800ms;
}
#text_7,
#text_8,
#text_9 {
-webkit-animation: textFade 300ms ease-out both;
animation: textFade 300ms ease-out both;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
#text_8 {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
#text_9 {
-webkit-animation-delay: 800ms;
animation-delay: 800ms;
}
#cursor {
transform-box: fill-box;
transform-origin: center;
-webkit-animation: cursorAnim 2000ms linear both;
animation: cursorAnim 2000ms linear both;
-webkit-animation-delay: 900ms;
animation-delay: 900ms;
}
#Main_2 {
transform-box: fill-box;
transform-origin: center;
-webkit-clip-path: polygon(0 0, 80% 0, 80% 100%, 0% 100%);
clip-path: polygon(0 0, 80% 0, 80% 100%, 0% 100%);
-webkit-animation: showUp 300ms linear both;
animation: showUp 300ms linear both;
-webkit-animation-delay: 3200ms;
animation-delay: 3200ms;
}
.newFirst,
.newSec,
.newThird {
transform-box: fill-box;
transform-origin: center bottom;
-webkit-animation: growAnim 300ms ease-out both;
animation: growAnim 300ms ease-out both;
-webkit-animation-delay: 3500ms;
animation-delay: 3500ms;
}
.textFirst,
.textSec,
.textThird {
-webkit-animation: textFade 300ms ease-out both;
animation: textFade 300ms ease-out both;
-webkit-animation-delay: 3800ms;
animation-delay: 3800ms;
}
.newSec {
-webkit-animation-delay: 3700ms;
animation-delay: 3700ms;
}
.newThird {
-webkit-animation-delay: 3900ms;
animation-delay: 3900ms;
}
.textSec {
-webkit-animation-delay: 4000ms;
animation-delay: 4000ms;
}
.textThird {
-webkit-animation-delay: 4200ms;
animation-delay: 4200ms;
}
@-webkit-keyframes moveMenu {
0% {
transform: translateX(100%);
}
30% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
80% {
transform: translateX(100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes moveMenu {
0% {
transform: translateX(100%);
}
30% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
80% {
transform: translateX(100%);
}
100% {
transform: translateX(100%);
}
}
@-webkit-keyframes growAnim {
0% {
transform: scale(1, 0);
}
100% {
transform: scale(1, 1);
}
}
@keyframes growAnim {
0% {
transform: scale(1, 0);
}
100% {
transform: scale(1, 1);
}
}
@-webkit-keyframes textFade {
0% {
transform: translateY(5%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes textFade {
0% {
transform: translateY(5%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@-webkit-keyframes cursorAnim {
0% {
transform: translate(-500%, 0) scale(1);
opacity: 0;
}
15% {
transform: translate(-250%, 0) scale(1);
opacity: 1;
}
30% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
40% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
45% {
transform: translate(0, 0) scale(0.8);
opacity: 1;
}
50% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
60% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
80% {
transform: translate(-600%, 200%) scale(1);
opacity: 1;
}
90% {
transform: translate(-600%, 200%) scale(1);
opacity: 1;
}
95% {
transform: translate(-600%, 200%) scale(0.8);
opacity: 1;
}
100% {
transform: translate(-600%, 200%) scale(1);
opacity: 0;
}
}
@keyframes cursorAnim {
0% {
transform: translate(-500%, 0) scale(1);
opacity: 0;
}
15% {
transform: translate(-250%, 0) scale(1);
opacity: 1;
}
30% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
40% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
45% {
transform: translate(0, 0) scale(0.8);
opacity: 1;
}
50% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
60% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
80% {
transform: translate(-600%, 200%) scale(1);
opacity: 1;
}
90% {
transform: translate(-600%, 200%) scale(1);
opacity: 1;
}
95% {
transform: translate(-600%, 200%) scale(0.8);
opacity: 1;
}
100% {
transform: translate(-600%, 200%) scale(1);
opacity: 0;
}
}
@-webkit-keyframes showUp {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes showUp {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
body {
overflow: hidden;
}
svg {
position: absolute;
inset: 0;
}
#playCheck {
position: absolute;
z-index: 9;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}
#playCheck:checked ~ svg * {
-webkit-animation-name: none !important;
animation-name: none !important;
display: none;
}
.clickText {
position: absolute;
z-index: 10;
width: 100vw;
height: 100vh;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
font-family: sans-serif;
font-size: 1.2em;
color: gray;
transition: opacity 300ms linear 0ms;
}
#playCheck:checked ~ .clickText {
opacity: 1;
}
</style>
</head>
<body >
<input type="checkbox" id="playCheck" />
<div class="clickText">Click again to replay</div>
<svg width="100vw" height="100vh" viewBox="0 0 664 566" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame 2152">
<g id="Images - Product">
<g id="Frame 2149">
<g id="Main" filter="url(#filter0_dddd_5074_68376)">
<g clip-path="url(#clip0_5074_68376)">
<rect x="80" y="80" width="504" height="406" rx="13.9848" fill="white" />
<g id="Frame 2017" clip-path="url(#clip1_5074_68376)">
<g id="graph">
<path id="Vector" d="M157.012 400H669.947" stroke="#E9E9E9" stroke-width="0.473416" stroke-miterlimit="10" stroke-linecap="square" stroke-dasharray="0.47 0.47 0.47 0.47 0.47 0.47" />
<path id="Vector_2" d="M157.012 298H669.947" stroke="#E9E9E9" stroke-width="0.473416" stroke-miterlimit="10" stroke-linecap="square" stroke-dasharray="0.47 0.47 0.47 0.47 0.47 0.47" />
<path id="Vector_3" d="M157.012 361H669.947" stroke="#E9E9E9" stroke-width="0.473416" stroke-miterlimit="10" stroke-linecap="square" stroke-dasharray="0.47 0.47 0.47 0.47 0.47 0.47" />
<path id="Vector_4" d="M157.012 233.797H669.947" stroke="#E9E9E9" stroke-width="0.473416" stroke-miterlimit="10" stroke-linecap="square" stroke-dasharray="0.47 0.47 0.47 0.47 0.47 0.47" />
<g id="Dates">
<path id="text" d="M211.983 411.455H211.203V416.607H211.139L207.56 411.455H206.793V418H207.585V412.861H207.649L211.216 418H211.983V411.455ZM219.092 414.727C219.092 412.656 217.877 411.365 216.203 411.365C214.528 411.365 213.313 412.656 213.313 414.727C213.313 416.798 214.528 418.089 216.203 418.089C217.877 418.089 219.092 416.798 219.092 414.727ZM218.325 414.727C218.325 416.428 217.391 417.348 216.203 417.348C215.014 417.348 214.08 416.428 214.08 414.727C214.08 413.027 215.014 412.107 216.203 412.107C217.391 412.107 218.325 413.027 218.325 414.727ZM220.385 411.455H219.554L221.958 418H222.776L225.179 411.455H224.348L222.405 416.964H222.328L220.385 411.455Z" fill="#898989" />
<path id="text_2" d="M320.812 418C322.807 418 323.932 416.76 323.932 414.714C323.932 412.682 322.807 411.455 320.902 411.455H318.793V418H320.812ZM319.585 417.297V412.158H320.851C322.385 412.158 323.165 413.129 323.165 414.714C323.165 416.312 322.385 417.297 320.761 417.297H319.585ZM325.261 418H329.263V417.297H326.054V415.072H329.007V414.369H326.054V412.158H329.212V411.455H325.261V418ZM335.907 413.5C335.664 412.158 334.591 411.365 333.274 411.365C331.599 411.365 330.385 412.656 330.385 414.727C330.385 416.798 331.599 418.089 333.274 418.089C334.591 418.089 335.664 417.297 335.907 415.955H335.115C334.923 416.862 334.143 417.348 333.274 417.348C332.085 417.348 331.152 416.428 331.152 414.727C331.152 413.027 332.085 412.107 333.274 412.107C334.143 412.107 334.923 412.592 335.115 413.5H335.907Z" fill="#898989" />
<path id="text_3" d="M432.298 411.455V416.134C432.298 416.949 431.908 417.386 431.224 417.386C430.601 417.386 430.151 417.022 430.151 416.466H429.371C429.371 417.473 430.151 418.089 431.224 418.089C432.362 418.089 433.091 417.39 433.091 416.134V411.455H432.298ZM434.948 418L435.606 416.146H438.252L438.911 418H439.742L437.338 411.455H436.52L434.117 418H434.948ZM435.855 415.443L436.904 412.49H436.955L438.003 415.443H435.855ZM445.952 411.455H445.172V416.607H445.108L441.528 411.455H440.761V418H441.554V412.861H441.618L445.185 418H445.952V411.455ZM450.235 414.727C450.235 416.338 450.67 417.68 451.45 418.818H452.114C451.501 417.974 451.015 416.249 451.015 414.727C451.015 413.206 451.501 411.48 452.114 410.636H451.45C450.67 411.774 450.235 413.116 450.235 414.727ZM453.33 418H454.122V415.072H456.96V414.369H454.122V412.158H457.254V411.455H453.33V418ZM460.144 418.102C461.473 418.102 462.368 417.092 462.368 415.571C462.368 414.037 461.473 413.027 460.144 413.027C458.814 413.027 457.919 414.037 457.919 415.571C457.919 417.092 458.814 418.102 460.144 418.102ZM460.144 417.425C459.134 417.425 458.673 416.555 458.673 415.571C458.673 414.587 459.134 413.705 460.144 413.705C461.154 413.705 461.614 414.587 461.614 415.571C461.614 416.555 461.154 417.425 460.144 417.425ZM463.519 418H464.274V414.893C464.274 414.229 464.798 413.743 465.514 413.743C465.715 413.743 465.923 413.781 465.974 413.794V413.027C465.888 413.021 465.69 413.014 465.578 413.014C464.99 413.014 464.478 413.347 464.299 413.832H464.248V413.091H463.519V418ZM468.777 418.102C469.774 418.102 470.503 417.604 470.733 416.862L470.004 416.658C469.812 417.169 469.368 417.425 468.777 417.425C467.892 417.425 467.281 416.853 467.246 415.801H470.81V415.482C470.81 413.653 469.723 413.027 468.7 413.027C467.371 413.027 466.489 414.075 466.489 415.584C466.489 417.092 467.358 418.102 468.777 418.102ZM467.246 415.149C467.297 414.385 467.837 413.705 468.7 413.705C469.518 413.705 470.043 414.318 470.043 415.149H467.246ZM473.951 418.102C475.038 418.102 475.754 417.438 475.882 416.568H475.127C474.987 417.105 474.539 417.425 473.951 417.425C473.056 417.425 472.481 416.683 472.481 415.545C472.481 414.433 473.069 413.705 473.951 413.705C474.616 413.705 475.012 414.114 475.127 414.561H475.882C475.754 413.641 474.974 413.027 473.938 413.027C472.609 413.027 471.727 414.075 471.727 415.571C471.727 417.041 472.571 418.102 473.951 418.102ZM478.429 418.115C479.285 418.115 479.733 417.655 479.886 417.335H479.925V418H480.679V414.766C480.679 413.206 479.49 413.027 478.864 413.027C478.122 413.027 477.278 413.283 476.895 414.178L477.611 414.433C477.777 414.075 478.17 413.692 478.889 413.692C479.583 413.692 479.925 414.059 479.925 414.689V414.714C479.925 415.079 479.554 415.047 478.659 415.162C477.748 415.28 476.754 415.482 476.754 416.607C476.754 417.565 477.496 418.115 478.429 418.115ZM478.544 417.438C477.943 417.438 477.508 417.169 477.508 416.645C477.508 416.07 478.033 415.891 478.621 415.814C478.94 415.776 479.797 415.686 479.925 415.533V416.223C479.925 416.837 479.439 417.438 478.544 417.438ZM485.533 414.19C485.296 413.494 484.766 413.027 483.794 413.027C482.759 413.027 481.992 413.615 481.992 414.446C481.992 415.124 482.394 415.577 483.296 415.788L484.114 415.98C484.609 416.095 484.843 416.332 484.843 416.67C484.843 417.092 484.395 417.438 483.692 417.438C483.075 417.438 482.688 417.172 482.554 416.645L481.838 416.824C482.014 417.658 482.701 418.102 483.705 418.102C484.846 418.102 485.622 417.479 485.622 416.632C485.622 415.948 485.194 415.517 484.318 415.303L483.59 415.124C483.008 414.98 482.746 414.785 482.746 414.408C482.746 413.986 483.193 413.679 483.794 413.679C484.453 413.679 484.724 414.043 484.855 414.382L485.533 414.19ZM488.893 413.091H487.844V411.915H487.09V413.091H486.349V413.73H487.09V416.798C487.09 417.655 487.78 418.064 488.42 418.064C488.701 418.064 488.88 418.013 488.982 417.974L488.829 417.297C488.765 417.31 488.663 417.335 488.496 417.335C488.164 417.335 487.844 417.233 487.844 416.594V413.73H488.893V413.091ZM491.638 415.239C491.638 413.628 491.203 412.286 490.424 411.148H489.759C490.372 411.991 490.858 413.717 490.858 415.239C490.858 416.76 490.372 418.486 489.759 419.33H490.424C491.203 418.192 491.638 416.849 491.638 415.239Z" fill="#898989" />
</g>
</g>
</g>
<path id="Vector_5" opacity="0.16" d="M551 131L108 131" stroke="#0A2144" stroke-miterlimit="10" stroke-linecap="square" />
<path id="text_4" d="M124.316 236.727H124.782V236.094C125.976 236.011 126.646 235.307 126.646 234.42C126.646 233.33 125.612 232.977 125.01 232.818L124.782 232.756V230.736C125.385 230.795 125.822 231.119 125.885 231.636H126.566C126.538 230.807 125.811 230.176 124.782 230.108V229.455H124.316V230.116C123.342 230.216 122.612 230.835 122.612 231.727C122.612 232.511 123.18 232.977 124.089 233.239L124.316 233.304V235.455C123.72 235.392 123.231 235.085 123.18 234.5H122.453C122.518 235.395 123.2 236.02 124.316 236.094V236.727ZM124.782 235.455V233.438L124.805 233.443C125.419 233.614 125.964 233.83 125.964 234.409C125.964 234.98 125.47 235.378 124.782 235.455ZM124.316 232.631C123.885 232.509 123.294 232.27 123.294 231.693C123.294 231.202 123.691 230.827 124.316 230.744V232.631ZM129.52 236.08C130.628 236.08 131.441 235.261 131.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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