當旋轉div或全屏中的元素時，如果你知道尺寸，你可以通過內部元素邊界使其足夠寬或高以隱藏它。對于響應式網頁設計，當高度/寬度相差太遠，對角線變得太長時，這似乎是一個問題。

這是一個旋轉背景圖案的例子，它在某些方面起作用，但是一旦它變得太高或太寬，它就會破裂，綠色背景顏色會滲色

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: green;
}

.pattern {
  width: 200%;
  height: 200%;
  position: fixed;
  top: -50%;
  right: -50%;
  background-image: conic-gradient( white 0deg 45deg, black 45deg 90deg, white 90deg 135deg, black 135deg 180deg, white 180deg 225deg, black 225deg 270deg, white 270deg 315deg, black 315deg 360deg);
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  0% {
    transform: rotate(1turn);
  }
}

<div class="pattern"></div>

看這個解決方案，max取100vh或100vw的最大值，把它加到一個變量上，把它加到寬度和高度上，我做了一些其他的改動，讓它按預期工作:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
 }
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: green;
}
.pattern {
  --size: calc(100vmax * 1.5);
  width: var(--size);
  height: var(--size);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: conic-gradient(
    white 0deg 45deg,
    black 45deg 90deg,
    white 90deg 135deg,
    black 135deg 180deg,
    white 180deg 225deg,
    black 225deg 270deg,
    white 270deg 315deg,
    black 315deg 360deg
  );
  animation: rotate 4s linear infinite;
}
@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  0% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

<div class="pattern"></div>

您的代碼可以簡化如下。你只需要一個大的負值

body {
  background: green;
}

.pattern {
  position: fixed;
  inset: -200vmax;
  background: repeating-conic-gradient(white 0 12.5%, black 0 25%);
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(1turn);
  }
}

<div class="pattern"></div>

這在正常情況下保持響應——如果設備不是窄的和超長的。我已經為更窄的寬度添加了@media，否則我無法讓它更好地工作。我很好奇有沒有更好的解決辦法！

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pattern {
  width: 200vw;
  min-width: 200vh;
  height: 200vw;
  min-heigth: 200vh;
  position: fixed;
 
  background-image: conic-gradient(
    white 0deg 45deg,
    black 45deg 90deg,
    white 90deg 135deg,
    black 135deg 180deg,
    white 180deg 225deg,
    black 225deg 270deg,
    white 270deg 315deg,
    black 315deg 360deg
  );
  background-size: cover;
  animation: rotate 4s linear infinite;
}

@media screen and (max-width: 640px){
  .pattern {
    width: 400vh;
    min-width: 400vh;
    height: 400vw;
    min-height: 400vw;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  0% {
    transform: rotate(1turn);
  }
}

<div class="pattern"></div>