在做数据据请求时，通常会为要在展示数据前设置一个加载中的背景动画，以达到更好的用户体验，也就是现在比较流行优化用户体验的骨架屏，下面给大家分享一段代码实现这个效果，欢迎大家复制粘贴及吐槽。
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3.0实现的加载背景动画（骨架屏）</title>
<style>
.is-loading {
/* 宽度和高度根据要展示元素大小设定 */
width: 500px;
height: 500px;
position: relative;
margin: 0 auto;
top:100px;
/* 以下代码实现背景动画效果 */
animation: loading 1.4s ease infinite;
-webkit-animation: loading 1.4s ease infinite;
background-image: -webkit-gradient(linear, left top, right top, color-stop(25%, #f0f0f0), color-stop(37%, #e3e3e3), color-stop(63%, #f0f0f0));
background-image: -o-linear-gradient(left, #f0f0f0 25%, #e3e3e3 37%, #f0f0f0 63%);
background-image: linear-gradient(90deg, #f0f0f0 25%, #e3e3e3 37%, #f0f0f0 63%);
background-size: 400% 100%
}
@-webkit-keyframes loading {
0% {
background-position: 100% 50%
}
to {
background-position: 0 50%
}
}
@keyframes loading {
0% {
background-position: 100% 50%
}
to {
background-position: 0 50%
}
}
</style>
</head>
<body>
<div class="is-loading"></div>
</body>
</html>
