一些简单的动画效果
包括 animation,translation,transform 等的基础使用。
常用的 hover 状态切换
背景:
常见的业务需求,按钮在 hover 时切换效果。我写了这样的样式:
.prev {
background: no-repeat url('https://i.loli.net/2021/08/24/kglaB1zyCs5ZvJw.png');
}
/* 第一次页面加载,hover上去会闪烁,因为下面的图片地址会在hover的时候才加载
解决方式: 可以现在页面实例化这个图片
*/
.prev:hover {
background: no-repeat url('https://i.loli.net/2021/08/24/PucWs9XmoknV7yF.png');
}
发生的问题:
在页面第一次加载的时候,hover 上去背景图会闪烁一下才会显示新的图片。
为什么:
在页面加载后未 hover 时,没有加载 hover 时需要的图片,在 hover 之后才加载新的图片,加载的时间会使图标闪烁。