css变量实现关键帧动画效果代码
代码语言:html
所属分类:动画
代码描述:css变量实现关键帧动画效果代码,通过关键帧中使用css 变量实现了这个动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @keyframes bounce { from { transform: translateY(0px); } to { transform: translateY(var(--bounce-height)); } } body { height: 300px; display: flex; justify-content: center; align-items: center; gap: 16px; } .box { width: 60px; height: 60px; background: var(--bg); border-radius: 4px; will-change: transform; } /* If you're not seeing the boxes bounce, you might have "reduce motion" selected in your OS! */ @media (prefers-reduced-motion: no-preference).........完整代码请登录后点击上方下载按钮下载查看
网友评论0