svg矢量奖杯动画效果

代码语言:html

所属分类:动画

代码描述:svg矢量奖杯动画效果

代码标签: 动画 效果

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


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

<style>
body {
  padding: 0;
  margin: 0;
}

.trophy-container {
  position: relative;
  width: 100%;
  height: 99vh;
  margin: auto;
}

@media only screen and (max-width: 480px) {
  #wizzy {
    display: none;
  }
}
</style>

</head>
<body translate="no">
<div class="trophy-container">
<svg id="svgTrophyAnimation" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="true" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 550 400">
<defs>
<g id="Layer25_0_FILL">
<path id="vectorShadow" fill="#000000" stroke="none" d="
M 203.6 348.1
Q 203.6 351 223.65 353.05 243.7 355.1 272.1 355.1 300.5 355.1 320.55 353.05 340.6 351 340.6 348.1 340.6 345.2 320.55 343.15 300.5 341.1 272.1 341.1 243.7 341.1 223.65 343.15 203.6 345.2 203.6 348.1 Z" />
</g>

<g id="Layer24_0_FILL">
<path id="vector-tip-left" fill="#F7CF40" stroke="none" d="
M 271.6 17.7
L 223.4 135.4 272.85 137.1 271.6 17.7 Z" />
</g>
<g id="Layer23_0_FILL">
<path fill="#FEC400" stroke="none" d="
M 272.85 137.1
L 318.9 137.1 271.6 17.7 272.85 137.1 Z" />
</g>
<g id="Layer22_0_FILL">
<path fill="#f7cf40" stroke="none" d="
M 246.65 181.45
L 272.45 181.45 272.85 137.1 223.4 135.4 246.65 181.45 Z" />
</g>
<g id="Layer21_0_FILL">
<path fill="#F6B000" stroke="none" d="
M 318.9 137.1
L 272.85 137.1 272.45 181.45 294 181.25 318.9 137.1 Z" />
</g>
<g id="Layer17_0_FILL">
<path fill="#8F2418" stroke="non.........完整代码请登录后点击上方下载按钮下载查看

网友评论0