今天看到一個用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你會發現這個有不同的效果