js+css实现气泡泡泡发射粒子动画效果代码
代码语言:html
所属分类:粒子
代码描述:js+css实现气泡泡泡发射粒子动画效果代码,点击按钮可控制发射与暂停。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { height: 100%; margin: 0; background-color: #f2f8ff; display: flex; justify-content: center; } .button-container { position: fixed; bottom: 20px; } button { width: 60px; height: 60px; border-radius: 50%; font-size: 24px; line-height: 60px; text-align: center; background: #42ffc0; opacity: 0.85; color: white; border: none; cursor: pointer; image-rendering: pixelated; } .bubble { position: fixed; bottom: 80px; background-color: #add8e6; border-radius: 50%; image-rendering: pixelated; opacity: 0.7; } .bubble-color-1 { background-color: #ff7f7f; } .bubble-color-2 { background-color: #7fcfff; } .bubble-color-3 { background-color: #7fff7f; } .bubble-color-4 { background-color: #ffff7f; } .bubble-color-5 { background-color: #ff7fff; } @keyframes bubbleMove { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(var(--randX), -800px) scale(var(--scaleEnd)); opacity: 0; } } .footer { position: fixed; bottom: 10px; right: 10px; color: black; font-size: 12px; text-align: right; font-family: monospace; } .footer a { color: black; text-decoration: none; } </style> </head> <body translate="no"> <div class="button-container"> <button id="bubbleButton">❚❚</button> </div> <script > var isSpawning = true; var spawnIntervals = []; document.addEventListener("DOMContentLoad.........完整代码请登录后点击上方下载按钮下载查看
网友评论0