當前位置:編程學習大全網 - 站長素材 - html頁面怎麽實現動態加載頁面

html頁面怎麽實現動態加載頁面

方法:1、直接貼圖:在界面上貼壹個gif動態等待效果圖片,gif圖片獲取方式:網上找素材,會ps的可以自己制作<img src="wait.gif" />

2、CSS3/SVG/HTML5 Canvas手動繪制等待效果:

這種效果:網上有很多類似素材,可以根據需要選擇,或使用上述技術繪制

下面提供壹個CSS3繪制的範例

3、CSS的代碼如下:

<style>

.loading {?

width:0;

height:0;

border-right:20px solid #fff;

border-top:20px solid #000;

border-left:20px solid #fff;

border-bottom:20px solid #000;

border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

}

.loading {

animation: bganim 0.6s linear 0s infinite;

-moz-animation: bganim 0.6s linear 0s infinite;

-webkit-animation: bganim 0.6s linear 0s infinite;

}

@keyframes bganim {

from { transform:rotate(0deg); } to { transform:rotate(360deg); }

}

@-moz-keyframes bganim {

from { -moz-transform:rotate(0deg); } to { -moz-transform:rotate(360deg); }

}

@-webkit-keyframes bganim {

from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); }

}

</style>

4、<label>CSS3效果</label>,<div class="loading"></div>

效果如下圖:運行機制很簡單,先手動繪制壹個靜態的圖,然後控制對應div進行360度旋轉,即可實現

5、使用js等待效果插件(如:spin.js)

6、JS代碼如下:

var opts = {

lines: 9,

length: 0,

width: 15,

radius: 20,

corners: 1,

rotate: 0,

direction: 1,

color: '#0101DF',

speed: 1,?

trail: 34,

shadow: false,

hwaccel: false,

className: 'spinner',

zIndex: 2e9,

top: '50%',

left: '50%'

};

var target = document.getElementById('img_wait');

var spinner = new Spinner(opts).spin(target);

7、html代碼的引用:<div id="img_wait"></div>

8、打開測試,效果如下

  • 上一篇:galgame是怎麽改名的?課文目錄的名稱是什麽?
  • 下一篇:photoshop 如何去掉臉上雀斑
  • copyright 2024編程學習大全網