animat实现开花动画
代码语言:html
所属分类:动画
代码描述:animat实现开花动画
代码标签: 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; padding: 0; margin: 0; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: hsl(40, 45%, 80%); color: hsl(0, 0%, 15%); } svg { color: hsl(0, 0%, 20%); width: 80vw; max-width: 35rem; width: 100%; height: auto; display: block; } svg#bee { color: hsl(0, 0%, 10%); position: absolute; width: 50px; height: auto; } </style> <script> window.console = window.console || function(t) {}; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="-25 0 150 100" width="150" height="100"> <defs> <mask id="mask-petals"> <rect width="100" height="100" fill="hsl(0, 0%, 100%)" /> <g transform="translate(50 40)"> <g class="petals"> <circle r="11" fill="hsl(0, 0%, 0%)" /> </g> </g> </mask> </defs> <g transform="translate(50 98)"> <g class="stem" transform="scale(1 1)"> <g fill="currentColor"> <g class="leaf" transform="rotate(45)"> <path d="M 0 0 c 20 -8 15 -32 0 -42 -15 10 -20 34 0 42" /> </g> <g transform="scale(-1 1)"> <g class="leaf" transform="rotate(45)"> <path d="M 0 0 c 20 -8 15 -32 0 -42 -15 10 -20 34 0 42" /> </g> </g> </g> </g> </g> <g mask="url(#mask-petals)"> <g transform="translate(50 40)"> <g fill="currentColor"> <g class="petals"> <circle transform="translate(0 -14)" r="11" /> <circle transform="rotate(72) translate(0 -14)" r="11" /> <circle transform="rotate(144) translate(0 -14)" r="11" /> <circle transform="rotate(216) translate(0 -14)" r="11" /> <circle transform="rotate(288) translate(0 -14)" r="11" /> </g> </g> </g> </.........完整代码请登录后点击上方下载按钮下载查看
网友评论0