webgl实现鼠标可交互的恶魔之眼动画代码-html代码-BFW代码库

webgl实现鼠标可交互的恶魔之眼动画代码

代码语言：html

所属分类：动画

代码描述：webgl实现鼠标可交互的恶魔之眼动画代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
<style>
    @font-face {
  font-family: "Tengwar Annatar";
  src: url("https://raw.githubusercontent.com/BlackStar1991/Pictures-for-sharing-/master/lor/fonts/tnganb.woff2") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 30px;
  min-height: 100%;
  margin: 0;
}

html {
  background: #120f17;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: #120f17;
  cursor: url("https://raw.githubusercontent.com/BlackStar1991/Pictures-for-sharing-/master/lor/ring.cur"), pointer;
}

.eye-page,
.evil-eye {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

.evil-eye {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #120f17;
  touch-action: none;
}

.evil-eye__canvas,
.evil-eye__motto {
  position: absolute;
  display: block;
  width: 100%;
  pointer-events: none;
}

.evil-eye__canvas {
  top: -20%;
  left: 0;
  height: 100%;
}

.evil-eye__build {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 1;
  height: 80vh;
  height: 80dvh;
  max-width: none;
  transform: translateX(-50%);
  user-select: none;
  pointer-events: none;
}

.evil-eye__motto {
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 40vh;
  height: 40dvh;
}

</style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>
  <body>
     <main class="eye-page">
    <section class="evil-eye" data-evil-eye aria-label="Animated fiery eye">
      <canvas class="evil-eye__canvas" aria-hidden="true"></canvas>
      <img class="evil-eye__build" src="https://raw.githubusercontent.com/BlackStar1991/Pictures-for-sharing-/master/lor/1.webp" alt="Dark fantasy tower">
      <canvas class="evil-eye__motto" aria-hidden="true"></canvas>
    </section>
  </main> 
    <script type="module" >
        const CONFIG = Object.freeze({
  eyeColor: '#ff5f21',
  backgroundColor: '#120f17',
  intensity: 1.5,
  pupilSize: 0.6,
  irisWidth: 0.25,
  glowIntensity: 0.35,
  scale: 0.8,
  noiseScale: 1,
  pupilFollow: 1,
  flameSpeed: 1,
  noiseTextureSize: 256,
  maxPixelRatio: 2,
});

const VERTEX_SHADER = `
attribute vec2 aPosition;

.........完整代码请登录后点击上方下载按钮下载查看