如何将指纹按钮与霓虹加载圆圈居中对齐并实现点击触发动画

需求1：指纹按钮与霓虹圆圈中心对齐 #

问题根源是原代码将按钮嵌套在生成霓虹线条的.block元素内，导致按钮位置偏移。解决方案是调整结构并设置正确的居中定位：

• 把按钮从.block中移出，作为.rating容器的直接子元素
• 用绝对定位+transform: translate(-50%, -50%)实现按钮在圆圈中心的完美对齐

需求2：点击按钮启动霓虹圆圈动画 #

原代码页面加载时自动触发动画，改为点击触发的核心是通过动态添加动画类控制播放时机：

• 移除.block默认的动画属性，单独定义.animate类承载动画效果
• 在按钮点击事件中，给所有.block元素添加.animate类启动动画

完整修改后的代码 #

HTML #

<script src="https://kit.fontawesome.com/fd3faaa138.js" crossorigin="anonymous"></script>

<div class="card">
  <div class="rating">
    <button class="btn">
      <span class="material-icons-outlined">
        <i class='fas fa-fingerprint'></i>
      </span>
    </button>
    <div class="block"></div>
  </div>
</div>

CSS #

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: radial-gradient(#444, #222);
}

html,
body,
span,
button {
  cursor: none;
}

.card {
  position: relative;
  width: 200px;
  height: 200px;
  z-index: 100;
}

.card .rating {
  position: relative;
  width: 100%;
  height: 100%;
}

.card .rating .block {
  position: absolute;
  width: 2px;
  height: 10px;
  background: #000;
  left: 50%;
  transform-origin: 50% 100px;
  opacity: 0;
}

.card .rating .block.animate {
  animation: animate 2s linear forwards;
}

@keyframes animate {
  to {
    opacity: 1;
  }
}

.card .rating .block:nth-child(-n+51) {
  background: aquamarine;
  box-shadow: 0 0 15px aquamarine, 0 0 30px #0f0;
}

.circle-cursor {
  position: fixed;
  width: 10px;
  height: 10px;
  background-color: rgb(135, 206, 235);
  border-radius: 50%;
  pointer-events: auto;
  z-index: 9999;
  display: none;
}

.btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7em;
  height: 7em;
  border-radius: 50%;
  outline: none;
  border: 4px #090909 solid;
  background: linear-gradient(145deg, #171717, #444245);
  box-shadow: inset 2px 2px 0px #7d7c7e, inset -2px -2px 0px #1c1c1c;
  color: #a6a6a6;
  z-index: 10;
}

.btn span {
  font-size: 2.9em;
}

.btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: inherit;
  background: linear-gradient(145deg, #262626, #606060);
  width: 7.25em;
  height: 7.25em;
  z-index: -1;
  box-shadow: 11px 11px 22px #141414, -11px -11px 22px #525252;
}

.button-clicked {
  background: linear-gradient(-185deg, #131313, #444245);
  box-shadow: inset -2px -2px 0px #5e5e5e, inset 2px 2px 0px #1c1c1c;
}

.button-hover {
  background: #5e5e5e;
}

.icon-clicked {
  color: #0fa;
  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff;
}

JavaScript #

document.addEventListener('DOMContentLoaded', function() {
  var circleCursor = document.createElement('div');
  circleCursor.className = 'circle-cursor';
  document.body.appendChild(circleCursor);
  
  document.addEventListener('mousemove', function(e) {
    circleCursor.style.left = e.clientX + 'px';
    circleCursor.style.top = e.clientY + 'px';
    circleCursor.style.display = 'block';
  });

  const rating = document.querySelector('.rating');

  for (var i = 1; i < 100; i++) {
    const block = document.createElement('div');
    block.className = 'block';
    block.style.transform = `rotate(${3.6 * i}deg)`;
    block.style.animationDelay = `${i/40}s`;
    rating.appendChild(block);
  }

  const btn = document.querySelector('.btn');

  btn.addEventListener('click', function() {
    btn.classList.toggle('button-clicked');
    btn.firstElementChild.classList.toggle('icon-clicked');
    // 启动霓虹圆圈动画
    document.querySelectorAll('.block').forEach(block => {
      block.classList.add('animate');
    });
  });

  btn.addEventListener('mouseover', function() {
    btn.classList.add('button-hover');
  });

  btn.addEventListener('mouseout', function() {
    btn.classList.remove('button-hover');
  });
});

内容的提问来源于stack exchange，提问作者Ishan Saran