用css3实现鼠标移入在原来的层上面显示另一个层的动画效果

最新推荐文章于 2022-09-02 13:49:22 发布

dengdengda

最新推荐文章于 2022-09-02 13:49:22 发布

阅读量1.2w

点赞数 1

分类专栏：前端笔记（CSS3动画）文章标签： css3 动画鼠标移入显示层 HTML

本文链接：https://blog.csdn.net/dengdengda/article/details/49559281

版权

本文介绍如何使用CSS3实现鼠标移入时在原有层上方展示另一个层的动画效果，解决js实现时位置固定和窗口缩放导致的问题。通过创建两个切换显示的盒子并绑定动画，结合.container-detailed的hover事件，实现简洁且流畅的动画过渡。

摘要由CSDN通过智能技术生成

演示效果

这是当鼠标移入会在原来的层上显示另一个层的动画，我这个页面里有很多项都需要用这个效果，之前我想用js来实现这个效果，不过弹出来的层的位置不好固定，特别是页面里有太多这个效果，而最麻烦的还是当窗口缩小时弹出的层会乱飘，后来我使用css3动画来实现，不仅在切换间很流畅有一些酷炫的动画效果，而且代码很简洁。

1. 首先在一个.container-detailed的盒子里建两个盒子，这两个盒子就是用来切换显示和隐藏的。

<div class="container-detailed">
    <div class="hover-hidden1">
        <img src="images/csdn-2.png" class="img-circle" width="280px" height="280px">
    </div>
    <div class="hover-show1">
        <p>某某某   |   安卓开发</p>
        <p>爱好：骑骑单车