css+js实现登录表单背景跟随鼠标滑入滑出动画背景效果代码-html代码-BFW代码库

css+js实现登录表单背景跟随鼠标滑入滑出动画背景效果代码

代码语言：html

代码描述：css+js实现登录表单背景跟随鼠标滑入滑出动画背景效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style>
        *{
          margin:0;
          padding:0;
        }
        body{
          /* 设置body高度为100%窗口高度 */
          height:100vh;
          /* 弹性盒子模型 */
          display: flex;
          /* 限免两个属性是让body里的子类居中 */
          justify-content: center;
          align-items: center;
          background-color: #1d1928;
        }
        .container{
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          width: 350px;
          height: 450px;
          border-radius: 20px;
          background-color: #fff;
          /* 盒子阴影 */
          box-shadow: 15px 15px 10px rgba(33,45,58,0.3);
          overflow: hidden;
          position:relative;
        }
        .container form{
          width: 350px;
          height: 200px;
          display: flex;
          justify-content: space-around;
          flex-direction: column;
          align-items: center;
          z-index: 1;
        }
        .container form .tbx{
          width: 250px;
          height: 40px;
          outline: none;
          border: none;
          border-bottom: 1px solid #ccc;
          background: none;
          color:#333;
          font-size: 15px;
        }
        /* 设置文本框提示文本的样式 */
        .container form .tbx::placeholder{
          color: #333;
          font-size: 15px;
        }
        .container form .sub{
          width: 250px;
          height: 40px;
          outline: none;
          border:1px solid #ccc;
          border-radius: 20px;
          letter-spacing: 5px;
          color:#333;
          background: none;
          cursor: pointer;
          margin-top: 20px;
        }
        .container h1{
          color: #333;
          font-size: 50px;
          letter-spacing: 5px;
          font-weight: 100;
          /* 文字阴影 */
          text-shadow: 5px 5px 5px rgba(33,45,58,0.3);
          z-index: 1;
        }
        /* 设置鼠标进入的样式 */
        .container .in{
          position: absolute;
          top:0;
          left:0;
          display: block;
          width: 0;
          height: 0;
          border-radius: 50%;
          background: #df8686;
          transform: translate(-50%,-50%);
          /* 使用in动画，持续0.5秒，缓出的时间函数，停留在最后一帧 */
          animation: in 0.5s ease-out forwards;
        }
        /* 设置鼠标离开的样式 */
        .container .out{
          position: absolute;
          top:0;
          left:0;
          display: block;
          wi.........完整代码请登录后点击上方下载按钮下载查看