CSS使用背景动画实现图片正在加载效果

最新推荐文章于 2024-08-31 09:27:14 发布

buyue__

最新推荐文章于 2024-08-31 09:27:14 发布

阅读量698

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/buyueliuying/article/details/115545195

版权

前端专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS使用背景动画实现图片正在加载效果</title>
    </head>
    <body>
        <style>
            @-webkit-keyframes btn-loading-data-v-0891d049 {
             0% {
              background-position:400% 100%
             }
             to {
              background-position:0 100%
             }
            }
            @keyframes btn-loading-data-v-0891d049 {
             0% {
              background-position:400% 100%
             }
             to {
              background-position:0 100%
             }
            }
            
            .photo-wrapper-loading{
                float:left;
                margin-right:20px;
                
                width:360px;
                height:250px;
                
                background:-webkit-gradient(linear,left top,right top,from(#d2d6d7),color-stop(#d2d6d7),color-stop(#e9ebea),color-stop(#e9ebea),color-stop(#d2d6d7),to(#d2d6d7));
                background:linear-gradient(90deg,#d2d6d7,#d2d6d7,#e9ebea,#e9ebea,#d2d6d7,#d2d6d7);
                background-origin:border-box;
                background-size:400%;
                border-radius:3px;
                -webkit-animation:3.6s linear infinite;
                animation:btn-loading-data-v-0891d049 3.6s linear infinite;
            }
        </style>

        <div>
            <div class="photo-wrapper-loading"></div>
            <div class="photo-wrapper-loading"></div>
            <div class="photo-wrapper-loading"></div>
        </div>

    </body>
</html>