css CSS动画阴影文本 - 条纹背景

Posted 2021-05-13

:root {
  [...]
  --stripe: 6px;
  --space: 12px;
}
div {
  width: 200px;
  height: 200px;
  border: 5px solid var(--c1);
  background-color: var(--c4);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent
      transparent          var(--space)
      var(--c2)            var(--space)
      var(--c2)   calc(    var(--space) +     var(--stripe))
      transparent calc(    var(--space) +     var(--stripe))
      transparent calc(2 * var(--space) +     var(--stripe))
      var(--c3)   calc(2 * var(--space) +     var(--stripe))
      var(--c3)   calc(2 * var(--space) + 2 * var(--stripe))
    );
}