css好看的骨架屏动画效果

h5项目中使用骨架屏占位，感觉网上的闪烁效果不好看，自己弄了一个，动画时长可自行根据dom大小调整

 

 演示文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>骨架屏动画效果</title> 
<style>
#grad1 {
    height: 200px;
    width: 400px;
    animation: loading 8s linear infinite;
    background-image: linear-gradient(50deg, #e8e7e7, #e8e7e7 52%, #f1f1f1 55%, #e8e7e7 58%, #e8e7e7);
    background-size: 400% 100%;
}
@keyframes loading {
            0% {
                background-position: 400% 50%
            }
            to {
                background-position: 0% 50%
            }
        }
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

　　

 

posted @ 2021-05-17 15:33  吃饭七分饱  阅读(1733)  评论(0)    收藏  举报