标签: repeating-linear-gradient

如何用CSS创建实心彩虹边框？

如何使用CSS创建以下彩虹效果？

即顶部圆形边框,固体彩虹色停止(不插入HTML).

颜色是:#c4e17f. #f7fdca, #fad071, #f0766b, #db9dbe, #c49cdf, #6599e2, #61c2e4.

到目前为止我尝试了什么:

.container {
  background: #596678;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-round-rainbow {
  width: 50%;
  height: 50%;
  background: white;
  border-radius: 4px;
  
  background-image: repeating-linear-gradient(to right, #c4e17f 50px, #f7fdca 50px, #fad071 50px, #f0766b, #db9dbe, #c49cdf, #6599e2, #61c2e4);
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
  <div class="top-round-rainbow">
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

css border linear-gradients css3 repeating-linear-gradient

abd*_*hab

2018 02-28

7
推荐指数

1
解决办法

3537
查看次数

动画CSS背景图案,无限滑动

我试图创建一个动画重复模式(水平滑动的斜条纹),作为加载块的占位符(li在这种情况下).

如何让动画平滑/连续,让幻觉模式无限滑动？

如何计算元素width以使图案连续？(条纹不应该看起来破碎/中断).
如何让它循环看起来不是重新启动而是无限滑动？(100%帧应该传递到0%帧而没有任何故障)

我的目标是拥有一个可以添加到任何块的类,并且在视觉上看起来像加载/处理.

注意:没有JS; 纯CSS.

li {
  display: inline-block;
  width: calc(20px * 8); /* how to calculate this, relative to the width (of the pattern or the step), to achieve pattern continuity exactly?
    Of course without doing trying&error to know it should be 24.75px * 8.
  */
  height: 200px;
  background-color: blue;

  background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, black 10px, black 20px);
  animation: loading-slide 1s linear infinite;

}
  @keyframes loading-slide {
    from { background-position: 0% …

Run Code Online (Sandbox Code Playgroud)

css linear-gradients css-animations repeating-linear-gradient

Kam*_*her

2019 08-22

4
推荐指数

1
解决办法

216
查看次数

CSS 方形背景 - 图像

我试图仅使用 CSS 制作一些方形背景，但我只有线条背景，而没有水平线条选项。

这是我的示例代码：

.container{
    background-color:red;
    width: 400px; height:200px; margin:0 auto;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .5) 95px , transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0) 5px, transparent 100%);
    background-size: 100px  100%;
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">

</div>

Run Code Online (Sandbox Code Playgroud)

这就是我正在寻找的结果

这是我现在得到的结果

html css background-image linear-gradients repeating-linear-gradient

24s*_*ron

2019 11-04

3
推荐指数

1
解决办法

6043
查看次数

CSS 背景：重复线性渐变的偏移量

我<div>在 SASS 中绘制了一个网格作为以下方式的重复背景：

background-image:
  repeating-linear-gradient(0deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent $major-grid-size),
  repeating-linear-gradient(-90deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent $major-grid-size),
  repeating-linear-gradient(0deg, $minor-grid-color, $minor-grid-color $minor-grid-weight, transparent $minor-grid-weight, transparent $minor-grid-size),
  repeating-linear-gradient(-90deg, $minor-grid-color, $minor-grid-color $minor-grid-weight, transparent $minor-grid-weight, transparent $minor-grid-size);

Run Code Online (Sandbox Code Playgroud)

它呈现以下方式：