css3製做商品展現

時間 2020-05-09

標籤 css3 css 製做商品展現欄目 CSS 简体版

原文原文鏈接

今天看到一個用css3製做的簡單的展現頁面因此，我本身又是初學者因此決定模仿着寫一個，下面右邊是一開始的，右邊是鼠標放上去暫時的。這個是由下到上逐漸顯示的首先直接上代碼。css

 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代碼html

* { 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; }

下面展現我作的，因爲是初學因此對與美化不是太好css3

這就是效果了，主要是用了學習

.box:hover .desc{ height: 100%; width: 100%; border: 1px solid red; background-color: black; }

同時，你能夠直接用bottom,或left或top或right你會發現這個有不一樣的效果ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。