Html
    Css
    Js

    
                        
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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

骨架屏Skeleton

更新时间:2021-09-02 08:57:40

0