Link-box/style.css

.link-box { position: relative; z-index: 2; display: inline-flex; align-items: stretch; min-height: 90px; width: 300px; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.08),0 0 3px rgba(0,0,0,0.1); transition: box-shadow 0.2s ease-in-out; } .link-box:hover { z-index: 3; box-shadow: 0 8px 9px rgba(0,0,0,0.08), 0 0 6px rgba(0,0,0,0.1); } .link-box:active { z-index: 1; box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 0 1px 0 rgba(0,0,0,0.15); transition: all 0.04s ease-in; } .img-box { flex: 0 0 110px; position: relative; z-index: 1; overflow: hidden; mask-image: linear-gradient(90deg, black 90px, transparent); /*-webkit不让加，在内联样式里面加*/ } .img-box>img { position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 0.4s cubic-bezier(0.32, 0, 0.4, 1); } .link-box:hover>.img-box>* { transform: scale(1.1); } .txt-box { flex-grow: 1; display: flex; flex-flow: column nowrap; justify-content: center; margin-left: -20px; padding: 7px 10px 7px 27px; z-index: 2; } .txt-box>.title { display: block; font-weight: bold; color: #222 } .txt-box>.text { display: block; color: #666; font-size: smaller; } .link-cover, .url-cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; } /* 本文引自萌娘百科*/