线条花朵时钟走动动画效果
代码语言：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.111l-13.336-7.7" />
<path d="M321.72 236.173l-13.336-7.7" />
</g>
<g fill="none">
<path d="M518.394 256.122l-14.874 3.985" />
<path d="M311.806 311.477l-14.875 3.985" />
</g>
<g fill="none">
<path d="M437.333 396.523l-3.986-14.874" />
<path d="M381.978 189.935l-3.986-14.874" />
</g>
</g>
<g>
<path d="M407.663 198.957v102.835" fill="none" />
<circle cx="407.663" cy="211" r="6" fill="#fff" />
</g>
<path d="M463.663 285.792h-68" fill="none" />
<g id="sec">
<path d="M407.663 285.578l-33.218 101.031" fill="none" />
<circle cx="373.656" cy="389.123" r="3.354" fill="#fff" />
</g>
<path id="sec2" d="M414.469 264.877l-6.806 20.701" fill="none" />
</g>
<g id="flower1" stroke="#333" stroke-width="2">
<g>
<g id="leaf1">
<path d="M500.051 79.964s0 0 0 0c-24.627 27.992-24.627 69.921 0 97.913 0 0 0 0 0 0h.001c24.627-27.992 24.627-69.921 0-97.913h-.001z" fill="#fff" />
<path d="M500.051 79.964v97.913" fill="none" />
</g>
<path id="leaf2" d="M459.872 92.077s0 0 0 0c-10.972 35.632 6.234 73.869 40.179 89.289 0 0 0 0 0 0h.001c10.972-35.632-6.234-73.869-40.18-89.289 0 0 0 0 0 0z" fill="#fff" />
</g>
<g>
<g id="leaf3">
<path d="M420.472 234.922h.001c37.098 3.708 71.177-20.721 79.578-57.045 0 0 0 0 0 0s0 0 0 0c-37.098-3.708-71.177 20.72-79.578 57.045h-.001z" fill="#fff" />
<path d="M420.472 234.922l79.579-57.045" fill="none" />
</g>
<path id="leaf4" d="M452.186 259.608s0 0 0 0c35.564-11.194 57.276-47.065 50.701-83.764 0 0 0 0 0 0s0 0 0 0c-35.563 11.194-57.275 47.064-50.701 83.763v.001z" fill="#fff" />
<path id="leaf5" d="M585.702 227.855s0 0 0 0c-11.927-35.324-48.239-56.289-84.795-48.956 0 0 0 0 0 0s0 0 0 0c11.928 35.324 48.24 56.289 84.795 48.956 0 0 0 0 0 0z" fill="#fff" />
</g>
<g fill="#fff" class="flower">
<path d="M491.938 216.294a8.199 8.199 0 001.909 6.548 8.2018 8.2018 0 006.203 2.837h.003c2.382 0 4.645-1.036 6.203-2.837a8.199 8.199 0 001.909-6.548c-1.401-9.577-3.37-23.045-3.37-23.045h-9.487s-1.969 13.468-3.37 23.045z" />
<path d="M508.165 141.966a8.198 8.198 0 00-1.909-6.548 8.2018 8.2018 0 00-6.203-2.837h-.003a8.2018 8.2018 0 00-6.203 2.837 8.198 8.198 0 00-1.909 6.548c1.401 9.577 3.37 23.045 3.37 23.045h9.487s1.969-13.468 3.37-23.045z" />
<path d="M537.216 187.244a8.2 8.2 0 006.547-1.91 8.1963 8.1963 0 002.837-6.202v-.004c0-2.381-1.035-4.645-2.837-6.202a8.2 8.2 0 00-6.547-1.91l-23.045 3.371v9.486l23.045 3.371z" />
<path d="M462.887 171.016a8.2 8.2 0 00-6.547 1.91 8.1963 8.1963 0 00-2.837 6.202v.004c0 2.381 1.035 4.645 2.837 6.202a8.2 8.2 0 006.547 1.91l23.045-3.371v-9.486l-23.045-3.371z" />
<path d="M520.593 211.146a8.1998 8.1998 0 005.98 3.28 8.198 8.198 0 006.392-2.38l.003-.003a8.1937 8.1937 0 002.379-6.391 8.1936 8.1936 0 00-3.279-5.98c-7.763-5.782-18.679-13.912-18.679-13.912l-6.708 6.707 13.912 18.679z" />
<path d="M479.51 147.114a8.1998 8.1998 0 00-5.98-3.28 8.198 8.198 0 00-6.392 2.38c-.001.001-.002.001-.003.002a8.1972 8.1972 0 00-2.379 6.392 8.1936 8.1936 0 003.279 5.98c7.763 5.782 18.679 13.912 18.679 13.912l6.708-6.708s-8.131-10.916-13.912-18.678z" />
<path d="M532.068 158.588a8.1936 8.1936 0 003.279-5.98 8.1972 8.1972 0 00-2.379-6.392c-.001-.001-.002-.001-.003-.002a8.198 8.198 0 00-6.392-2.38 8.1998 8.1998 0 00-5.98 3.28c-5.781 7.762-13.912 18.678-13.912 18.678l6.708 6.708s10.916-8.13 18.679-13.912z" />
<path d="M468.035 199.672a8.1936 8.1936 0 00-3.279 5.98 8.1937 8.1937 0 002.382 6.394 8.198 8.198 0 006.392 2.38 8.1998 8.1998 0 005.98-3.28l13.912-18.679-6.708-6.707s-10.916 8.13-18.679 13.912z" />
<path d="M506.192 216.671a8.1994 8.1994 0 004.186 5.384 8.1957 8.1957 0 006.811.354c.001 0 .002-.001.004-.001a8.1996 8.1996 0 004.722-4.922 8.1989 8.1989 0 00-.636-6.79l-11.619-20.185-8.82 3.492s3.128 13.247 5.352 22.668z" />
<path d="M493.911 141.589a8.197 8.197 0 00-4.186-5.384 8.1957 8.1957 0 00-6.811-.354c-.001 0-.002.001-.004.001a8.1996 8.1996 0 00-4.722 4.922 8.1989 8.1989 0 00.636 6.79l11.619 20.185 8.82-3.493s-3.128-13.247-5.352-22.667z" />
<path d="M537.592 172.99a8.2003 8.2003 0 005.385-4.187 8.2033 8.2033 0 00.354-6.811c-.001-.001-.001-.002-.002-.003a8.1979 8.1979 0 00-4.921-4.722 8.1972 8.1972 0 00-6.791.635c-8.388 4.829-20.185 11.619-20.185 11.619l3.493 8.82s13.247-3.127 22.667-5.351z" />
<path d="M462.511 185.27a8.1989 8.1989 0 00-5.385 4.186 8.2035 8.2035 0 00-.354 6.811c.001.002.001.003.002.004a8.2006 8.2006 0 004.921 4.722 8.201 8.201 0 006.791-.635c8.388-4.829 20.185-11.62 20.185-11.62l-3.493-8.819s-13.247 3.127-22.667 5.351z" />
<path d="M530.939 201.333a8.196 8.196 0 006.767.848 8.2017 8.2017 0 005.067-4.566c0-.001.001-.003.001-.004a8.1974 8.1974 0 00-.141-6.819 8.1965 8.1965 0 00-5.251-4.352c-9.346-2.517-22.489-6.057-22.489-6.057l-3.767 8.706s11.579 7.156 19.813 12.244z" />
<path d="M469.164 156.926a8.199 8.199 0 00-11.834 3.719c0 .001-.001.002-.001.004a8.195 8.195 0 00.141 6.818 8.198 8.198 0 005.251 4.353c9.346 2.517 22.489 6.057 22.489 6.057l3.767-8.706s-11.579-7.156-19.813-12.245z" />
<path d="M522.255 148.243a8.1984 8.1984 0 00.847-6.768 8.1972 8.1972 0 00-4.566-5.066c-.001-.001-.002-.001-.003-.002a8.201 8.201 0 00-6.819.141 8.196 8.196 0 00-4.352 5.251c-2.518 9.347-6.057 22.489-6.057 22.489l8.706 3.767s7.155-11.578 12.244-19.812z" />
<path d="M477.848 210.017a8.1984 8.1984 0 00-.847 6.768 8.1998 8.1998 0 004.566 5.066c.001.001.002.001.003.002a8.201 8.201 0 006.819-.141 8.2013 8.2013 0 004.352-5.251c2.518-9.347 6.057-22.489 6.057-22.489l-8.706-3.767s-7.155 11.578-12.244 19.812z" />
<circle cx="500.051" cy="179.13" r="17.266" />
<circle cx="500.051" cy="179.13" r="6.878" />
</g>
</g>
<g id="flower2" stroke="#333" stroke-width="2">
<g>
<g id="leaf6">
<path d="M576.902 313.644s0 0 0 0c-37.283-.297-68.982 27.148-74.024 64.089 0 0 0 0 0 0s0 0 0 0c37.283.297 68.982-27.148 74.024-64.089 0 0 0 0 0 0z" fill="#fff" />
<path d="M576.902 313.644l-74.024 64.089" fill="none" />
</g>
<path id="leaf7" d="M541.445 291.197s0 0 0 0c-34.121 15.028-51.766 53.064-41.205 88.82 0 0 0 0 0 0s0 0 0 0c34.121-15.028 51.766-53.064 41.205-88.82 0 0 0 0 0 0z" fill="#fff" />
</g>
<g>
<g id="leaf8">
<path d="M572.09 446.991s0 0 0 0c-2.366-37.208-32.005-66.867-69.212-69.258 0 0 0 0 0 0v.001c2.367 37.208 32.005 66.866 69.212 69.257 0 0 0 0 0 0z" fill="#fff" />
<path d="M572.09 446.991l-69.212-69.258" fill="none" />
</g>
<path id="leaf9" d="M591.948 410.022s0 0 0 0c-17.426-32.961-56.625-47.844-91.536-34.757 0 0 0 0 0 0v.001c17.426 32.96 56.625 47.843 91.536 34.756 0 0 0 0 0 0z" fill="#fff" />
</g>
<g>
<g id="leaf10">
<path d="M407.663 354.909s0 0 0 0c21.479 30.475 62.254 40.249 95.215 22.825v-.001s0 0 0 0c-21.479-30.474-62.254-40.248-95.215-22.824 0 0 0 0 0 0z" fill="#fff" />
<path d="M407.663 354.909l95.215 22.824" fill="none" />
</g>
<path id="leaf11" d="M409.758 395.044s0 0 0 0c31.741 19.559 73.071 12.495 96.513-16.497 0 0 0 0 0 0s0 0 0 0c-31.741-19.56-73.071-12.495-96.513 16.497 0 0 0 0 0 0z" fill="#fff" />
<path id="leaf11" d="M521.157 475.2s0 0 0 0c18.898-32.139 10.98-73.314-18.491-96.151 0 0 0 0 0 0s0 0 0 0c-18.899 32.139-10.98 73.314 18.491 96.151 0 0 0 0 0 0z" fill="#fff" />
</g>
<g fill="#fff" class="flower">
<path d="M468.523 396.746a8.1955 8.1955 0 00-3.7 5.729 8.1964 8.1964 0 001.915 6.546l.003.003a8.1973 8.1973 0 006.204 2.832 8.1988 8.1988 0 006.2-2.842c6.324-7.328 15.216-17.633 15.216-17.633l-6.209-7.172s-11.471 7.327-19.629 12.537z" />
<path d="M535.338 360.362a8.2007 8.2007 0 003.701-5.73 8.2015 8.2015 0 00-1.915-6.545l-.003-.003a8.1954 8.1954 0 00-6.204-2.832 8.1972 8.1972 0 00-6.2 2.842c-6.324 7.328-15.21.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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