svg+css实现可爱的猫头草摇摆动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现可爱的猫头草摇摆动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Comfortaa:300,700|Bungee+Shade|Josefin+Sans:400&display=swap"/> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Gochi+Hand&display=swap"/> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap"/> <style> @layer reset, base, demo; @layer demo { .stage { height: 80vmin; aspect-ratio: 3 / 4; position: relative; svg { display: block; width: 100%; height: 100%; } } .stem { width: 3px; height: 220px; position: absolute; left: 50%; bottom: 0; translate: -50% 0; background-color: #534741; border-radius: 5px; transform-origin: center bottom; -webkit-animation: shake 2s infinite; animation: shake 2s infinite; } .cat { width: 100px; aspect-ratio: 1; position: absolute; left: 50%; translate: -50% 0; top: -90px; } .leafs { position: absolute; bottom: 0; left: 0; -webkit-animation: stretch 1s infinite; animation: stretch 1s infinite; .leaf { position: absolute; width: 100px; height: 30px; left: 2px; bottom: -25px; transform-origin: left center; } .leaf--left { translate: 6px -20px; rotate: -150deg; } .leaf--right { translate: -6px -30px; rotate: -30deg; } } @-webkit-keyframes shake { 0%, 100% { scale: 1 1; rotate: -15deg; } 25%, 75% { scale: 1 0.8; rotate: 0deg; } 50% { scale: 1 1; rotate: 15deg; } } @keyframes shake { 0%, 100% { scale: 1 1; rotate: -15deg; } 25%, 75% { scale: 1 0.8; rotate: 0deg; } 50% { scale: 1 1; rotate: 15deg; } } @-webkit-keyframes stretch { 0%, 100% { scale: 1 1; } 50% { scale: 0.7 1.5; } } @keyframes stretch { 0%, 100% { scale: 1 1; } 50% { scale: 0.7 1.5; } } body { place-content: end center; } } @layer reset { * { margin: 0; padding: 0; box-sizing: border-box; } } @layer base { body { width: 100vw; min-height: 100vh; font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif; background: oklch(0.68 0.16 115.49); color-scheme: dark only; color: #fff; display: grid; place-content: center; &::before { --line: hsl(0 0% 95% / 0.15); --size: 60px; content: ""; height: 100vh; width: 100vw; position: fixed; background: linear-gradient( 90deg, var(--line) 1px, transparent 1px var(--size) ) 50% 50% / var(--size) var(--size), linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size); -webkit-mask: linear-gradient(-15deg, transparent 30%, white); mask: linear-gradient(-15deg, transparent 30%, white); top: 0; transform-style: flat; pointer-events: none; z-index: -1; } } .tutorials { position: fixed; bottom: 1rem; right: 1rem; z-index: 9999; width: 64px; aspect-ratio: 1; border-radius: 50%; background: #3f517e; padding: 0.5rem; display: grid; place-content: center; transition: all 0.28s linear; &:hover { background: #4161b2; } & svg { display: block; width: 100%; height: 100%; filter: invert(1); } } @media (prefers-reduced-motion: reduce) { *, ::before, ::after { -webkit-animation-delay: -1ms !important; animation-delay: -1ms !important; -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; background-attachment: initial !important; scroll-behavior: auto !important; transition-duration: 0s !important; transition-delay: 0s !important; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } } </style> </head> <body translate="no"> <div class="stage"> <div class="stem"> <div class="cat"> <svg viewBox="0 0 106.39 121.31"> <defs> <linearGradient id="gradient" x1="53.19" y1="119.81" x2="53.19" y2="1.5" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#ffe73d" /> <stop offs.........完整代码请登录后点击上方下载按钮下载查看
网友评论0