【每日一练】135

2023-02-13 17:37| 来源: 网络整理| 查看: 265

今天这个练习，是一个列表卡的效果，是我在写一个项目时，从中提取的一个样式效果，希望这个效果能帮助到你，最终效果如下：

HTML代码：

【每日一练】135—一个超级实用的产品目录列表卡的实现

课程内容安排

编程开发

HTML+CSS

Python

JavaScript

HTML5+CSS3

摄影设计

美食摄影

人像摄影

证件照

相册设计

外语学习

英语学习

法语/德语

韩语/日语

其他小语种

写作课程

自媒体写作

广告文案

小说写作

励志文案写作

平面设计

画册设计

名片设计

包装设计

CSS代码：

html,body { color: #333; margin: 0; height: 100%; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { text-decoration: none; color: #000; } img { border: 0; } body { background: #F4F5F9; color: #666; font-family: 'Microsoft Yahei', 'PingFangSC', sans-serif; } html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td { margin: 0; padding: 0; } a { text-decoration: none; color: #08acee; } button { outline: 0; } img { border: 0; } button,input,optgroup,select,textarea { margin: 0; font: inherit; color: inherit; outline: none; } li { list-style: none; } a { color: #666; } a:hover { color: #eee; } .clearfix::after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix { } .trade-content { padding: 30px 0; } .trade-title { font-size: 24px; color: #333; text-align: center; margin: 50px 0; position: relative; } .trade-title:before { content: ""; position: absolute; width: 0; height: 0; bottom: -19px; left: 50%; transform: translateX(-50%); border: 6px solid; border-color: #20B09F transparent transparent; } .trade-title:after { content: ""; position: absolute; width: 52px; height: 3px; background-color: #00a6bc; bottom: -8px; left: 50%; transform: translateX(-50%); } .trade-black { height: 400px; background-color: #666; } .trade-box { width: 1200px !important; margin: 0 auto; position: relative; transition: all .3s ease; } .trade-box-list { display: flex; flex-direction: row; justify-content: center; align-items: center; } .trade-box-item { flex: 1; text-align: center; position: relative; height: 400px; background: no-repeat center; background-size: 100% auto; } .trade-content .trade-box-item:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,.6); transition: all .4s cubic-bezier(.4, 0, .2, 1); } .trade-box-item a { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } a, button, input, textarea { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; } .item-logo { margin: 0 auto; display: block; } .trade-content .trade-box-item .item-logo { position: relative; margin-top: 120px; transition: all .4s cubic-bezier(.4, 0, .2, 1); } .item-logo img { display: block; margin: 0 auto; max-width: 100%; } .item-title { font-size: 20px; font-weight: bold; color: #fff; padding: 20px 0; position: relative; } .trade-content .item-title:before { content: ""; position: relative; display: block; width: 20px; border-bottom: 2px solid #fff; margin: 0 auto 20px; transition: all .4s cubic-bezier(.4, 0, .2, 1); } .item-text { position: relative; transition: all .4s cubic-bezier(.4, 0, .2, 1); opacity: 0; margin-top: 10px; } .item-text p { color: #fff; font-size: 16px; margin-bottom: 5px; } .trade-content .item01 { background-image: url(../images/01.jpg); } .trade-content .item02 { background-image: url(../images/02.jpg); } .trade-content .item03 { background-image: url(../images/01.jpg); } .trade-content .item04 { background-image: url(../images/02.jpg); } .trade-content .item05 { background-image: url(../images/01.jpg); } .trade-content .trade-box-item:hover .item-text { display: block; opacity: 1; margin-top: 0; } .trade-content .trade-box-item:hover:before { background-color:#00a6bc; } .trade-content .trade-box-item:hover .item-logo { margin-top: 80px; } .trade-content .trade-box-item:hover .item-title:before { opacity: 0; margin-bottom: 0; }

写在最后

以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。