pixi实现页面滚动多彩泡泡上升动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:pixi实现页面滚动多彩泡泡上升动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap'); canvas { position: fixed; inset: 0; } :root { --color-text: #3a0ca3; --color-heading: #f72585; --color-heading-shadow: #921850; --color-button: cyan; --color-button-active: rgba(255,255,255,0.6); } .dark:root { --color-text: #a2d2ff; --color-heading: #ffc8dd; --color-heading-shadow: #9B6379; --color-button: indigo; --color-button-active: rgba(0,0,0,0.3); } .intro { position: relative; z-index: 1; width: 100%; height: 100dvh; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 1em; max-width: 60vw; margin: 0 auto; text-align: center; } h1 { margin: 0; font-family: "Cherry Bomb One", sans-serif; font-size: 10vw; color: var(--color-heading); text-shadow: 0 1px 0 var(--color-heading-shadow), 0 2px 0 var(--color-heading-shadow), 0 3px 0 var(--color-heading-shadow), 0 4px 0 var(--color-heading-shadow), 0 5px 0 var(--color-heading-shadow), 0 6px 0 var(--color-heading-shadow), 0 7px 0 var(--color-heading-shadow), 0 8px 0 var(--color-heading-shadow), 0 0 5px rgba(10,0,0,.05), 0 1px 3px rgba(10,0,0,.2), 0 3px 5px rgba(10,0,0,.2), 0 5px 10px rgba(10,0,0,.2), 0 10px 10px rgba(10,0,0,.2), 0 20px 20px rgba(10,0,0,.3); } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0