如题,菜鸡使用 vue 搭建简单前端项目中。
现在有这么个需求,现有一 div 如下
<div style="background-image: url(a.jpg)">
</div>
目前实现了以一个按钮事件触发,更换这个 background-image 的图片地址。但是因为图片一瞬间切换,重复几次以后感觉非常生硬。请问是否有办法以 css 绑定动画,让图片在切换时渐变地替换,比如在 0.5 秒时间内渐变。
或者是以别的什么方式,不是以 url 切换为事件,而是直接切换 div ?请前端大佬解惑,谢谢。
1
phy25 2021-02-06 07:48:39 +08:00 via Android
|
2
Quarter 2021-02-06 09:02:19 +08:00 via iPhone
我看了一下阿里云的动画,他们把所有帧放到一张图里,然后往下一帧一帧切,就形成动画了,直接过渡形成动画不太现实的😅
|
3
cpstar 2021-02-06 09:25:00 +08:00
把背景变前景
|
4
zuiluo 2021-02-06 10:33:42 +08:00 1
transition 支持 background-images 属性
transition:background-image 1s linear; |
5
meepo3927 2021-02-07 09:31:55 +08:00
|