相关疑难解决方法(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为径向渐变设置动画？

我正在尝试为div框创建放射状渐变光泽效果，但我不确定这样做的最佳方法是什么。我没有发现实现我想要实现的目标的资源；只是光泽会影响看起来像叠加的效果。

我发现的大多数示例看起来都是这样的http://jsfiddle.net/nqQc7/512/。

下面，我显示了我要创建的内容。

#shine-div {
  height: 30vh;
  width: 60vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10px;
  /*background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%);*/
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  animation: colorChange 5s infinite;
}

@keyframes colorChange {
  0% {
    background: radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
  }
  50% {
    background: radial-gradient(ellipse farthest-corner at top, #FFFFFF 0%, #ffb3ff …

Run Code Online (Sandbox Code Playgroud)

css svg radial-gradients css-animations

Rhi*_*ian

2019 08-07

9
推荐指数

3
解决办法

253
查看次数

如何控制径向渐变中椭圆的高度

我正在尝试使用径向渐变作为我的背景，下面是代码。

div {
  width: 778px;
  height: 100px;
  background: radial-gradient(ellipse at top center, green, yellow 229px);
  background-size: 100% 100%;
  background-position: 0% 0%;
}

Run Code Online (Sandbox Code Playgroud)