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

最新推荐文章于 2024-04-03 04:22:37 发布

原创最新推荐文章于 2024-04-03 04:22:37 发布 · 1.2w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #动画 #鼠标移入 #显示层 #HTML

前端笔记（CSS3动画）专栏收录该内容

6 篇文章

订阅专栏

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

演示效果

这是当鼠标移入会在原来的层上显示另一个层的动画，我这个页面里有很多项都需要用这个效果，之前我想用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>爱好：骑骑单车，打打游戏</p>
        <p>联系方式：</p>
    </div>
</div>

2.为这两个盒子绑定动画

3.为.container-detailed使用hover事件，用纯css3控制显示

贴入完整代码：

<!DOCTYPE html>
<html>
<head>
	<title>团队介绍</title>
	<meta charset = "utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
   <link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/jqtexiao/2/stylesheets/jquery.tooltip/jquery.tooltip.css" type="text/css" />
</head>
<style type="text/css">
	.hover-show1{
  position: absolute;/*注意这两个盒子要设置为绝对定位*/
  width: 400px;
  height: 300px;
  background: #fe4563;
  text-align: center;
  color: #fff;
  opacity: 0;
  /*为鼠标移入时显示的那个盒子的显示绑定动画*/
  -moz-transition:all 1s linear .3s;
  -webkit-transition:all 1s linear .3s;
  -o-transition:all 1s linear .3s;
  -ms-transition:all 1s linear .3s;
  transition:all 1s linear .3s;
  -moz-transform:translateX(-100px);
  -webkit-transform:translateX(-100px);
  -o-transform:translateX(-100px);
  transform:translateX(-100px);
}
.hover-hidden1{
  position: absolute;/*注意这两个盒子要设置为绝对定位*/
  width: 400px;
  text-align: center;
  /*为鼠标移入时隐藏的那个盒子的显示绑定动画*/
  -moz-transition:all 1s ease-out .3s;
  -webkit-transition:all 1s ease-out .3s;
  -o-transition:all 1s ease-out .3s;
  -ms-transition:all 1s ease-out .3s;
  transition:all 1s ease-out .3s;
}
.container-detailed:hover .hover-hidden1{
 -moz-transform:rotate(90deg) scale(0.5) ;
  -webkit-transform:rotate(90deg) scale(0.5);
  -o-transform:rotate(90deg) scale(0.5);
  transform:rotate(90deg) scale(0.5);
  opacity: 0;
}
.container-detailed:hover .hover-show1{
  -moz-transform:translateX(0px);
  -webkit-transform:translateX(0px);
  -o-transform:translateX(0px);
  transform:translateX(0px);
  opacity: 1;
}
</style>
<body>
<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>爱好：骑骑单车，打打游戏</p>
		<p>联系方式：</p>
	</div>
</div>
</body>
<script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</html>

这个动画效果也很棒，当然你也可以修改成自己想要的动画。