纯css实现一个火花四溅动画效果代码
代码语言:html
所属分类:动画
代码描述:纯css实现一个火花四溅动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; align-items: center; justify-content: center; background-color: #577399; min-height: 100vh; --sparkler-gun-powder: #706677; --sparkler-burnt: #252525; --sparkler-ember: #ff9f1c; } .sparkler-light { position: absolute; width: 9rem; height: 9rem; margin-left: -4.4rem; margin-top: -1.4rem; animation: sparkler-light-anim 20s infinite; } .sparkler-light::after { content: ''; display: block; border-radius: 50%; width: 9rem; height: 9rem; background-color: rgba(255, 255, 230, 0.05); animation: sparkler-light-pulsating 2s infinite linear; } .spark { position: absolute; width: 0.1rem; height: 0.1rem; bottom: 4.3rem; left: 4.35rem; transform: rotate(var(--spark-rotate)); } .spark::after { content: ''; display: block; position: absolute; bottom: 0; width: 0.1rem; height: 2rem; border-radius: 0.1rem; opacity: 0; background-color: white; transform-origin: bottom center; animation: sparkler-sparkle 0.5s infinite linear; animation-delay: var(--spark-delay); } @keyframes sparkler-light-anim { 0% { bottom: 11.5rem } 100% { bottom: 1.5rem; } } @keyframes sparkler-light-pulsating { 0% { transform: scale(1); } 25% { transform: scale(1.1); } 75% { transform: scale(0.9); } 100% { transform: scale(1); } } @keyframes sparkler-sparkle { 0% { transform: translateY(-0.5rem) scaleY(0.25); opacity: 0; } 10% { transform: translateY(-1rem) scaleY(0.5); opacity: 0.35; } 30% { transform: translateY(-2rem) scaleY(0.5); opacity: 0.7; } 50% { transform: translateY(-4rem) scaleY(1.5); opacity: 0.7; } 51% { opacity: 0; transform: translateY(-4rem) scaleY(1); } 100% { opacity: 0; transform: translateY(0) scaleY(0.25); } } </style> </head> <body > <div class="sparkler-light"> <div class="spark" style="--spark-rotate: 10deg; --spark-delay: 223ms"></div> <div class="spark" style="--spark-rotate: 20deg; --spark-delay: 844ms"></div> <div class="spark" style="--spark-rotate: 30deg; --spark-delay: 130ms"></div> <div class="spark" style="--spark-rotate: 40deg; --spark-delay: 747ms"></div> <div class="spark" style="--spark-rotate: 50deg; --spark-delay: 928ms"></div> <div class="spark" style="--spark-rotate: 60deg; --spark-delay: 392ms"></div> <div class="spark" style="--spark-rotate: 70deg; --spark-delay: 483ms"></div> <div class="spark" style="--spark-rotate: 80deg; --spark-delay: 621ms"></div> <div class="spark" style="--spark-rot.........完整代码请登录后点击上方下载按钮下载查看
网友评论0