Web前端前沿技术 2 ____酷炫的3D特效 鼠标进入图片时，显示文本
程序员文章站
2022-05-26 16:11:44
...
先看效果图
主要代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3D特效</title>
<style>
*{padding: 0; margin: 0;}
.out{
width: 900px;
height: 500px;
border: 2px solid #eee;
margin: 100px auto;
}
.out .box{
width: 280px;
height: 200px;
float: left;
margin: 10px;
position: relative; /**因为是被覆盖的， 需要用到 相对定位**/
perspective: 800px; /**舞台 大小*/
}
.out .box img{
width: 280px;
height: 200px;
}
.out .text{
width: 280px;
height: 200px;
line-height: 200px;
background: rgba(160, 160, 160,0.8);
text-align: center;
color: #fff;
font-size: 18px;
position: absolute; /**因为文本要覆盖到图片， 需要用到定位**/
top:0;
left: 0;
transform: rotateX(90deg);
transition: 0.2s;
/***display: none;*/
}
/**鼠标移上去 时，显示文本**/
.out .box:hover .text{
/***display: block;*/
transform: rotateX(0deg);
}
</style>
</head>
<body>
<div class="out">
<div class="box">
<img src="img/g1.jpg" />
<div class="text">详细的内容介绍</div>
</div>
<div class="box">
<img src="img/g3.jpg" />
<div class="text">详细的内容介绍</div>
</div>
<div class="box">
<img src="img/g4.jpg" />
<div class="text">详细的内容介绍</div>
</div>
</div>
</body>
</html>上一篇： Java 堆内存和栈内存详解