html SVGでロゴアニメーション
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html SVGでロゴアニメーション相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.logo-path {
fill: #262626;
stroke: #262626;
stroke-width: 1;
stroke-miterlimit: 10;
}
</style>
</head>
<body>
<svg width="633px" height="102px" viewBox="0 0 633 102">
<path class="logo-path" d="M44.2,54c-2.1-4.6-5.8-8-11.6-10.4L23,39.5
c-6.7-2.9-8.7-12.7-4.7-19c5.4-8.4,12.2,0.7,12.2,6.9v4.3h16v-7.9C46.5,4.5,21.8-7.9,7.9,7.4c-12,13.3-9.3,39.6,7.7,47l9,4
c7.6,3.4,7.9,13.2,5.8,20.5s-13.9,5.6-13.9-3.1v-6.1h-16v6.9c0,17.1,17,29.1,33.1,22.2S50,67.1,44.2,54L44.2,54z"/>
<path class="logo-path" d="M52.5,1.8v16h14v82h16v-82h15v-16H52.5z"/>
<path class="logo-path" d="M140.2,55.4c10.4-7,11.6-20.8,10-32.2
c-1.8-12.9-9.8-21.5-23.3-21.5h-21.4v98h15v-40h5.1l11.7,40h16.8L140.2,55.4z M120.5,17.7h5.4c7.8,0,8.9,5.2,9.1,12s0,14-8.4,14h-6
v-26L120.5,17.7z"/>
<path class="logo-path" d="M197.4,6.9c-15.6-15.3-37.9-0.8-37.9,18.7V76
c0,12.9,8.7,25,22.5,25s22.5-12,22.5-25V25.6C204.5,17.4,201.7,11.1,197.4,6.9C197.4,6.9,197.4,6.9,197.4,6.9z M175.5,25.6
c0-5.9,2.7-7.9,6.5-8s6.5,2.1,6.5,8V76c0,5.9-2.7,7.9-6.5,8s-6.5-2.1-6.5-8V25.6z"/>
<path class="logo-path" d="M257.5,30.7v-3.5c0-14.6-9.4-25.4-24.3-25.4h-19.7v98H232
c16.6,0,25.5-11.1,25.5-27.2v-5.5c0-8.9-2.3-15.2-7.3-18.9C254.8,44.7,257.5,39.9,257.5,30.7z M240.2,37.9c-1.2,1.7-3.2,2.8-7.1,2.8
h-3.6v-23h3.1C242.3,17.7,245.4,30.6,240.2,37.9L240.2,37.9z M229.5,55.7h3.5c8.1,0,9,6.1,9.1,13s-0.4,14-9.2,14h-3.4L229.5,55.7
L229.5,55.7z"/>
<path class="logo-path" d="M308.5,17.8v-16h-41v1.3v96.7h41v-17h-25v-24h21v-16h-21v-25H308.5
z"/>
<path class="logo-path" d="M400.9,0.6c-27.4-0.1-31.7,43.8-8.7,53.8l9,4
c7.6,3.3,7.8,13.2,5.8,20.5s-14.4,5.6-14.4-3.1v-6.1h-16v6.9c0,19.2,24.8,33.1,39.5,18.2c7.2-7.3,7.7-19.1,7.1-28.7
s-4-18.5-14.1-22.6l-9.6-4.1c-5.4-2.3-6.3-5.6-6.2-11.2s1-10.6,6.9-10.7s7.3,5.1,7.3,9.9v4.3h16v-7.9
C423.5,12.4,414.4,0.6,400.9,0.6L400.9,0.6z"/>
<path class="logo-path" d="M477.5,31.7V25c0-12.6-8.6-24.4-21.9-24.4s-22.1,11-22.1,23.6v52.6
c0,13.4,8.2,24.4,22.4,24.2c12.6-0.2,21.6-11.7,21.6-23.8v-7.5h-16V76c0,10-12,10.4-12-0.1V27.1c0-4.5,0.6-9.4,6-9.5s6,4.7,6,8.3
v5.9L477.5,31.7L477.5,31.7z"/>
<path class="logo-path" d="M524.3,6.9c-15.7-15.3-37.8-0.8-37.8,18.7V76
c0,12.9,8.5,25,22.4,25c13.9,0,22.6-12,22.6-25V25.6C531.5,17.4,528.6,11.1,524.3,6.9L524.3,6.9L524.3,6.9z M501.5,25.6
c1-5.9,3.2-7.9,7-8s7,2.1,7,8V76c0,5.9-3.2,7.9-7,8c-3.8,0.1-6-2.1-7-8L501.5,25.6L501.5,25.6z"/>
<path class="logo-path" d="M577.2,8.8c-4.6-5.3-10.4-7.1-17.5-7.1h-20.2v98h16v-37h4.3
c12.6,0,21-8.4,22.9-20.6C584.3,31.7,584.6,17.2,577.2,8.8C577.2,8.8,577.2,8.8,577.2,8.8z M567,43.2c-1.1,2.2-2.7,3.5-7.5,3.5h-3.9
v-29h4.4c5.7,0,7.5,3.1,8,8.4S569.2,38.5,567,43.2L567,43.2L567,43.2z"/>
<path class="logo-path" d="M632.5,17.8v-16h-41v1.3v96.7h41v-17h-25v-24h22v-16h-22v-25H632.5
z"/>
<path class="logo-path" d="M335.5,45.6c6.4,0.3,13.5,1.1,19.2,4c11.3,5.5,2.2,14.1-5,18.8
c-3.3-0.4-0.9-7.8-0.9-7.8c-2.3,8.1-28.3,22.5-28.3,22.5c15.2-2.8,39.7-7.7,48.4-22C381,41,345.5,43.5,335.5,45.6z"/>
<path class="logo-path" d="M349.9,52.3c-6.6-0.4-33.3-1.4-18.4-11.5
c9.8-6.6,21.7-10.8,32.7-14.9c-7.1,1.5-14.1,3.2-21.1,5.3s-21.3,5.6-26.7,13C306.9,57,344.4,53.1,349.9,52.3z"/>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="DrawSVGPlugin.min.js"></script>
<script>
var tl = new TimelineMax();
tl
.from('.logo-path', 1, {drawSVG: 0, ease: Power1.easeInOut})
.from('.logo-path', 0.5, {fill:'rgba(37, 37, 37, 0)'}, '+=0.5');
</script>
</body>
</html>以上是关于html SVGでロゴアニメーション的主要内容，如果未能解决你的问题，请参考以下文章
csharp キー入力でアニメーションを切り替え，画面にアニメーション名を表示する