css+js实现彩色水泡上升漂浮鼠标交互背景动画效果代码
代码语言:html
所属分类:背景
代码描述:css+js实现彩色水泡上升漂浮鼠标交互背景动画效果代码
代码标签: css js 彩色 水泡 上升 漂浮 鼠标 交互 背景 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" rel="stylesheet"> <style> body { margin: 0 auto; background-color: #191a1e; display: flex; align-items: center; justify-content: center; color: white; font-family: "Ubuntu", sans-serif; cursor: pointer; height: 100vh; user-select: none; } .bubble-holder { position: absolute; } .bubble { width: 50px; height: 50px; border: 4px solid white; border-radius: 100%; animation: bubble-animation linear forwards 0.5s; } .bubble-shine { display: block; content: ""; width: 15px; border-radius: 100%; height: 5px; position: absolute; background-color: white; left: 6px; top: 10px; transform: rotate(-45deg); } @keyframes bubble-animation { 0% { transform: translateY(0px); opacity: 1; } 50% { transform: translateY(-250px); opacity: 1; } 100% { transform: translateY(-500px); opacity: 0; } } .bubble-explode { animation: bubble-explode 0.2s forwards; } @keyframes bubble-explode { 90% { transform: scale(2); /* opacity: 0; */ } 100% { transform: scale(2); opacity: 0; } } .title { text-align: center; /* mix-blend-mode: difference; */ z-index: 100; font-size: 30px; } .title h1 { margin: 0px; padding: 0px; } .party-text { background-image: linear-gradient( to right, #0077ee, green, yellow, orange, red ); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } </style> </head> <body translate="no"> <div class="title"> <h1><span class="party-text">PARTY</span> BUBBLES</h1> <p>Click anywhere for party mode</p> </div> <script > var bubbleSize = 50; var bubbleInterval = 300; var currentBubbleInterval = bubbleInterval; var bubbleCanSpawn = true; var isPartyMode = false; var partyModeBubbleInterval = 50; var partyModeTime = 5000; const Bubble = class { constructor(x, y) { this.bubbleSize = Math.floor(Math.random() * (80 - 50 + 1)) + 50; this.x = x - this.bubbleSize / 2; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0