JavaScript CSS 红心，落雪花，旋转方块，移动登录框。

JavaScript CSS 红心，落雪花，旋转方块，移动登录框。

 

<style>
  /* 容器，旋转中心点 */
  .container {
    /* width:50px;
    height:50px;
    border:1px solid yellow; */

    left: 600px;
    top: 200px;
    /*设置为绝对定位 */
    position: absolute;
    /*设置景深 显示3D效果，没有近大远小的效果*/
    /* perspective: 800px;*/
    /*设置容器为3D空间*/
    transform-style: preserve-3d;
    /* 设置中心点 */
    /* transform-origin:50% 50% 0; */

    /*设置动画 linear匀速、infinite 无限循环、alternate 平滑过渡效果*/
    animation: play 5s linear infinite;
  }

  .container [class^='sub'] {
    position: absolute;
    width: 100px;
    height: 100px;
    top: -50px;
    left: -50px;
    border: 1px solid red;
    border-radius: 50%
  }

  /* rotate 旋转、translate平移 */
  .subY {
    transform: rotateY(90deg);
  }

  .subX {
    transform: rotateX(90deg);
  }

  #img1 {
    transform: translateZ(-100px) translateX(0px) translateY(0px) rotateY(0deg);
  }

  #img2 {
    transform: translateZ(0px) translateX(-100px) translateY(0px) rotateY(90deg);
  }

  #img3 {
    transform: translateZ(0px) translateX(100px) translateY(0px) rotateY(-90deg);
  }

  #img4 {
    transform: translateZ(0px) translateX(0px) translateY(100px) rotateX(-90deg);
  }

  #img5 {
    transform: translateZ(0px) translateX(0px) translateY(-100px) rotateX(-90deg);
  }

  #img6 {
    transform: translateZ(100px) translateX(0px) translateY(0px) rotateX(0deg);
  }

  .container img {
    width: 200px;
    height: 200px;
    position: absolute;
    top: -100;
    left: -100;
    margin: 0 auto;
    color: red;
  }

  .love-line {
    width: 200px;
    height: 200px;
    border: 3px solid red;
    border-color: red;
    /* border-radius: 50% 50% 0/40% 50% 0; */
    /* 左上 右上 右下 左下，缺少的值由它的对角的值代替
    【/】分割 水平半径/垂直半径 */
    border-radius: 50% 0 0 10% /20% 0 0 50%;
    /* border-radius: 50% 0 0/20% 0 0; */
    position: absolute;
    left: 100px;
    top: 200px;
    /* transform: rotateZ(45deg); */
    z-index: 10;
    /* 设置属性变化的过渡效果 */
    transition: all 2s;
  }


  .love-line2 {
    width: 200px;
    height: 200px;
    border: 3px solid yellow;
    position: absolute;
    left: 100px;
    top: 200px;
  }


  .love {
    position: absolute;
    top: 100px;
    left: 200px;
    width: 0;
    height: 0;
    border-top: solid 60px red;
    border-right: solid 50px transparent;
    border-left: solid 50px transparent;
    animation: play 0.1s linear infinite alternate;
  }

  .love:after {
    content: "";
    position: absolute;
    top: -99px;
    left: -52px;
    width: 55px;
    height: 55px;
    background: red;
    border-radius: 50%;
  }

  .love:before {
    content: "";
    position: absolute;
    top: -99px;
    left: -3px;
    width: 55px;
    height: 55px;
    background: red;
    border-radius: 50%;
  }

  @keyframes play {
    from {
      transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
    }

    to {
      transform: rotateZ(360deg) rotateX(360deg) rotateY(360deg);
    }
  }


  .snow {
    position: absolute;
    color: white;
    opacity: 0.7;
    top: -35px;
    z-index: 99;
    animation: ratate 5s linear infinite alternate;
  }


  @keyframes ratate {
    from {
      transform: rotateZ(0deg);
    }

    to {
      transform: rotateZ(360deg);
    }
  }

  .btnLogin {
    background-color: #3a84e8;
    width: 100px;
    height: 30px;
    color: white;
    font-size: 18px;
    border-top: 0;
    border-left: 0;
    border-bottom: 1px solid #2984d7;
    border-right: 1px solid #2984d7;
  }

  .mask {
    left: 0px;
    top: 0px;
    position: absolute;
    background: black;
    opacity: 0.7;
    width: 100%;
    height: 100%;
    z-index: 1000;
    /* display:none; */
  }

  .content {
    position: absolute;
    width: 400px;
    background-color: white;
    margin: 10px;
    padding: 20px;
    z-index: 1001;
  }

  .login {
    background-color: #3a84e8;
    width: 100%;
    height: 42px;
    color: white;
    font-size: 18px;
    border-top: 0;
    border-left: 0;
    border-bottom: 1px solid #2984d7;
    border-right: 1px solid #2984d7;
    border-radius: 5px;
    margin-top: 20px;
  }

  .uid,
  .pwd {
    width: 100%;
    height: 40px;
    font-size: 18px;
    margin-top: 20px;
    padding-left: 25px;
    border-radius: 5px;
    border: 1px solid #2984d7;

  }

  .title {
    background: url('./img/loginlogo.png') no-repeat;
    width: 100%;
    height: 30px;
    position: relative;
  }

  .title a {
    position: absolute;
    right: 0px;
    width: 15px;
    height: 15px;
    background: url('./img/pass_login_icons.png') no-repeat -56px -48px;
  }

  .title a:hover {
    background: url('./img/pass_login_icons.png') no-repeat -72px -48px;
  }

  .title span {
    position: absolute;
    left: 150px;
    line-height: 30px;
    font-size: 18px;
  }
</style>


<body style='background-color:black'>
  <button class="btnLogin">登录</button>
  <!-- 
  <div class="mask"></div>
  <div class="content">
      <div class="title"><span>用户名密码登录</span><a class="closeBtn"></a></div>
      <input type="text" name="" id="" placeholder= "请输入用户名" class="uid">
      <input type="text" name="" id="" placeholder='请输入密码' class="pwd">
      <button class="login">登录</button>
  </div>
   -->
  <!-- 旋转方块的容器 -->
  <div class="container">
    <!-- 旋转方块中心的三个坐标上的圆 -->
    <div class="subZ"></div>
    <div class="subY"></div>
    <div class="subX"></div>
    <!-- 旋转方块的六面贴图 -->
    <img id='img1' src="img/love01.jpg" alt="Love雷">
    <img id='img2' src="img/love02.jpg" alt="Love雷">
    <img id='img3' src="img/love03.jpg" alt="Love雷">
    <img id='img4' src="img/love04.jpg" alt="Love雷">
    <img id='img5' src="img/love05.jpg" alt="Love雷">
    <img id='img6' src="img/love06.jpg" alt="Love雷">
  </div>
  <!-- 旋转的心 -->
  <div class="love"></div>

  <div class="love-line"></div>
  <div class="love-line2"></div>
  <!-- 输入框测试显示遮罩层时，是否可以输入。 -->
  <input type="text" name="" id="" class='uid'>
</body>
<script>
  // 雪花最大值
  var showMaxValue = 35
  // 雪花最小值
  var showMinValue = 5
  // 可视区域的大小
  var cWidth = document.body.offsetWidth;
  var cHeight = document.body.offsetHeight;
  // 创建雪花模板
  var snow = document.createElement('div');
  // 雪花定时落下
  var timer = setInterval(function () {
    // 生成一个雪花
    var snowClone = snow.cloneNode();
    // 雪花是个文字
    snowClone.innerHTML = "❉";
    // 设置雪花样式类名
    snowClone.className = "snow";
    // 设置雪花大小
    snowClone.style.fontSize = (showMinValue + Math.random() * (showMaxValue - showMinValue)) + "px";
    // 设置雪花落下的位置
    snowClone.style.left = Math.random() * cWidth - showMaxValue;
    // 将雪花添加到页面中
    document.body.appendChild(snowClone);
    // 雪花起始高度
    var Top = -showMaxValue;
    // 雪花的落下速度
    var speed = 2 + Math.random() * 10;
    // 定时更改雪花的上边距和透明度，显示出动态落下的效果
    var timerTemp = setInterval(function () {
      snowClone.style.top = Top + 'px';
      snowClone.style.opacity = (cHeight - Top) / cHeight * 0.7;
      Top += speed;
      // 雪花落到最下面的时候，移除雪花和定时器
      if (Top > cHeight - 50) {
        clearInterval(timerTemp);
        document.body.removeChild(snowClone);
      }
    }, 100);
  }, 100);


  window.onload = function () {
    // 选择主页上的登录按钮
    var btnLogin = document.getElementsByClassName('btnLogin')[0];

    // 主页面登录按钮点击事件
    btnLogin.onclick = function () {
      // 创建遮罩层
      var mask = document.createElement('div');
      // 设置遮罩层样式
      mask.className = 'mask';
      // 添加到body中
      document.body.appendChild(mask);
      // 创建登录框
      var content = document.createElement('div');
      // 添加登录框样式
      content.classList.add('content');
      // 设置登录框内容
      content.innerHTML = `
              <div class="title"><span>用户名密码登录</span><a class="closeBtn"></a></div>
              <input type="text" name="" id="" placeholder= "请输入用户名" class="uid">
              <input type="text" name="" id="" placeholder='请输入密码' class="pwd">
              <button class="Login">登录</button>`;
      // 将登录框添加到body中
      document.body.appendChild(content);
      //选择登录框中的关闭按钮
      var closeBtn = document.getElementsByClassName('closeBtn')[0];
      // 设置登录框中的关闭按钮点击事件
      closeBtn.onclick = function () {
        // 当点击关闭按钮时，移除遮罩层和登录框
        document.body.removeChild(mask);
        document.body.removeChild(content);
      }
      // 选择登录框中的登录按钮
      var login = document.getElementsByClassName('login')[0];
      // 设置登录按钮点击事件
      login.onclick = function () {
        document.body.removeChild(mask);
        document.body.removeChild(content);
      }

      var left = 0;
      var top = 0;
      // 选择登录框中的标题部分
      var title = document.getElementsByClassName('title')[0];
      // 设置在标题中按下鼠标按键的处理
      title.onmousedown = function (e) {
        left = e.pageX - parseInt(content.offsetLeft);
        top = e.pageY - parseInt(content.offsetTop);
        // 当鼠标在标题中按下时，添加鼠标移动的消息处理
        document.addEventListener('mousemove', moveHandle);
      }
      // 设置鼠标抬起时的处理
      document.onmouseup = function (e) {
        // 当鼠标抬起时，移除鼠标移动事件
        document.removeEventListener('mousemove', moveHandle);
      }
      // 鼠标移动处理
      function moveHandle(e) {
        var tempT = e.pageY - top;
        if (tempT <= 0) {
          tempT = 0;
        }
        if (tempT >= parseInt(document.body.clientHeight) - parseInt(content.offsetHeight)) {
          tempT = parseInt(document.body.clientHeight) - parseInt(content.offsetHeight);
        }
        var tempL = e.pageX - left;
        if (tempL <= 0) {
          tempL = 0;
        }

        if (tempL >= parseInt(document.body.clientWidth) - parseInt(content.offsetWidth)) {
          tempL = parseInt(document.body.clientWidth) - parseInt(content.offsetWidth);
        }

        content.style.left = tempL + 'px';
        content.style.top = tempT + 'px';

      }

    }
  }

</script>