<!--
* @Author: chentao 294446993@qq.com
* @Date: 2023-06-15 16:01:40
* @LastEditors: chentao 294446993@qq.com
* @LastEditTime: 2023-06-15 20:10:16
* @FilePath: \estate-nft-webe:\software\webApplication\test.html
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Document</title>
<style>
/* 这个是外面最大容器 */
.container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
/* 这个是上面跟顶部容器 */
.top-div, .bottom-div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #e0e0e0;
transition: transform 1s ease-in-out;
border: 1px solid #EDEDED;
}
.top-div {
transform: translateY(0);
}
.bottom-div {
transform: translateY(100%);
}
.container:hover .bottom-div {
transform: translateY(0);
}
</style>
</head>
<body>
<div class="container">
<div class="top-div">
<h2>顶部内容</h2>
</div>
<div class="bottom-div">
<h2>底部内容</h2>
</div>
</div>
</body>
</html>
网友评论