CSS hover改变背景图片过渡动画生硬

解决方案：将hover要改变的背景放到另一层，hover时改变该层的透明度。
比如：
如果你想：

div{transition:.5s;}
div:hover{background:url(img);}

这样的过渡动画会很生硬，改成这样你会发现世界瞬间变美好了

div{position:relative;}
div:after{content:'';position:absolute;left:0;right:0;top:0;bottom:0;background:url(img);opacity:0;transition:.5s;}
div:hover:after{opacity:1;}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,898评论 25赞 709
  • css动画
    看了很多视频、文章，最后却通通忘记了，别人的知识依旧是别人的，自己却什么都没获得。此系列文章旨在加深自己的印象，因...
    DCbryant阅读 1,898评论 0赞 4
  • iOS动画学习篇——让你的应用动起来
    概览 在iOS中随处都可以看到绚丽的动画效果，实现这些动画的过程并不复杂，今天将带大家一窥iOS动画全貌。在这里你...
    Yiart阅读 3,895评论 3赞 34
  • CALayer、Core Animation和UIView动画（1）
    概览 在iOS中随处都可以看到绚丽的动画效果，实现这些动画的过程并不复杂，今天将带大家一窥iOS动画全貌。在这里你...
    被吹落的风阅读 1,613评论 1赞 2
  • 寒冬至
    毫无征兆的，冬天来了。十一假期前还是燥热的夏日，出门还需短裤半袖，一进入十月，气温骤降，便愈来愈冷了。裹着大...
    Kianayue阅读 453评论 0赞 1