径向渐变背景图案

Question

我正在尝试使用纯CSS3来实现下面的效果。我认为重复径向渐变是正确的路径，但我无法弄清楚如何使径向渐变水平地“从大到小”。有什么建议吗？

这是我最接近的jsfiddle。它很接近，但不会横向“从大到小”。

.dotted {
  padding: 2.25em 1.6875em;
    background-color: #ffb55d;
  background-image: -webkit-repeating-radial-gradient(center center, #ff9d4b, #ff9d4b 2px, transparent 2px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, #ff9d4b, #ff9d4b 2px, transparent 2px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, #ff9d4b, #ff9d4b 2px, transparent 2px, transparent 100%);
  background-image: repeating-radial-gradient(center center, #ff9d4b, #ff9d4b 2px, transparent 2px, transparent 100%);
  -webkit-background-size: 5px 5px;
  -moz-background-size: 3px 3px;
  background-size: 5px 5px;
}

Answer 1

修改了jbutler483在codepen上的发现（只是为了好玩）（使用Chrome）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background: rgba(0,0,0,1);">
  <div class='halftone' height='100px'></div>
  <div class='halftone2' height='100px'></div>
</div>

<style>
  * {
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
  }
  html,
  body {
    height: 100%;
  }
  div {
    height: 100%;
    background-color: 0;
  }
  .halftone {
    /*
      size progressively decreasing 
    */
    background-image: radial-gradient(circle, dodgerblue 85%, transparent 0), radial-gradient(circle, dodgerblue 80%, transparent 0), radial-gradient(circle, dodgerblue 75%, transparent 0), radial-gradient(circle, dodgerblue 70%, transparent 0), radial-gradient(circle, dodgerblue 65%, transparent 0), radial-gradient(circle, dodgerblue 60%, transparent 0), radial-gradient(circle, dodgerblue 55%, transparent 0), radial-gradient(circle, dodgerblue 50%, transparent 0), radial-gradient(circle, dodgerblue 45%, transparent 0), radial-gradient(circle, dodgerblue 40%, transparent 0), radial-gradient(circle, dodgerblue 35%, transparent 0), radial-gradient(circle, dodgerblue 30%, transparent 0), radial-gradient(circle, dodgerblue 25%, transparent 0), radial-gradient(circle, dodgerblue 20%, transparent 0);
    /*
      change all other values when changing this.
      I suppose this'd be easier to do in Sass.
    */
    background-size: 1em 1em;
    /*
      If you want a vertical pattern change to repeat-x, also remember to  switch the background-positions' values. Eg. "2em 0" becomes "0 2em".
    */
    background-repeat: repeat-y;
    /*
      based on background-size value
    */
    background-position: 0 0, 1em 0, 2em 0, 3em 0, 4em 0, 5em 0, 6em 0, 7em 0, 8em 0, 9em 0, 10em 0, 11em 0, 12em 0, 13em 0;
  }
  .halftone2 {
    /*
      size progressively increasing 
    */
    background-image: radial-gradient(circle, dodgerblue 20%, transparent 0), radial-gradient(circle, dodgerblue 25%, transparent 0), radial-gradient(circle, dodgerblue 30%, transparent 0), radial-gradient(circle, dodgerblue 35%, transparent 0), radial-gradient(circle, dodgerblue 40%, transparent 0), radial-gradient(circle, dodgerblue 45%, transparent 0), radial-gradient(circle, dodgerblue 50%, transparent 0), radial-gradient(circle, dodgerblue 55%, transparent 0), radial-gradient(circle, dodgerblue 60%, transparent 0), radial-gradient(circle, dodgerblue 65%, transparent 0), radial-gradient(circle, dodgerblue 70%, transparent 0), radial-gradient(circle, dodgerblue 75%, transparent 0), radial-gradient(circle, dodgerblue 80%, transparent 0), radial-gradient(circle, dodgerblue 85%, transparent 0);
    /*
      change all other values when changing this.
      I suppose this'd be easier to do in Sass.
    */
    background-size: 1em .8em;
    /*
      If you want a vertical pattern change to repeat-x, also remember to  switch the background-positions' values. Eg. "2em 0" becomes "0 2em".
    */
    background-repeat: repeat-y;
    /*
      based on background-size value
    */
    background-position: 0 0, 1em 0, 2em 0, 3em 0, 4em 0, 5em 0, 6em 0, 7em 0, 8em 0, 9em 0, 10em 0, 11em 0, 12em 0, 13em 0;
  }
  .halftone {
    animation: rt 4s infinite;
    animation-direction: alternate;
  }
  .halftone2 {
    animation: rt2 4s infinite;
    animation-direction: alternate;
  }
  @keyframes rt {
    0% {
      opacity: 0;
      transform: rotateY(0deg);
    }
    25% {
      opacity: 1
    }
    50% {
      opacity: 0;
      transform: rotateY(180deg);
    }
    75% {
      opacity: 1
    }
    100% {
      opacity: 0;
      transform: rotateY(360deg);
    }
  }
  @keyframes rt2 {
    0% {
      opacity: 1;
      transform: rotateY(0deg) translateY(-405px);
    }
    25% {
      opacity: 0
    }
    50% {
      opacity: 1;
      transform: rotateY(180deg) translateY(-405px);
    }
    75% {
      opacity: 0
    }
    100% {
      opacity: 1;
      transform: rotateY(360deg) translateY(-405px);
    }
  }
</style>

Answer 2

更接近您所寻找的内容：

.dotted {
    height:100px;
    width:100%;
    background: radial-gradient(orange 15%, transparent 16%) 1px 1px,
    radial-gradient(orange 15%, transparent 16%) 8px 8px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color:#ffb55d;
    background-size:16px 16px;
}

Answer 3

好的，看起来这不可能通过CSS3。我确实让它与图像一起工作，所以我猜这是最好的答案。