This question already has answers here:
How to animate a radial-gradient using CSS?
(3 个回答)
6 个月前关闭。
我想使用径向渐变
http://jsfiddle.net/odsb1fjh/2/
我该怎么做才能为这个径向渐变设置动画以在 div 上从左到右无限移动?
我已经尝试过动画和关键帧背景位置:左/右下;但不起作用。
(3 个回答)
6 个月前关闭。
我想使用径向渐变
radial-gradient(circle, rgba(255,255,255,0.8) 0, rgba(255,255,255,0) 100%)
为背景设置动画,将其从左向右移动http://jsfiddle.net/odsb1fjh/2/
我该怎么做才能为这个径向渐变设置动画以在 div 上从左到右无限移动?
我已经尝试过动画和关键帧背景位置:左/右下;但不起作用。
最佳答案
“但我们可以看到“正方形”的边界在哪里是光径向” - 为什么要使用径向背景,只需使用:
div
div {
position: absolute;
width: 250px;
height: 250px;
background-color: black;
background-image: url(http://frontend.lostboys.nl/presenations/Icons-fonts/img/chrome.png);
overflow: hidden;
}
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(255, 255, 255);
background: linear-gradient(
90deg,
rgba(250, 250, 250, 0) 0%,
rgba(250, 250, 250, 0.5) 60%,
rgba(250, 250, 250, 0) 100%
);
-webkit-animation: animation 3s ease-in-out infinite;
}
@-webkit-keyframes animation {
from {
left: -250px;
}
to {
left: 250px;
}
}
<div></div>
关于css - 动画径向渐变 CSS3 : move from left to right?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26176095/
10-12 06:11