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 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,462评论 25 708
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,896评论 0 4
  • 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你...
    Yiart阅读 3,869评论 3 34
  • 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你...
    被吹落的风阅读 1,603评论 1 2
  • 毫无征兆的,冬天来了。十一假期前还是燥热的夏日,出门还需短裤半袖,一进入十月,气温骤降,便愈来愈冷了。裹着大...
    Kianayue阅读 453评论 0 1