今天看到一个用css3制作的简单的展示页面所以，我自己又是初学者所以决定模仿着写一个，下面右边是一开始的，右边是鼠标放上去暂时的。这个是由下到上逐渐显示的首先直接上代码。
1 2 <!DOCTYPE html> 3 <html lang="en"> 4 5 <head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 9 <link rel="stylesheet" href="./style.css"> 10 <title>Document</title> 11 </head> 12 13 <body> 14 <div class="box"> 15 <div class="pic"> 16 <img src="./1.jpeg" alt=""> 17 </div> 18 <div class="desc"> 19 <div class="title"> 20 <span>立即订制</span> 21 </div> 22 <div class="ui"> 23 <p>ui课程设计</p> 24 <p>***人在学习</p> 25 </div> 26 </div> 27 </div> 28 </body> 29 30 </html>
下面是css代码
* {
padding: 0px;
border: 0px;
}
.box {
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
text-align: center;
}
.pic {
width: 100%;
height: 100%;
}
.pic img {
width: 100%;
height: 100%;
}
.desc {
position: absolute;
bottom: 0px;
width: 100%;
/* width: 0px; */
height: 0px;
overflow: hidden;
text-align: center;
opacity: 0.5;
transition: all 0.6s;
}
.desc .title {
width: 80%;
}
.box:hover .desc{
height: 100%;
width: 100%;
border: 1px solid red;
background-color: black;
}
.box:hover .title{
margin-top: 120px;
}
.desc .title span {
border: 1px solid red;
color: red;
padding-left: 20%;
padding-right: 20%;
margin: 0;
}
.ui p {
float: left;
margin: 10px 10px 0px 30px;
color: white;
}
下面展示我做的，由于是初学所以对与美化不是太好
这就是效果了，主要是用了
.box:hover .desc{
height: 100%;
width: 100%;
border: 1px solid red;
background-color: black;
}
同时，你可以直接用bottom,或left或top或right你会发现这个有不同的效果