如何利用html5+css3画出一个大象（svg路径）

如何利用html5+css3画出一个动态的大象效果（利用svg路径）？下面web建站小编给大家详细介绍一下代码！

svg路径

<svg role="img" aria-label="A stroke illustration of an elephant" viewBox="0 0 120 120">
  <g fill="none" stroke="currentColor" line-join="round" stroke-width="1">
    <path class="stroke" d="M2 66 
   q0 -3 3 -3 q3 0 3 3
   q0 15 10 15 q10 0 10 -20 q0 -50 30 -40
   s 15 -20 30 0 s -10 50 -20 35 m24 -25 
   q 20 0 20 30 q0 10 -10 20
   l 0 15 q 0 3 -6 3 q -6 0 -6 -3l0 -15
   q 0 -3 -2 -5 m 2 5
   s -10 3 -20 0
   l 0 15 q 0 3 -6 3 q -6 0 -6 -3l0 -15
   q 0 -5 -4 -10 m 4 23
   h-3 q -6 0 -6 -3
   l0 -12
   q 0 -5 -6 -12
   m 2 -5
   l 3 1 m -3 -1
   l -3 -2 m 3 2
   q -10 30 -27 30
   q -16 0 -16 -26
   m 80.5 16.5
   v11 q0 3 6 3 h1.5
   m-40 -50
   a 3 3 0 0 1 6 0 a 3 3 0 0 1 -6 0
   m 11 -17
   q 15 -15 23 5
   m 27.8 20
   q 0 5 5 10
   h2 m-2 0 v2
   ">
  </g>
</svg>

css样式

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000000;
  color: #fff
}

svg {
  display: block;
  width: 90vmin;
  height: 90vmin;
}

.stroke {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: stroke-anim 4s linear forwards;
}

@keyframes stroke-anim {
  to {
    stroke-dashoffset: 0;
  }
}

css3+js菜单点击动态效果

css3如何利用Flex实现响应式表格布局（Flex弹性布局）

css3中justify-content属性的基本用法

svg标签属性有哪些？

js如何判断浏览器是否支持html5？

标签： css3, html5, SVG路径, 动态效果

上面是“如何利用html5+css3画出一个大象（svg路径）”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2673.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！