相关疑难解决方法(0)

在线性渐变上使用背景位置的百分比值

有没有办法background-position取出百分比值？目前我的按钮仅适用于一个明确的价值观width和background-position.

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: white;
  font-weight: bold;
  width: 350px;
  height: 50px;
  border: 1px solid green;
  transition: background 0.5s;
  background-repeat: no-repeat;
  background-image: linear-gradient(to left, #2484c6, #1995c8 51%, #00bbce), linear-gradient(to right, #2484c6 0%, #1995c8 51%, #00bbce 76%);
}
.button-pixel {
  background-position: -350px 0px, 0px 0px;
}
.button-pixel:hover {
  background-position: 0px 0px, 350px 0px;
}
.button-percentage …

Run Code Online (Sandbox Code Playgroud)

css background linear-gradients css3 background-position

Mo.*_*Mo.

2019 03-02

12
推荐指数

1
解决办法

1634
查看次数

动画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
查看次数