线条花朵时钟走动动画效果
代码语言：html
所属分类：动画
代码描述：线条花朵时钟走动动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body, html {
margin: 0;
padding: 0;
background: #e4f9ff;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 800px;
height: 600px;
overflow: hidden;
}
#morph3, #morph2 {
display: none;
}
svg path, svg circle, svg ellipse {
fill: #e4f9ff;
stroke: #0fabbc;
}
</style>
</head>
<body translate="no">
<div class="box">
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
<g fill="none" stroke="#333" stroke-width="2">
<path id="morph1" d="M349 113.92c-36.818-1.358-94.42-36.367-124 14.08-12.773 21.784-9.965 63.244 13.719 113.128 34.42 72.498 30.045 75.572-3.115 131.872-33.16 56.3-19.805 99.97 20.396 113 64.396 20.872 87.429-30.898 159-27.611 71.571 3.286 89.636 42.627 161.607 29.611 34.969-6.324 82.112-79.113 32.393-155-49.719-75.887-54.665-56.736-49-129 5.665-72.264 14.5-145.271-57-142-71.5 3.271-116.075 53.32-154 51.92z" />
<path id="morph2" d="M338 142.92c-36.818-1.358-83.42 15.633-113 45.08-17.896 17.816-19.561 62.83-8.135 101.128 12.916 43.295-33.984 75.399-20.261 108.872 10.865 26.502 55.103 60.517 82.477 70 37.976 13.156 86.348-21.398 157.919-18.111 71.571 3.286 76.136 80.018 148.107 67.002C620.076 510.567 687.719 399.887 638 324c-49.719-75.887-91.659-55.417-98.993-117.681-8.481-71.987-16.336-147.59-74.836-150.319-71.496-3.336-88.246 88.32-126.171 86.92z" />
<path id="morph3" d="M361.785 112.645C328.034 127.419 267.58 108.553 238 138c-17.896 17.816-12.561 95.83-1.135 134.128 12.916 43.295-21.953 77.748-20 113.872 1.865 34.502 59.968 87.147 89.342 84.63 40.043-3.431 63.894-51.066 135.464-47.78 71.571 3.287 110.087 66.297 145.436 32.124 29.513-28.531 85.091-97.186 54.893-137.616-44.042-58.964-28.659-90.775-35.993-153.039C597.526 92.332 535.671 46.729 477.171 44c-71.496-3.336-77.462 52.044-115.386 68.645z" />
</g>
<g id="clock" stroke="#333" stroke-width="2">
<ellipse cx="406.5" cy="113.92" rx="32.553" ry="18.5" fill="#fff" />
<path fill="#fff" d="M400 108.42h15v54h-15z" />
<ellipse cx="406.5" cy="128.42" rx="25.5" ry="12" fill="#fff" />
<g>
<circle cx="407.663" cy="285.792" r="137.059" fill="#fff" />
<circle cx="407.663" cy="285.792" r="124.421" fill="#fff" />
<g fill="none">
<path d="M407.663 171.155v15.399" />
<path d="M407.663 385.03v15.399" />
</g>
<g fill="none">
<path d="M522.3 285.792h-15.399" />
<path d="M308.424 285.792h-15.399" />
</g>
<g fill="none">
<path d="M488.724 204.731l-10.889 10.889" />
<path d="M337.491 355.964l-10.889 10.889" />
</g>
<g fill="none">
<path d="M488.724 366.853l-10.889-10.889" />
<path d="M337.491 215.62l-10.889-10.889" />
</g>
<g fill="none">
<path d="M437.333 175.061l-3.986 14.874" />
<path d="M381.978 381.649l-3.986 14.874" />
</g>
<g fill="none">
<path d="M518.394 315.462l-14.874-3.985" />
<path d="M311.806 260.107l-14.875-3.985" />
</g>
<g fill="none">
<path d="M506.942 228.473l-13.336 7.7" />
<path d="M321.72 335.411l-13.336 7.7" />
</g>
<g fill="none">
<path d="M464.981 385.071l-7.699-13.336" />
<path d="M358.043 199.849l-7.699-13.336" />
</g>
<g fill="none">
<path d="M464.981 186.513l-7.699 13.336" />
<path d="M358.043 371.735l-7.699 13.336" />
</g>
<g fill="none">
<path d="M506.942 343.111.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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