canvas圣诞节下雪天按钮悬浮点击效果代码-html代码-BFW代码库

canvas圣诞节下雪天按钮悬浮点击效果代码

代码语言：html

所属分类：动画

代码描述：canvas圣诞节下雪天按钮悬浮点击效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  min-height: 100vh;
  background-image: radial-gradient(circle at 50% 100%, #1b1b35, #121225);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Open Sans", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

.button {
  position: relative;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 16px;
  min-width: 8em;
  text-align: center;
  color: #fff;
  background-image: linear-gradient(to bottom, #f12828, #a00332, #9f0f31), linear-gradient(to bottom, #ae0034, #6f094c);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.25), inset 0 -1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: 0.2s;
  will-change: transform;
}
.button:active {
  transform: scale(0.92);
  filter: brightness(0.8);
}

.button-hat {
  position: absolute;
  top: -15px;
  left: -17px;
  height: 44px;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25));
}

.canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
</style>


  
  
</head>

<body translate="no">
  <button class="button" type="button">
  Christmas button
  <img class="button-hat" src="//repo.bfw.wiki/bfwrepo/icon/656b01c5c46b4.png" alt="">
</button>

<canvas class="canvas"></canvas>

      <script  >
// snow canvas from https://codepen.io/cojdev/pen/JEdYGP by Charles Ojukwu

const points = [];
const maxDist = 100;

class Point {
  constructor() {
    this.x = Math.random() * (canvas.width + maxDist) - maxDist / 2;
    this.y = Math.random() * (canva.........完整代码请登录后点击上方下载按钮下载查看