更改 window(browser) 大小时如何防止 div 移动？

Question

所以我在css方面并没有真正的经验。我在 https://codepen.io/YusukeNakaya/pen/boyOYm 上看到了一个很酷的动画。 html(哈巴狗) 部分是

// Please typing your favorite word!
- var $text = "HAPPY HALLOWEEN :)"



#ui
  - for (i = 0; i < 40; i++)
    .text #{$text}

和css(scss)部分如下：

// Please change your favorite font-size!
$fontSize: 8rem;



body {
  background: rgba(20, 5, 5, 1);
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  perspective: 800px;
}

div {
  transform-style: preserve-3d;
}

#ui {
  .text {
    position: absolute;
    font-size: $fontSize;
    color: #fff;
    line-height: $fontSize;
    opacity: 0;
    font-family: 'Anton', sans-serif;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;

    @for $i from 0 through 100 {
      $key: $i + 1;
      &:nth-child(#{$key}) {
        $row: floor($i / 20);
        color: rgba(255 - $key * 2, 50 - $key / 2, $key * 3, 1);
        clip-path: polygon(
          floor($i / 2) * 10% - $row * 100% $row * 50%,
          floor($key / 2) * 10% - $row * 100% ceil($key % 2) * 50% + ($row * 50%),
          ceil($key / 2) * 10% - $row * 100% ($row + 1) * 50%
        );
        transform-origin: random(100) - 50 + floor($i / 2) * 10% - $row * 100%  random(100) - 50 + $row * 50%;
        animation: fly#{$key} 5000ms $i * 40ms cubic-bezier(0.360, 0.100, 0.160, 1.000) infinite alternate;
        
        @keyframes fly#{$key} {
          $initX: random(1000) - 500;
          $initY: random(1000) - 500;
          $initZ: random(1000) - 500;
          $initDepth: random(3000) - 2500;
          0% {
            opacity: 0;
            transform: translate(-50%, -50%) rotateX(#{$initX}deg) rotateY(#{$initY}deg) rotateZ(#{$initZ}deg) translateZ(#{$initDepth}px);
          }
          10% {
            opacity: 0;
            transform: translate(-50%, -50%) rotateX(#{$initX}deg) rotateY(#{$initY}deg) rotateZ(#{$initZ}deg) translateZ(#{$initDepth}px);
          }
          90% {
            opacity: 1;
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
          }
          100% {
            opacity: 1;
            transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
          }
        }
      }
    }
  }
}

我想编辑这个动画，当我改变屏幕高度时，文本不会向上或向下移动，而是保持在同一个地方（现在，当我改变屏幕高度时，文本随着 window尺寸）。我自己做不到。谁能帮帮忙

Answer 1

尝试将以下 css 属性添加到 div：

position: absolute;
top: 100px;
left: 100px

那么它应该总是在100,100的位置

Answer 2

您的意思是像浏览器大小一样更改屏幕高度吗？如果是这样，您正在寻找的是媒体查询形式的网络响应能力。媒体查询将允许您随着浏览器大小的变化或在 different/smaller 设备上查看页面时调整屏幕上显示的内容和位置。要更好地了解媒体查询，请查看此页面...

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

更改 window(browser) 大小时如何防止 div 移动？

How to prevent divs moving when changin window(browser) size?

html

css

sass

pug