html - CSS动画在径向渐变背景下不平滑
问题描述
我正在尝试创建一个具有平滑边缘的脉动圆形背景。对于边缘平滑的圆圈,我使用的是这个 CSS 代码:
background: radial-gradient(black, black, transparent, transparent);
使用下面的代码可以很好地为背景颜色设置动画。但是,一旦我用这个径向渐变背景替换背景颜色,动画就会跳跃并且不再平滑。该行为在多个浏览器上是一致的。这是我遇到的问题的最小工作示例:
.global {
background: lightskyblue;
}
.silver {
// background: radial-gradient(black, black, transparent, transparent);
animation: pulse 3s infinite;
}
@keyframes pulse {
0%,
100% {
// background-color: black;
background: radial-gradient(black, transparent, transparent, transparent);
}
50% {
// background-color: white;
background: radial-gradient(black, black, transparent, transparent);
}
}
<body class="global">
<img src="pngwave.png" alt="test" class="silver" />
</body>
我发现这个Stackoverflow问题很相似,但并没有帮助我解决我的问题。
解决方案
你需要动画background-size
.box {
width: 200px;
height: 200px;
background: radial-gradient(farthest-side,black, transparent) center no-repeat;
animation:pulse 2s linear infinite alternate;
}
@keyframes pulse{
from {
background-size:50% 50%;
}
to {
background-size:100% 100%;
}
}
<div class="box"></div>
推荐阅读
- node.js - 将 Sockets.io 与 React.js + Hooks 一起使用;sockets.emit 不工作
- github - 纱线缓存是否有效
- arrays - 为什么我的阵列收到溢出错误
- python - 如何单独分割这些柠檬?
- javascript - Reactjs - 将 API 数据作为道具传递给自动完成组件(Material-UI)
- r - 绘制 igraph 数据的子集,仅按其属性进行子集
- javascript - Display image from API
- c# - 如何使用实体框架记录和拦截所有数据库操作?
- c# - 等待 DependencyProperty 的默认值
- python - 如何将 np.select() 的默认选择设为数组、系列或数据帧的先前值