亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

類似稀土掘金的加載占位功能是如何實現的?

類似稀土掘金的加載占位功能是如何實現的?

暮色呼如 2018-10-19 18:11:48
在頁面預加載時,類似下圖的占位效果,是如何實現的,原理是什么?
查看完整描述

1 回答

?
泛舟湖上清波郎朗

TA貢獻1818條經驗 獲得超3個贊

用div+css仿照正常數據的展示布局,用css寫出灰色的條形,并添加一個顏色變化的動畫。

寫個簡單的例子吧:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        body {

            background-color: #ddd;

        }

        .container {

            width: 320px;

            height: 360px;

            margin: 0 auto;

            padding: 10px;

            background-color: #ffffff;

        }

        .firstLine {

            width: 100%;

        }

        .secondLine {

            width: 40%;

        }

        .line {

            margin-bottom: 10px;

            height: 20px;

            background-color: #f9f9f9;

            animation: twinkle 1.5s infinite;

        }

        @keyframes twinkle {

            from {

                opacity: .5;

            }

            to {

                opacity: .9;

            }

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="firstLine line"></div>

        <div class="secondLine line"></div>


        <div class="firstLine line"></div>

        <div class="secondLine line"></div>


        <div class="firstLine line"></div>

        <div class="secondLine line"></div>


        <div class="firstLine line"></div>

        <div class="secondLine line"></div>


        <div class="firstLine line"></div>

        <div class="secondLine line"></div>

    </div>

</body>

</html>


查看完整回答
反對 回復 2018-11-28
  • 1 回答
  • 0 關注
  • 649 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號