今天看到一个用css3制作的简单的展示页面所以，我自己又是初学者所以决定模仿着写一个，下面右边是一开始的，右边是鼠标放上去暂时的。这个是由下到上逐渐显示的首先直接上代码。
1 2 <!doctype html> 3 <html lang="en"> 4 5 <head> 6 <meta chart="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-ali国庆节歌曲gn: 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你会发现这个有不同的效果
本文发布于:2023-04-03 12:41:32，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/459cac83d8de2eec2b678aa4b11efdb0.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：css3制作商品展示.doc
本文 PDF 下载地址：css3制作商品展示.pdf
| 留言与评论（共有 0 条评论） |
