CSS3实现网站商品展示效果图
发布时间:2020-01-18 16:30:57 作者:司~夏 我要评论
这篇文章主要介绍了CSS3实现网站商品展示效果图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
本文介绍了CSS3实现网站商品展示效果图,分享给大家,具体如下:
html代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | < div class = "product" > < ul > < li > < div class = "pro-img" > < a href = "#" > < img src = "images/pms_1524883847.49276938!220x220.jpg" alt = "" > </ a > </ div > < h3 >< a href = "#" >小米电视4A 43英寸青春版</ a ></ h3 > < p class = "desc" >全高清屏 / 人工智能语音</ p > < p class = "price" > < span >1499</ span >元 < del >1699</ del > </ p > < div class = "review" > < a href = "#" > < span class = "msg" >一如既往的好,小米情怀</ span > < span class = "auther" > 来自于 惊喜 的评价 </ span > </ a > </ div > </ li > </ ul > </ div > |
CSS3代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | * { margin : 0 ; padding : 0 ; } ul, ol { list-style : none ; } input, button { outline : none ; border : none ; } a { text-decoration : none ; } .clearfix::before, .clearfix::after { content : "" ; height : 0 ; line-height : 0 ; display : block ; visibility : hidden ; } .clearfix::after { clear : both ; } body { padding : 100px ; background-color : #f5f5f5 ; } .product li { float : left ; width : 234px ; height : 246px ; padding : 34px 0 20px ; z-index : 1 ; margin-left : 14px ; margin-bottom : 14px ; background : #fff ; -webkit-transition: all . 2 s linear; transition: all . 2 s linear; position : relative ; } .pro-img { width : 150px ; height : 150px ; margin : 0 auto 18px ; } .pro-img a { width : 100% ; height : 100% ; } .pro-img img { display : block ; width : 100% ; height : 100% ; } .product li h 3 { margin : 0 10px ; font-size : 14px ; font-weight : 400 ; text-align : center ; } .product li h 3 a { color : #333 ; } .desc { margin : 0 10px 10px ; height : 18px ; font-size : 12px ; text-align : center ; text- overflow : ellipsis; white-space : nowrap ; overflow : hidden ; color : #b0b0b0 ; } .price { font-size : 14px ; margin : 0 10px 10px ; text-align : center ; color : #ff6700 ; } .price del { color : #b0b0b0 ; } .review { position : absolute ; bottom : 0 ; left : 0 ; z-index : 3 ; width : 234px ; height : 0 ; overflow : hidden ; font-size : 12px ; background : #ff6700 ; opacity: 0 ; -webkit-transition: all . 2 s linear; transition: all . 2 s linear; } .review a { color : #757575 ; display : block ; padding : 8px 30px ; outline : 0 ; } .review a span { display : block ; margin-bottom : 5px ; color : #fff ; } .product li:hover { -webkit-box-shadow: 0 15px 30px rgba( 0 , 0 , 0 , 0.1 ); box-shadow: 0 15px 30px rgba( 0 , 0 , 0 , 0.1 ); -webkit-transform: translate 3 d( 0 , -2px , 0 ); transform: translate 3 d( 0 , -2px , 0 ); } .product li:hover .review { opacity: 1 ; height : 76px ; } |
运行效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- html5商品展示导购特效是一款3D立体样式的商品信息,非常具有实用价值,需要的朋友可以参考下。2017-01-03
最新评论