如何在CSS中使用响应式布局填充旋转背景？

huangapple
go评论104阅读模式
英文:

How to fill a rotating background with responsive layout in CSS?

问题

当在 div 内部或全屏旋转元素时，如果您知道尺寸，可以通过使内部元素的边界足够宽或足够高来隐藏它。在响应式网页设计中，当高度/宽度相差太大时，对角线变得太长似乎是一个问题。

这是一个旋转背景图案的示例，在某些方面可以工作，但一旦变得太高或太宽，它就会破裂，绿色背景颜色会渗出：Codepen

  1. * {
  2.   box-sizing: border-box;
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. body {
  8.   width: 100vw;
  9.   height: 100vh;
  10.   overflow: hidden;
  11.   background: green;
  12. }
  14. .pattern {
  15.   width: 200%;
  16.   height: 200%;
  17.   position: fixed;
  18.   top: -50%;
  19.   right: -50%;
  20.   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);
  21.   animation: rotate 4s linear infinite;
  22. }
  24. @keyframes rotate {
  25.   0% {
  26.     transform: rotate(0);
  27.   }
  28.   100% {
  29.     transform: rotate(1turn);
  30.   }
  31. }
  1. <div class="pattern"></div>
英文:

When rotating a element inside a div, or fullscreen, if you know the dimensions you can make it wide or tall enough to hide it by making the inner element bounds. With responsive web design, this seem to be a issue when height/width is too far off each other where the diagonal becomes too long.

Here is a example of an rotating background pattern that works in some aspects, but once it goes too tall or too wide it breaks and green background color bleeds: Codepen

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. * {
  2.   box-sizing: border-box;
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. body {
  8.   width: 100vw;
  9.   height: 100vh;
  10.   overflow: hidden;
  11.   background: green;
  12. }
  14. .pattern {
  15.   width: 200%;
  16.   height: 200%;
  17.   position: fixed;
  18.   top: -50%;
  19.   right: -50%;
  20.   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);
  21.   animation: rotate 4s linear infinite;
  22. }
  24. @keyframes rotate {
  25.   0% {
  26.     transform: rotate(0);
  27.   }
  28.   0% {
  29.     transform: rotate(1turn);
  30.   }
  31. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;pattern&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 3

请看这个解决方案，max获取100vh或100vw的最大值，将其添加到一个变量中，并将其添加到宽度和高度，我做了一些其他更改以使其按预期工作：

  1. * {
  2.     box-sizing: border-box;
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6. body {
  7.   width: 100vw;
  8.   height: 100vh;
  9.   overflow: hidden;
  10.   background: green;
  11. }
  12. .pattern {
  13.   --size: calc(100vmax * 1.5);
  14.   width: var(--size);
  15.   height: var(--size);
  16.   position: fixed;
  17.   top: 50%;
  18.   left: 50%;
  19.   transform: translate(-50%, -50%);
  20.   background-image: conic-gradient(
  21.     white 0deg 45deg,
  22.     black 45deg 90deg,
  23.     white 90deg 135deg,
  24.     black 135deg 180deg,
  25.     white 180deg 225deg,
  26.     black 225deg 270deg,
  27.     white 270deg 315deg,
  28.     black 315deg 360deg
  29.   );
  30.   animation: rotate 4s linear infinite;
  31. }
  32. @keyframes rotate {
  33.   0% {
  34.     transform: translate(-50%, -50%) rotate(0);
  35.   }
  36.   0% {
  37.     transform: translate(-50%, -50%) rotate(360deg);
  38.   }
  39. }
  1. <div class="pattern"></div>
英文:

See this solution, max takes the highest value of 100vh or 100vw, adds it to a variable and adds it to the width and height, I made some other changes to make it work as expected:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. * {
  2.     box-sizing: border-box;
  3.     margin: 0;
  4.     padding: 0;
  5.  }
  6. body {
  7.   width: 100vw;
  8.   height: 100vh;
  9.   overflow: hidden;
  10.   background: green;
  11. }
  12. .pattern {
  13.   --size: calc(100vmax * 1.5);
  14.   width: var(--size);
  15.   height: var(--size);
  16.   position: fixed;
  17.   top: 50%;
  18.   left: 50%;
  19.   transform: translate(-50%, -50%);
  20.   background-image: conic-gradient(
  21.     white 0deg 45deg,
  22.     black 45deg 90deg,
  23.     white 90deg 135deg,
  24.     black 135deg 180deg,
  25.     white 180deg 225deg,
  26.     black 225deg 270deg,
  27.     white 270deg 315deg,
  28.     black 315deg 360deg
  29.   );
  30.   animation: rotate 4s linear infinite;
  31. }
  32. @keyframes rotate {
  33.   0% {
  34.     transform: translate(-50%, -50%) rotate(0);
  35.   }
  36.   0% {
  37.     transform: translate(-50%, -50%) rotate(360deg);
  38.   }
  39. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;pattern&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 1

您的代码可以简化如下。您只需要一个具有inset属性的大负值。

  1. body {
  2.   background: green;
  3. }
  5. .pattern {
  6.   position: fixed;
  7.   inset: -200vmax;
  8.   background: repeating-conic-gradient(white 0 12.5%, black 0 25%);
  9.   animation: rotate 4s linear infinite;
  10. }
  12. @keyframes rotate {
  13.   0% {
  14.     transform: rotate(1turn);
  15.   }
  16. }
  1. <div class="pattern"></div>
英文:

Your code can be simplified like below. All you need a big negative value with inset

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. body {
  2.   background: green;
  3. }
  5. .pattern {
  6.   position: fixed;
  7.   inset: -200vmax;
  8.   background: repeating-conic-gradient(white 0 12.5%, black 0 25%);
  9.   animation: rotate 4s linear infinite;
  10. }
  12. @keyframes rotate {
  13.   0% {
  14.     transform: rotate(1turn);
  15.   }
  16. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;pattern&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

答案3

得分: 0

这在正常情况下保持响应性 - 如果设备不是狭窄且超长的话。我已经为更窄的宽度添加了@media，否则我无法让它工作得更好。我很好奇是否有更好的解决方案！

  1. * {
  2.   box-sizing: border-box;
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. body {
  8.   width: 100vw;
  9.   height: 100vh;
  10.   overflow: hidden;
  11.   background: green;
  12.   display: flex;
  13.   justify-content: center;
  14.   align-items: center;
  15. }
  17. .pattern {
  18.   width: 200vw;
  19.   min-width: 200vh;
  20.   height: 200vw;
  21.   min-height: 200vh;
  22.   position: fixed;
  23.  
  24.   background-image: conic-gradient(
  25.     white 0deg 45deg,
  26.     black 45deg 90deg,
  27.     white 90deg 135deg,
  28.     black 135deg 180deg,
  29.     white 180deg 225deg,
  30.     black 225deg 270deg,
  31.     white 270deg 315deg,
  32.     black 315deg 360deg
  33.   );
  34.   background-size: cover;
  35.   animation: rotate 4s linear infinite;
  36. }
  38. @media screen and (max-width: 640px){
  39.   .pattern {
  40.     width: 400vh;
  41.     min-width: 400vh;
  42.     height: 400vw;
  43.     min-height: 400vw;
  44.   }
  45. }
  47. @keyframes rotate {
  48.   0% {
  49.     transform: rotate(0);
  50.   }
  51.   100% {
  52.     transform: rotate(1turn);
  53.   }
  54. }
  1. <div class="pattern"></div>

希望有所帮助！

英文:

This stays responsive under normal conditions - if device isn't narrow and super long. I have added @media for narrower width, otherwise I couldn't get it to work better. I'm curious if there is a better solution to it!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. * {
  2.   box-sizing: border-box;
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. body {
  8.   width: 100vw;
  9.   height: 100vh;
  10.   overflow: hidden;
  11.   background: green;
  12.   display: flex;
  13.   justify-content: center;
  14.   align-items: center;
  15. }
  17. .pattern {
  18.   width: 200vw;
  19.   min-width: 200vh;
  20.   height: 200vw;
  21.   min-heigth: 200vh;
  22.   position: fixed;
  23.  
  24.   background-image: conic-gradient(
  25.     white 0deg 45deg,
  26.     black 45deg 90deg,
  27.     white 90deg 135deg,
  28.     black 135deg 180deg,
  29.     white 180deg 225deg,
  30.     black 225deg 270deg,
  31.     white 270deg 315deg,
  32.     black 315deg 360deg
  33.   );
  34.   background-size: cover;
  35.   animation: rotate 4s linear infinite;
  36. }
  38. @media screen and (max-width: 640px){
  39.   .pattern {
  40.     width: 400vh;
  41.     min-width: 400vh;
  42.     height: 400vw;
  43.     min-height: 400vw;
  44.   }
  45. }
  47. @keyframes rotate {
  48.   0% {
  49.     transform: rotate(0);
  50.   }
  51.   0% {
  52.     transform: rotate(1turn);
  53.   }
  54. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;pattern&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

Hopefully it helps!

huangapple
  • 本文由 发表于 2023年6月16日 03:23:22
  • 转载请务必保留本文链接：https://go.coder-hub.com/76484929.html
  • animation
  • css
  • css-animations
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定