如何使用CSS为径向渐变设置动画？
Rhi*_*ian 9 css svg radial-gradients css-animations
我正在尝试为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 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
}
100% {
background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
}
}<div id="shine-div">
Shine
</div>是否有可能做到这一点？我还想使白色的光晕在顶部平滑地从左向右移动吗？我的尝试是否在正确的轨道上？
Tem*_*fif 13
您可以不同地进行渐变并为位置设置动画。诀窍是将渐变的大小加倍，并使色标的值停止为实际值的一半，以便保持相同的视觉渐变，然后可以从左到右对其进行动画处理。
由于计算了最远的角，因此它看起来与您在动画中定义的渐变不完全相同。
#shine-div {
height: 30vh;
width: 60vw;
margin-right: auto;
margin-left: auto;
border-radius: 10px;
background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%, #ff33ff 12.25%, #800080 31.25%, #b300b3 50%) top right/200% 200%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
animation: colorChange 5s infinite alternate;
}
@keyframes colorChange {
to {
background-position:top left;
}
}<div id="shine-div">
Shine
</div>为了更接近您的渐变，您还必须设置动画background-size （请参阅下面的计算详细信息）
#shine-div {
height: 30vh;
width: 60vw;
margin-right: auto;
margin-left: auto;
border-radius: 10px;
background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 24.5%, #800080 62.5%, #b300b3 100%);
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
animation: colorChange 5s infinite alternate linear;
}
@keyframes colorChange {
from { /* radial-gradient(farthest-corner at top right, ..) */
background-position:left top;
background-size:200% 100%;
}
49.9% {
background-position:left top;
}
50% { /* radial-gradient(farthest-corner at top center, ..) */
background-size:100% 100%;
}
50.1% {
background-position:right top;
}
to { /* radial-gradient(farthest-corner at top left, ..) */
background-position:right top;
background-size:200% 100%;
}
}<div id="shine-div">
Shine
</div>您还可以考虑使用伪元素进行相同的动画，并进行变换以提高性能：
#shine-div {
height: 30vh;
width: 60vw;
margin-right: auto;
margin-left: auto;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
overflow:hidden;
position:relative;
z-index:0;
}
#shine-div:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
width:400%;
height:200%;
background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%, #ff33ff 12.25%, #800080 31.25%, #b300b3 50%);
animation: colorChange 5s infinite alternate linear;
}
@keyframes colorChange {
from {
transform:translateX(-50%);
}
50% {
transform:scaleX(0.75) translateX(-50%)
}
to {
transform:translateX(-25%);
}
}<div id="shine-div">
Shine
</div>更深入
为了使答案更通用，我将详细说明如何从两个不同的位置为任何渐变设置动画。主要技巧是以不同的方式编写渐变，以使其定义为常数（radial-gradient(<constant_definition>）并为动画background-position（background-size在某些情况下还可以）
让我们考虑我们的梯度为background:radial-gradient(Rh Rv at X Y, color1 p1, color2 p2)，其中Rh和Ry分别是我们的椭圆的水平半径和垂直半径（如果两者相等或只使用一个值，那么这是一个圆）。
首先，我们将渐变大小加倍。这个技巧将使我们能够轻松地使用百分比值来调整渐变的位置（在此处进行说明：使用在线性渐变上具有背景位置的百分比值）
如果半径是用像素值定义的，那么我们将其保留，但如果半径是用百分比值定义的，则将其除以2，因为它是相对于他增大的大小而言的。如果两个半径均以百分比表示，我们既可以将它们都除以2，也可以保留它们，然后将色标除以2。
其次，我们删除，at X Y它将使渐变出现在中心，因此我们需要使用校正位置background-position。显然，如果渐变为正，0 0我们需要使用background-position:100% 100%
绿色框是我们背景的两倍，是元素（黑色框）的两倍，红色圆圈是我们的渐变。通过调整背景位置，我们可以直观地将渐变定位在0 0。
对于任何X，Y我们在逻辑上将具有的值background-position:calc(100% - X) calc(100% - Y)
如果X，Y是像素值，我们也可以使用background-position: right -X bottom -Y（请注意，-X不是- X，我们使用负值）
例子：
带像素值
.box {
height:150px;
width:150px;
border:1px solid;
display:inline-block;
}<div class="box" style="background:radial-gradient(20% 100px at 20px 30px,red 30%,blue 60%);"></div>
<div class="box" style="background:radial-gradient(10% 100px,red 30%,blue 60%) right -20px bottom -30px/200% 200%;"></div>
<br>
<div class="box" style="background:radial-gradient(40% 40% at 40px 50px,yellow 30%,blue);"></div>
<div class="box" style="background:radial-gradient(40% 40%,yellow 15%,blue 50%) right -40px bottom -50px/200% 200%;"></div>
<div class="box" style="background:radial-gradient(20% 20%,yellow 30%,blue) right -40px bottom -50px/200% 200%;"></div>有百分比值
.box {
height:150px;
width:150px;
border:1px solid;
display:inline-block;
}<div class="box" style="background:radial-gradient(20% 100px at 50% 10%,red 30%,blue 60%);"></div>
<div class="box" style="background:radial-gradient(10% 100px,red 30%,blue 60%) calc(100% - 50%) calc(100% - 10%)/200% 200%;"></div>
<br>
<div class="box" style="background:radial-gradient(40% 40% at 30% 70%,yellow 30%,blue);"></div>
<div class="box" style="background:radial-gradient(40% 40%,yellow 15%,blue 50%) calc(100% - 30%) calc(100% - 70%)/200% 200%;"></div>
<div class="box" style="background:radial-gradient(20% 20%,yellow 30%,blue) calc(100% - 30%) calc(100% - 70%)/200% 200%;"></div>因此，如果我们想从以下对象制作动画：
radial-gradient(Rh Rv at X Y, color1 p1, color2 p2)
至
radial-gradient(Rh Rv at X1 Y2, color1 p1, color2 p2)
我们以不同的方式编写，并为设置动画background-position：
radial-gradient(Rh Rv at X Y, color1 p1, color2 p2)
radial-gradient(Rh Rv at X1 Y2, color1 p1, color2 p2)
现在，让我们考虑使用更棘手的情况（例如我们的初始示例）farthest-side来定义大小。我们将执行相同的逻辑并转换
radial-gradient(farthest-side at X Y, color1 p1, color2 p2);
至
radial-gradient(farthest-side, color1 p1, color2 p2) Px Py/Sx Sy no-repeat;
我将解释一个轴（X），而另一轴也适用
farthest-side将半径定义为从渐变中心到渐变框最远端的距离（默认情况下，渐变框是元素本身，因为我们没有定义任何大小）。如果X为百分比值，则半径为X，100% - X并且在变换的渐变中，半径为，50%因为我们位于中心，所以半径为。所以我们需要将第一个半径与50%*Sx
如果X是50%那么Sx应该是100%，如果X是0还是100%那么Sx应该是200%。
公式是 Sx = max(X,100% - X)*2
在这种情况下，由于渐变的性质（形状应接触一侧），位置更容易
- 如果
X内[0 50%[Px应该是100%（right） - 如果
X有50%任何价值Px将自Sx=100% - 如果
X在]50% 100%]Pxshoudd之内0%（left）
相关问题：将百分比值与线性渐变的背景位置一起使用
例子：
.box {
height:150px;
width:150px;
border:1px solid;
display:inline-block;
}
.first {
background:radial-gradient(10% 100px,red 30%,blue 60%) calc(100% - 50%) calc(100% - 10%)/200% 200%;
animation:change1 2s linear infinite alternate;
}
.second {
background:radial-gradient(20% 20%,yellow 30%,blue)right -50px bottom 0/200% 200%;
animation:change2 2s linear infinite alternate;
}
@keyframes change1 {
to {
background-position:calc(100% + 10%) calc(100% - 80%);
}
}
@keyframes change2 {
to {
background-position:right -100px bottom -100px;
}
}<div class="box first" ></div>
<div class="box second"></div>对于farthest-corner我们，我们做的完全一样：
radial-gradient(farthest-side at X Y, color1 p1, color2 p2);
radial-gradient(farthest-side, color1 p1, color2 p2) Px Py/Sx Sy no-repeat;
我们也可以将farthest-side（或farthest-corner）转换为Rh Rv并执行之前的计算，但是它对动画没有用，因为我们将有两个半径不同的渐变，而我们需要相同的渐变。
.box {
height:150px;
width:150px;
border:1px solid;
display:inline-block;
}<div class="box" style="background:radial-gradient(farthest-side at 20% 60%, red 20%, blue 100%, yellow 100%)" ></div>
<div class="box" style="background:radial-gradient(farthest-side, red 20%, blue 100%, yellow 50%) 100% 0/calc(80%*2) calc(60%*2)"></div>
<br>
<div class="box" style='background:radial-gradient(farthest-side at 22% 100%,red 40%, blue 100%,yellow 100%)'></div>
<div class="box" style="background:radial-gradient(farthest-side,red 40%, blue 100%,yellow 100%) 100% 0/calc(78%*2) calc(100%*2)"></div>如果X为像素值，则有两种情况：
- 元素具有固定的宽度：在这种情况下，我们可以简单地将的像素值转换
X为宽度的百分比，并执行与上述相同的逻辑。 - 元素具有可变的宽度：在这种情况下，转换渐变非常困难（可能是不可能的），因为形状会根据宽度而变化。什么时候
width-X > X我们有一个可变的半径，什么时候width-X < X我们有一个固定的半径。我认为我们无法使用background-size和来表达这一点background-position。例：
.box {
height:150px;
width:150px;
border:1px solid;
display:inline-block;
}对于closest-side遗嘱来说，考虑到Sx=min(X,100% - X)*2BUT的逻辑相同，我们应该添加no-repeat和background-color等于渐变中的最后一种颜色，因为大小小于100%
<div class="box" style="background:radial-gradient(farthest-corner at 20% 60%, red 20%, blue 50%, yellow 60%)" ></div>
<div class="box" style="background:radial-gradient(farthest-corner, red 20%, blue 50%, yellow 60%) 100% 0%/calc(80%*2) calc(60%*2)"></div>
<br>
<div class="box" style="background:radial-gradient(farthest-corner at 40% 100%, red 20%, blue 50%, yellow 60%)" ></div>
<div class="box" style="background:radial-gradient(farthest-corner, red 20%, blue 50%, yellow 60%) 100% 0%/calc(60%*2) calc(100%*2)"></div>.box {
height:150px;
width:150px;
border:1px solid;
display:inline-block;
}我们可以这样做，closest-corner但是由于渐变会使渐变框溢出，因此我们会遇到一些问题。
<div class="box" style="background:radial-gradient(farthest-side at 20% 60%, red 20%, blue 100%, yellow 100%)" ></div>
<div class="box" style="background:radial-gradient(80% 60% at 20% 60%, red 20%, blue 100%, yellow 100%)" ></div>
<div class="box" style="background:radial-gradient(80% 60%, red 10%, blue 50%, yellow 50%) 80% 40%/200% 200%"></div>body {
margin:0;
height:100vh;
background:radial-gradient(farthest-side at 400px 200px,blue 40%,yellow 50%);
}为了纠正这一点，我们可以将色标除以2，以确保将整个渐变保留在内部。然后我们将尺寸增大两倍，并调整位置
.box {
height:150px;
width:150px;
border:1px solid;
display:inline-block;
}<div class="box" style="background:radial-gradient(closest-side at 20% 60%, red 20%, blue 100%, yellow 100%)" ></div>
<div class="box" style="background:radial-gradient(closest-side, red 20%, blue 100%, yellow 100%) 0 100%/calc(20%*2) calc(40%*2)"></div>
<div class="box" style="background:radial-gradient(closest-side, red 20%, blue 100%, yellow 100%) 0 100%/calc(20%*2) calc(40%*2) no-repeat,yellow"></div>
<br>
<div class="box" style='background:radial-gradient(closest-side at 22% 10%,red 40%, blue 100%,yellow 100%)'></div>
<div class="box" style="background:radial-gradient(closest-side,red 40%, blue 100%,yellow 100%) 0 0/calc(22%*2) calc(10%*2)"></div>
<div class="box" style="background:radial-gradient(closest-side,red 40%, blue 100%,yellow 100%) 0 0/calc(22%*2) calc(10%*2) no-repeat,yellow"></div>即使没有动画，at X Y也更支持不使用的渐变语法。某些类似Safari的浏览器不支持at（如何在Safari中使用径向渐变？）
使用 CSS 变量和新的@property我们可以轻松地制作动画radial-gradient（或任何类型的渐变）。目前仅支持Chrome 和 Edge。
@property --x {
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
#shine-div {
height: 30vh;
width: 60vw;
margin: auto;
border-radius: 10px;
background: radial-gradient(ellipse farthest-corner at var(--x) 0%, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%);
animation: colorChange 5s infinite alternate;
}
@keyframes colorChange {
0% {
--x:0%;
}
50% {
--x:50%;
}
100% {
--x:100%;
}
}<div id="shine-div"></div>我们所要做的就是使用一个--x将使用百分比值的变量来定义位置，然后我们对该变量进行动画处理。就如此容易！
SVG解决方案
作者没有要求使用SVG. 但是以多种方式解决一个问题可能会很有用。
渐变属性值取自 @Temani Afif 响应。
这个问题的SVG径向渐变公式：
<radialGradient id="radGrad" fx="0%" fy="5%" r="200%">
<stop offset="0%" stop-color ="#FFFFFF" />
<stop offset="4%" stop-color ="#ffb3ff" />
<stop offset="12.25%" stop-color ="#ff33ff" />
<stop offset="31.25%" stop-color ="#800080" />
<stop offset="50%" stop-color ="#b300b3" />
</radialGradient>
要为渐变设置动画，您可以使用公式中包含的任何属性。
下面的示例将使用属性fx和fy
- 水平梯度运动的动画
单击矩形后动画开始
<radialGradient id="radGrad" fx="0%" fy="5%" r="200%">
<stop offset="0%" stop-color ="#FFFFFF" />
<stop offset="4%" stop-color ="#ffb3ff" />
<stop offset="12.25%" stop-color ="#ff33ff" />
<stop offset="31.25%" stop-color ="#800080" />
<stop offset="50%" stop-color ="#b300b3" />
</radialGradient>
svg {
width:50%;
height:50%;
}
.txt {
font-family:sans-serif;
font-size:28px;
font-weight:bold;
text-anchor:middle;
fill:#FFDD00;
}- 垂直渐变运动的动画。
<div id="shine-div">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 100">
<defs>
<radialGradient id="radGrad" fx="0%" fy="0%" r="200%">
<stop offset="0%" stop-color ="#FFFFFF" />
<stop offset="4%" stop-color ="#ffb3ff" />
<stop offset="12.25%" stop-color ="#ff33ff" />
<stop offset="31.25%" stop-color ="#800080" />
<stop offset="50%" stop-color ="#b300b3" />
</radialGradient>
</defs>
<g id="gr1" >
<rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%"/>
<text class="txt" x="50%" y="60%"> Sun shine </text>
</g>
<animate xlink:href="#radGrad"
attributeName="fx"
dur="3s"begin="gr1.click"
values="0%;100%;0%"
repeatCount="1"
restart="whenNotActive" />
</svg>
</div>svg {
width:50%;
height:50%;
}
.txt {
font-family:sans-serif;
font-size:28px;
font-weight:bold;
text-anchor:middle;
fill:#FFDD00;
}- 对角移动渐变
两个属性同时动画：fx和fy
<div id="shine-div">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 100">
<defs>
<radialGradient id="radGrad" fx="48%" fy="0%" r="200%">
<stop offset="0%" stop-color ="#FFFFFF" />
<stop offset="4%" stop-color ="#ffb3ff" />
<stop offset="12.25%" stop-color ="#ff33ff" />
<stop offset="31.25%" stop-color ="#800080" />
<stop offset="50%" stop-color ="#b300b3" />
</radialGradient>
</defs>
<g id="gr1" >
<rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%"/>
<text class="txt" x="50%" y="60%"> Sun shine </text>
</g>
<animate xlink:href="#radGrad"
attributeName="fy"
dur="2s"begin="gr1.click"
values="0%;50%;50%;100%;50%;50%;0%"
keyTimes="0;0.1;0.5;0.6;0.7;0.9;1"
repeatCount="1"
restart="whenNotActive" />
</svg>
</div>svg {
width:50%;
height:50%;
}
.txt {
font-family:sans-serif;
font-size:28px;
font-weight:bold;
text-anchor:middle;
fill:#FFDD00;
}| 归档时间： |
|
| 查看次数： |
253 次 |
| 最近记录： |