html5制作商品展示页面,css3制作商品展示，css3商品展示分享

今天看到一个用

%* { 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; transform: translate(0,0); } .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; }

下面展示我做的，由于是初学所以对与美化不是太好

这就是效果了，主要是用了

transform: translate(0,0);

如果不用这个，你可以直接用bottom,或left或top或right你会发现这个有不同的效果

www.dengb.comtruehttp://www.dengb.com/HTML_CSS/1332868.htmlTechArticle

—-想了解更多的css相关样式处理怎么解决关注

本文来自网络收集，不代表猴子技术宅立场，如涉及侵权请点击右边联系管理员删除。

如若转载，请注明出处：https://www.ssfiction.com/cssjc/108945.html