pixi实现页面滚动多彩泡泡上升动画效果代码-html代码-BFW代码库

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.........完整代码请登录后点击上方下载按钮下载查看