css实现文字字母依次拆分弹跳动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现文字字母依次拆分弹跳动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:700"> <style> * { box-sizing: border-box; } body { --hue: 60; font-family: Montserrat, sans-serif; margin: 0; padding: 1rem; min-height: 100vh; display: grid; place-items: center; background: hsl(var(--hue) 100% 75%); } h1 { margin: 0; font-size: clamp(2rem, 3vw, 5rem); display: flex; } span { --stagger: -200ms; --delay: calc(var(--i) * var(--stagger, 200ms)); } span > span { display: block; animation: bounce 2000ms var(--delay, 0ms) infinite; transform-origin: center bottom; z-index: 1; } span:not(span > span)::after { content: ''; display: block; width: 100%; aspect-ratio: 1; background: hsl(var(--hue) 50% 45% / 0.1); transform: translate3d(0, 3.8em, 0) scaleY(0.3) scaleX(0.8); transform-origin: center top; border-radius: 100%; filter: blur(0.08em); animation: shadow 2000ms var(--delay, 0ms) infinite; } @keyframes bounce { 0% { transform: translate3d(0, 0, 0) rotateY(0deg) scaleY(1); animation-timing-function: ease-in; } 45% { transform: translate3d(0, 4em, 0) rotateY(180deg) scaleY(1); animation-timing-function: ease-in; } 50% { transform: translate3d(0, 4em, 0) rotateY(180deg) scaleY(0.2); animation-timing-function: ease-out, ease-out, linear; } 100% { transform: translate3d(0, 0, 0) rotateY(0) scal.........完整代码请登录后点击上方下载按钮下载查看
网友评论0