<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 过渡</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #eeeeee;
}
.content {
width: 800px;
height: 320px;
padding-left: 20px;
margin: 80px auto;
}
.item {
width: 230px;
height: 300px;
text-align: center;
margin-right: 20px;
background-color: #FFF;
float: left;
position: relative;
top: 0;
overflow: hidden; /* 让溢出的内容隐藏起来。意思是让下方的橙色方形先躲起来 */
transition: all .5s; /* 从最初到鼠标悬停时的过渡 */
}
.item img {
margin-top: 30px;
}
.item .desc {
position: absolute;
left: 0;
bottom: -80px;
width: 100%;
height: 80px;
background-color: #ff6700;
transition: all .5s;
}
/* 鼠标悬停时,让 item 整体往上移动5px,且加一点阴影 */
.item:hover {
top: -5px;
box-shadow: 0 0 15px #AAA;
}
/* 鼠标悬停时,让下方的橙色方形现身 */
.item:hover .desc {
bottom: 0;
}
</style>
</head>
<body>
<div class="content">
<div class="item">
<img src="./images/1.png" alt="">
</div>
<div class="item">
<img src="./images/2.png" alt="">
<span class="desc"></span>
</div>
<div class="item">
<img src="./images/3.jpg" alt="">
<span class="desc"></span>
</div>
</div>
</body>
</html>

smyhvae
- 粉丝: 42
最新资源
- 清华数学实验MATLAB使用入门III公开课一等奖优质课大赛微课获奖课件.pptx
- -计算机网络安全基础.ppt
- 基于BS模式的健康锁养生网站的-毕业设计论文-文章研究报告.doc
- 信息化2.0背景下高职学生信息素养的提升策略.docx
- 操作系统复习题整理.doc
- 全国计算机等级考试二级教程——MS-Office高级应用幻灯片课件.ppt
- 浅谈自动化技术在机械工程建设中的应用.docx
- 山东移动通信公司泰安分公司BI系统设计的开题报告.docx
- 会计审计风险因素与信息化审计策略.docx
- 室内可见光通信系统调制与解调技术研究的开题报告.docx
- Access数据库应用基础教程(第五版)教材配套资源ppt课件(完整版).zip
- 计算机程序设计课程教学方法探讨.docx
- 计算机组成原理复习题答案.doc
- 高速公路计算机收费网络安全及对策分析.docx
- 软件与分子模拟的实现.pptx
- 软件培训计划方案.docx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈


