JS实现点击登录弹出窗口同时背景色渐变动画效果

JS实现点击登录弹出窗口同时背景色渐变动画效果可以分为以下几个步骤：

1. HTML结构的修改：需要在HTML中添加一个按钮和一个弹窗，同时要添加一个全屏蒙层，作为背景色渐变的动画效果。

<button id="loginBtn">登录</button>
<div id="loginModal">
  <form>
    ...
  </form>
</div>
<div id="mask"></div>

1. CSS样式的设置：定义按钮和弹窗的样式，同时设置全屏蒙层的样式，使其覆盖整个屏幕，并且初始颜色为透明。

#loginBtn {
  padding: 10px 20px;
  background-color: #337ab7;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#loginModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 100;
}

#mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 99;
}

1. JS事件的绑定：需要给按钮添加一个点击事件，当点击按钮时，弹窗和蒙层同时出现。同时需要设置背景颜色渐变的动画效果。

// 获取按钮和弹窗元素
var loginBtn = document.getElementById('loginBtn');
var loginModal = document.getElementById('loginModal');
var mask = document.getElementById('mask');

// 给按钮添加点击事件
loginBtn.addEventListener('click', function() {
  // 显示弹窗和蒙层
  loginModal.style.display = 'block';
  mask.style.display = 'block';

  // 设置背景颜色渐变动画效果
  var opacity = 0;
  var animationId = setInterval(function() {
    opacity += 0.05;
    mask.style.backgroundColor = 'rgba(0, 0, 0, ' + opacity + ')';

    if (opacity >= 0.7) {
      clearInterval(animationId);
    }
  }, 16);
});

1. JS事件的解绑：需要给弹窗和蒙层添加点击事件，当点击弹窗或蒙层时，弹窗和蒙层同时消失。同时需要取消背景颜色渐变的动画效果。

// 给弹窗和蒙层添加点击事件
loginModal.addEventListener('click', closeLoginModal);
mask.addEventListener('click', closeLoginModal);

// 关闭弹窗和蒙层的函数
function closeLoginModal() {
  // 取消背景颜色渐变动画效果
  clearInterval(animationId);

  // 隐藏弹窗和蒙层
  loginModal.style.display = 'none';
  mask.style.display = 'none';
}

示例1：

<button id="loginBtn">登录</button>
<div id="loginModal">
  <form>
    <label for="username">用户名</label>
    <input type="text" id="username">
    <br>
    <label for="password">密码</label>
    <input type="password" id="password">
    <br>
    <button type="submit">提交</button>
  </form>
</div>
<div id="mask"></div>

<script>
var loginBtn = document.getElementById('loginBtn');
var loginModal = document.getElementById('loginModal');
var mask = document.getElementById('mask');

loginBtn.addEventListener('click', function() {
  loginModal.style.display = 'block';
  mask.style.display = 'block';

  var opacity = 0;
  var animationId = setInterval(function() {
    opacity += 0.05;
    mask.style.backgroundColor = 'rgba(0, 0, 0, ' + opacity + ')';

    if (opacity >= 0.7) {
      clearInterval(animationId);
    }
  }, 16);
});

loginModal.addEventListener('click', closeLoginModal);
mask.addEventListener('click', closeLoginModal);

function closeLoginModal() {
  clearInterval(animationId);

  loginModal.style.display = 'none';
  mask.style.display = 'none';
}
</script>

示例2：

<button id="loginBtn">登录</button>
<div id="loginModal">
  <form>
    <label for="email">邮箱</label>
    <input type="email" id="email">
    <br>
    <label for="password">密码</label>
    <input type="password" id="password">
    <br>
    <button type="submit">提交</button>
  </form>
</div>
<div id="mask"></div>

<style>
#loginBtn {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#loginModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 100;
}

#mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 99;
}
</style>

<script>
var loginBtn = document.getElementById('loginBtn');
var loginModal = document.getElementById('loginModal');
var mask = document.getElementById('mask');

loginBtn.addEventListener('click', function() {
  loginModal.style.display = 'block';
  mask.style.display = 'block';

  var opacity = 0;
  var animationId = setInterval(function() {
    opacity += 0.05;
    mask.style.backgroundColor = 'rgba(0, 0, 0, ' + opacity + ')';

    if (opacity >= 0.7) {
      clearInterval(animationId);
    }
  }, 16);
});

loginModal.addEventListener('click', closeLoginModal);
mask.addEventListener('click', closeLoginModal);

function closeLoginModal() {
  clearInterval(animationId);

  loginModal.style.display = 'none';
  mask.style.display = 'none';
}
</script>