CodingStartup
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex quasi enim facere commodi omnis...
body { background-color:#f6f6f6; font-family:Helvetica; font-size:15px; display:flex; justify-content:space-evenly; align-items:center; min-height:100vh; } .card { width:320px; background-color:#fff; border-radius:6px; overflow:hidden; display:inline-block; box-shadow:0px 4px 6px rgba(0,0,0,0.12); } .image { height:200px; } .image img { display:block; width:100%; height:inherit; object-fit:cover; } .content { padding:2rem 1.8rem; } h4 { margin:0 0 1rem; font-size:1.5rem; line-height:1.5rem; } .description { font-size:1rem; line-height:1.4rem; } .loading .image,.loading h4,.loading .description { background-color:#ededed; background:linear-gradient( 100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 60% ) #ededed; background-size:200% 100%; background-position-x:180%; animation:1s loading ease-in-out infinite; } @keyframes loading { to { background-position-x:-20%; } }.loading h4 { min-height:1.6rem; border-radius:4px; animation-delay:0.05s; } .loading .description { min-height:5.401rem; border-radius:4px; animation-delay:0.06s; }
更新时间:2021-09-02 08:57:40