收缩页面js+css动画，缩小弹框页面移动至头像处

最新推荐文章于 2024-07-14 12:31:08 发布

微笑边缘的金元宝

最新推荐文章于 2024-07-14 12:31:08 发布

阅读量253

点赞数 5

文章标签： javascript css 开发语言

本文链接：https://blog.csdn.net/HeMister/article/details/139123856

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动画示例</title>
  <style>
    /* style.css */
    .popup {
      width: 100vw;
      height: 100vh;
      background-color: lightblue;
      /* 为了演示移动效果，确保弹框是绝对定位 */
      position: absolute;
      left: 50%;
      top: 70px;
      transform: translate(-50%, 0%);
      z-index: 0;
      /* 添加过渡效果 */
      /* transition: all 0.5s cubic-bezier(0.52, 0.22, 0.01, 0.98); */
      transition: all 0.7s cubic-bezier(1, 0.7, 0.5, 1);
    }
    .min {
      width: 50px;
      height: 50px;
      font-size: 1px;
      /* transform: scale(0.7); */
      z-index: 2;
    }
    .min #moveButton {
      width: 10px;
      height: 2px;
      font-size: 1px;
      
    }
    .logo {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 50px;
      height: 50px;
      background-color: rgb(0, 106, 253);
      z-index: 1;
    }
    .flexBox {
      padding-bottom: 60px;
      display: flex;
      flex-direction: column;
      position: relative;
    }
  </style>
</head>
<body>
<div class="flexBox">
  <div class="logo">头像</div>
  <div>
    <div id="popup" class="popup">
      <button id="moveButton">点击移动并缩小弹框</button>
        <span>弹框内容</span>
    </div>
  </div>
</div>
<script>
  document.getElementById('moveButton').addEventListener('click', function() {
    var logo = document.querySelector('.logo');
    var logoBox = logo.getBoundingClientRect()
    var popup = document.getElementById('popup');
    // 缩小弹框大小
    popup.className = 'popup min';
    // 移动到页面的右下角，这里假设页面高度为100vh，宽度为100vw，具体数值可能需要根据实际情况调整
    popup.style.left = `${logoBox.x + 17}px`;
    popup.style.top = `${logoBox.y - 8}px`;
  });
</script>
</body>
</html>

微笑边缘的金元宝

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
收缩页面js+css动画，缩小弹框页面移动至头像处

/ 移动到页面的右下角，这里假设页面高度为100vh，宽度为100vw，具体数值可能需要根据实际情况调整。/* 为了演示移动效果，确保弹框是绝对定位 *//* 添加过渡效果 */
复制链接

扫一扫