卡通小恐龙loadding加载动画效果

代码语言:html

所属分类:加载滚动

代码描述:卡通小恐龙loadding加载动画效果

代码标签: loadding 加载 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background: #fefeef;
}
</style>

</head>
<body translate="no">
<div id="app">
<svg width="600" height="600" fill="none" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(100,100) scale(0.8)">
<deno></deno>
</g>
<g transform="translate(400,200) scale(0.5)">
<deno :init="10"></deno>
</g>
<text text-anchor="middle" font-size="30" :x="230 + 40 * idx" :y="460 + y(idx)" fill="white" stroke-width=10 stroke="#F44" stroke-linejoin="round" v-for="(c, idx) in letters">
{{c}}
</text>
</svg>
</div>
<script type="text/x-template" id="deno">
  <g :transform="t">
      <foot :angle="f3" x=240 y=240></foot>
      <foot :angle="f4" x=110 y=240></foot>

      <path fill-rule="evenodd" clip-rule="evenodd" d="M68.0276 87.3448C64.7703 87.7755 61.4197 88 58 88C25.9675 88 0 68.3005 0 44C0 19.6995 25.9675 0 58 0C89.7683 0 115.571 19.3759 115.995 43.3997C121.809 66.2281 130.323 97.8532 138.951 126.338C141.796 135.729 147.067 146.055 151.775 155.276L151.775 155.277C154.369 160.357 156.792 165.103 158.543 169.172C168.93 178.138 181.891 180 218 180C276.032 180 323.936 210.239 331.08 249.354C334.433 256.946 337.632 267.516 341 282C351 325 380 333.5 391 335C373.5 336 344.5 334.5 337.5 323.5C334.136 318.214 326.962 306.461 320.416 294.458C301.866 320.838 262.974 339 218 339C155.04 339 104 303.407 104 259.5V225.5C104 216.526 101.606 200.388 99.5958 188.758C99.5348 188.595 99.4738 188.432 99.4128 188.269C99.3816 188.186 99.3505 188.102 99.3193 188.018C94.4859 175.049 81.9595 135.372 77 119C73.0288 105.89 70.2772 96.0014 68.0276 87.3448Z" fill="#A4DD90" />
      <circle cx="71" cy="28" r="6" fill="black" />

      <foot :angle="f1" x=120 y=250.........完整代码请登录后点击上方下载按钮下载查看

网友评论0