.page { min-height: 100%; padding-top: 20px; position: relative; } .color_list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .color_list .color_item { position: relative; display: inline-block; border-radius: 5px; overflow: hidden; padding: 5px 10px; cursor: pointer; width: 100px; height: 125px; } .color_list .color_item:hover .color_add { -webkit-transform: translate(-50%, -50%) scale(1.3); transform: translate(-50%, -50%) scale(1.3); } .color_list .color_item .color_add { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; -webkit-transition: -webkit-transform .3s linear; transition: -webkit-transform .3s linear; transition: transform .3s linear; transition: transform .3s linear, -webkit-transform .3s linear; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .color_list .color_item:hover { background-color: rgba(0, 0, 0, 0.041); } .color_list .color_item:hover .color_toggle_list { max-height: 99px; } .color_list .color_item .color_toggle_list { overflow: hidden; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; max-height: 0; -webkit-transition: max-height .5s linear; transition: max-height .5s linear; background-color: rgba(180, 180, 180, 0.274); } .color_list .color_item .color_toggle_list .color_toggle_item { display: inline-block; padding: 2px 6px; } .color_list .color_item .color_toggle_list .color_toggle_item:hover { background-color: rgba(0, 0, 0, 0.185); } .color_list .color_item .color_item_bg { height: 50px; background-color: red; position: relative; } .color_list .color_item .color_item_content .color_item_title { font-size: 1.2em; font-weight: bold; } .color_list .color_item .color_item_content .color_item_desc { color: #a7a6a6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } /*# sourceMappingURL=color.css.map */