如何动画在CSS背景图像上流动的渐变的波纹效应
如何动画在CSS背景图像上流动的渐变的波纹效应
提问于 2019-07-29 03:30:27
不是完全的脉冲动画 --但有点类似(不是径向的，而是的线性) --我试图创造一种透镜耀斑的效果--如果你转动一块玻璃，看到一束光在它上滑动，在CSS中。因此，假设您有一个正常的背景图像，或无缝重复的背景图像，在CSS中。现在你想要在图像上动画一个矩形的光带，这是一种“淡入.全光.淡出”的白光梯度。所以你有一个线性梯度，类似于transparent, semi-transparent-white, white, semi-transparent-white, transparent，它流过背景图像(无缝/重复背景图像，或常规背景图像)，反复流过，就像一个恒定运动的水池。
想知道这种事情在CSS中是否可行，以及如何做到。
也许它只是一个动画线性梯度面具(我不熟悉，但已经听说过)。不确定。
基本上，动画一个半透明的线性梯度，像这样(只是线部分，并设想它是一个简单的矩形)。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-30 11:10:15
你是在找下面这样的东西：
body {
margin:0;
height:100vh;
background:
linear-gradient(to right,transparent 33%,white,transparent 66%),
url(https://picsum.photos/id/10/800/800) center;
background-size:300% 100%,cover;
animation:change 2s linear infinite;
}
@keyframes change {
from { /*Use "to" to change the direction */
background-position:right,center;
}
}
html {
background:#fff;
}
与获取有关计算的更多详细信息有关：在线性梯度上使用背景位置的百分比值
Stack Overflow用户
发布于 2019-07-29 05:30:35
NOt当然，如果这是你要找的东西。这是一次机会！
.ripple{
width: 50px;
height: 50px;
display: block;
position: relative;
background-color: #00ccff;
border-radius: 100%;
opacity: 0.5;
}
.ripple:before, .ripple:after{
content: '\0020';
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
border-radius: 100%;
border: 2px solid #0088ee;
transform: translate(-50%, -50%);
}
.ripple:before{
animation: ripple-one 2.5s infinite;
}
.ripple:after{
animation: ripple-one 3.5s infinite;
}
@keyframes ripple-one{
0%{
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}
@keyframes ripple-two{
0%{
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}<label class="ripple"></label>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57246887
复制相关文章
相似问题
腾讯云开发者
