js登录页面放大镜特效

在JavaScript中创建登录页面的放大镜特效通常涉及到CSS和HTML的配合，以及可能的JavaScript交互。这种效果常常用于输入框周围，当用户将鼠标悬停在输入框上时，显示放大镜图标并让输入框内容看起来像是通过放大镜观看一样。

以下是基本步骤：

1. **HTML**:

   <input type="text" id="usernameInput">
   <img src="magnifying_glass.svg" class="magnifier" alt="放大镜" id="magnifier">

2. **CSS** (添加一些基础样式和 hover 效果):

   input[type=text] {
     display: inline-block;
   }
   .magnifier {
     position: absolute;
     cursor: pointer;
     opacity: 0;
     transition: opacity 0.3s ease;
   }
   #usernameInput:hover + .magnifier {
     opacity: 1;
   }

3. **JavaScript (Optional)**:
- 如果想要更生动的效果，可以添加事件监听器，如`mouseenter`和`mouseleave`：

   const magnifier = document.getElementById('magnifier');
   const usernameInput = document.getElementById('usernameInput');

   magnifier.addEventListener('mouseenter', () => {
     magnifier.classList.add('active');
   });

   magnifier.addEventListener('mouseleave', () => {
     magnifier.classList.remove('active');
   });
   
   magnifier.addEventListener('click', () => {
     if (magnifier.classList.contains('active')) {
       magnifier.classList.remove('active');
     } else {
       magnifier.classList.add('active');
     }
   });

这里假设`.active`是一个CSS类，它会改变放大镜的大小、位置或者其他视觉变化。