Question

所以我对CSS没有真正的经验。我在看https://codepen.io/YusukeNakaya/pen/boyOYm上的一个很酷的动画。 html（pug）部分是

// 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);
          }
        }
      }
    }
  }
}

我想编辑此动画，以便当我更改屏幕高度时，文本不会上下移动，而是保持在同一位置（现在，当我更改屏幕高度时，文本会随着窗口大小移动）。我自己不能完全做到这一点。谁能帮忙。

Answer 1

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

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

然后将其始终定位在100,100

Answer 2

您的意思是像浏览器大小一样更改屏幕高度吗？如果是这样，那么您正在寻找的是媒体查询形式的Web响应能力。媒体查询可让您调整浏览器大小变化时或在其他/较小设备上查看页面时显示的内容以及屏幕上的位置。为了进一步了解媒体查询，请访问此页面...

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

更改窗口（浏览器）大小时如何防止div移动？

2 个答案: