2. 程式人生 > >水墨風格的加載頁面

水墨風格的加載頁面

阿新 • • 發佈：2017-09-12
es2017 lang char alt div keyframes animation ani code 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrap-load{
            width: 163px;
            height: 203px;
            animation: scale 20s;
            animation-fill-mode:forwards;

        }
 


        @-webkit-keyframes scale {
                  0% {
                      background: url(images/load.png) 0 0;
                    transform: scale(1.5);
                        opacity: 1; }
                 8% {
                      background: url(images/load.png) 0 0;
                    transform
 
: scale(0);
                        opacity: 0; }       
                 9% {
                      background: url(images/load.png) -163px 0;
                    transform: scale(0);
                        opacity: 0; }
                 10% {
                      background: url(images/load.png) -163px 0
 
;
                    transform: scale(1.5);
                        opacity: 1; }
                 18% {
                      background: url(images/load.png) -163px 0;
                    transform: scale(0);
                        opacity: 0; }  
                 19% {
                      background: url(images/load.png) -326px 0;
                    transform: scale(0);
                        opacity: 0; }            
                 20% {
                      background: url(images/load.png) -326px 0;
                    transform: scale(1.5);
                        opacity: 1; }
                 28% {
                      background: url(images/load.png) -326px 0;
                    transform: scale(0);
                        opacity: 0; }
                 29% {
                      background: url(images/load.png) -489px 0;
                    transform: scale(0);
                        opacity: 0; }       
                 30% {
                      background: url(images/load.png) -489px 0;
                    transform: scale(1);
                        opacity: 1; }
                 38% {
                      background: url(images/load.png) -489px 0;
                    transform: scale(0);
                        opacity: 0; }
                 39% {
                      background: url(images/load.png) -647px 0;
                    transform: scale(0);
                        opacity: 0; }       
                 40% {
                      background: url(images/load.png) -647px 0;
                    transform: scale(1.5);
                        opacity: 1; }
                 48% {
                      background: url(images/load.png) -647px 0;
                    transform: scale(0);
                        opacity: 0; }
                 49% {
                      background: url(images/load.png) -803px 0;
                    transform: scale(0);
                        opacity: 0; }
                 50% {
                      background: url(images/load.png) -803px 0;
                    transform: scale(1);
                        opacity: 1; }
                 58% {
                      background: url(images/load.png) -803px 0;
                    transform: scale(0);
                        opacity: 0; }
                 59% {
                      background: url(images/load.png) 0 -219px;
                    transform: scale(0);
                        opacity: 0; }
                 60% {
                      background: url(images/load.png) 0 -219px;
                    transform: scale(1.5);
                        opacity: 1; }
                 68% {
                      background: url(images/load.png) 0 -219px;
                    transform: scale(0);
                        opacity: 0; }
                 69% {
                      background: url(images/load.png) -163px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 70% {
                      background: url(images/load.png) -163px -219px;
                    transform: scale(1.5);
                        opacity: 1; }
                 78% {
                      background: url(images/load.png) -163px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 79% {
                      background: url(images/load.png) -326px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 80% {
                      background: url(images/load.png) -326px -219px;
                    transform: scale(1.5);
                        opacity: 1; }
                 88% {
                      background: url(images/load.png) -326px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 89% {
                      background: url(images/load.png) -489px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 90% {
                      background: url(images/load.png) -489px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 100% {
                      background: url(images/load.png) -489px -219px;
                    transform: scale(1);
                        opacity: 1; }
                 
        }
    </style>

</head>
<body>
    <!-- 163 326 489 647 803 -->
    <!-- 219 -->
    <div id=‘wrap-load‘></div>
</body>
</html>技術分享

水墨風格的加載頁面

相關推薦

水墨風格的加載頁面

es2017 lang char alt div keyframes animation ani code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

javascript與jquery動態綁定事件需要先加載頁面註意的坑

如果 cli ntb on() ner nbsp 自動加載 load query 1、javascript的Dom對象動態事件綁定註意以下2點，如：document.getElementById（"id名稱"）.addListenerEvent("事件名稱"，functio

js加載頁面

complete fun doc pre class clas document function () // 用 document.readyState == "complete" 判斷頁面是否加載完成。 document.onreadystatechange = f

python爬蟲 selenium+phantomjs動態解析網頁，加載頁面成功，返回空數據

img 使用 一個 做的 ima 導數 技術分享 信息 之前 廢話不多說，直接說重點： 剛開始做的時候，代理IP，頭部信息池，都已經做好了，使用selenium+phantomjs獲取js動態加載後的源碼 起初挺好的，能出來動態加載後的源碼，但是運行了幾次之後，電腦有點卡頓

angular先加載頁面在執行事件，使用echarts渲染頁面

clas pre on() cti == https str log ret 劇情重現： 在一個頁面中有多個小模塊，這幾個模塊是可以拖動調順序的，並且其中有兩個模塊使用了echarts渲染， 調整順序angular插件有成熟的解決方案angular-sortable，htt

JS 動態加載頁面以及ViewBag傳參

textarea cti use pid -name play color com art <h2>JS 動態加載頁面以及ViewBag傳參</h2> 1 function setchildcomment(thisa, index){ 2

使用SplashScreenManager控件定制程序加載頁面

pan 控件 details 窗口 info 需要 blog cnblogs ogre 需要devexpress版本在12.0及以上才支持 https://www.cnblogs.com/wuhuacong/p/6112461.html 在DevExpress程序中

js後加載頁面元素，繫結時間都無法用解決方法

問題如下，頁面的table元素動態新增，當對table中的input做限制的時候無法操作，先看程式碼： $("#defaultView_content input").attr("disabled","disabled"); 然後噁心的我抓狂，後來通過谷歌搜了一波，果然： $('#defa

頁面自動加載javascript的方法

頁面自動加載 javascript經常用到的有三種：1、寫在HTML部分：直接寫到body標簽中，例：<body onload=函數名()></body>2、寫在javascript部分，例：<script type="text/javascript">window.onl

從數據庫、頁面加載速度角度思考 id設計 sku asin

移動 移動聯通 從數據 not blog ann url nor 電信4g w 超值套裝 【小米紅米4A】【超值套裝】小米 紅米 4A 全網通 2GB內存 16GB ROM 香檳金色 移動聯通電信4G手機 雙卡雙待【行情 報價 價格 評測】-京東 https

大坑啊！！！關於頁面加載完畢事件！！！

tro spa span 頁面 nbsp 關於 獲取 read nload 這個坑導致我頁面加載完畢後獲取元素高度有問題，獲取不正確或者是很小才20px，元素本身高度幾百，困擾了我這個新手幾天。原因就是js原生的onload事件和jq的ready事件的區別。 1.執行時間

手機H5頁面，滑動到底部自動加載下一頁內容

列表 瀏覽器 運行 on() 元素 cnblogs 下場 指定 解決方案 做公眾號項目中有如下場景，一個H5頁面有列表數據，不考慮一次加載所有數據，故需要分頁操作，解決方案為滑動到底部自動加載下一頁內容。直接在H5的js當中實現。 主要使用jquery的scroll()方法

使用Filter跟蹤Asp.net MVC頁面加載（轉）

total 技術 lba tpc 頁面 方式 too pri toolbar 轉載地址：http://www.cnblogs.com/JustRun1983/p/4027929.html 最近，客戶一直反饋系統使用慢，有時候能夠指出具體是哪個頁面，有時候又只是籠統地反饋慢

點擊不同按鈕，加載不同的頁面（不使用iframe的情況下）

lis button sco oos cati 情況 main style pla <button id="button1">Load Html1</button> <button id="button2">Load Html2<

swiper.js 多圖片頁面的懶加載lazyLoading

fun con 9.png 標簽 條件 需要 start 開啟 tran swiper.js官網：http://www.swiper.com.cn/api/Images/2015/0308/213.html 設為true開啟圖片延遲加載，使preloadImages無效。

html頁面加載流程

使用 避免 doc 最好 時間 dom type css 下載 瀏覽器加載和渲染html的順序 1. IE下載的順序是從上到下，渲染（就是把請求的內容顯示到瀏覽器屏幕上）的順序也是從上到下，下載和渲染是同時進行的。 2. 在渲染到頁面的某一部分時，其上面的所有部分都已經下載

頁面滾動圖片等元素動態加載插件jquery.scrollLoading.js

一次 透明圖 需求 ble date 也不能 設置 瀏覽器 ack 　　如果一個網頁很長，那麽該頁面的加載時間也會相應的較長。而這裏給大家介紹的這個jQuery插件scrollLoading的作用則是，對頁面元素進行動態加載，通俗的說就是滾到哪就加載到哪，屏幕以下看不見的

通過在jquery中添加函數發送ajax請求來加載數據庫數據，以json的格式發送到頁面

this -1 結果集 ont js插件 顯示 可用 cti pat 通過在jquery中添加函數發送ajax請求來加載數據庫數據，以json的格式發送到頁面 從數據庫中查詢倉庫信息，顯示在下拉菜單中： 首先，引入js插件，這裏使用jquery-1.8.3.js &

spring mvc的工程遇到頁面加載jquery失敗，提示 ReferenceError: $ is not defined

頁面加載 js文件 test head ren query title 首頁 訪問靜態文件 測試頁面代碼： <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>&l

減少頁面加載時間（感知或實際加載時間）的方法。

dsm 完全 圖片合成 空格 數量 pos 允許 較高的 trac 版權聲明：本文為博主原創文章，未經博主允許不得轉載。 1. 盡量減少頁面中重復的HTTP請求數量 比較直接的理解就是要減少調用其他頁面、文件的數量。我們在使用css格式控制的時候，經常會采用b