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