技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

純css3音階波浪loading加載動畫效果【源碼下載】

作者:admin    時間:2019-1-15 15:25:11    瀏覽:

純css3實現的音階波浪loading加載動畫效果,在主流瀏覽器上測試通過,包括Chrome、360安全/極速瀏覽器、Firefox、IE11等。以前用flash來作為loading加載動畫效果,但是現在的瀏覽器出于安全考慮,已經不再默認能自動加載運行flash文件了,因此用css3來實現同樣的效果,就能很好的避免這種情況的出現。

運行效果:

css代碼


.loader {
position: relative;
top: 25px;
bottom: 0px;
left: 10px;
right: 0px;
width: 175px;
height: 100px;
}
.loader span {
display: block;
background: #f1f1f1;
width: 7px;
height: 10px;
border-radius: 14px;
margin-right: 5px;
float: left;
margin-top: 25px;
}
.loader span:last-child {
margin-right: 0px;
}
.loader span:nth-child(1) {
animation: load 2.5s 1.4s infinite linear;
}
.loader span:nth-child(2) {
animation: load 2.5s 1.2s infinite linear;
}
.loader span:nth-child(3) {
animation: load 2.5s 1s infinite linear;
}
.loader span:nth-child(4) {
animation: load 2.5s 0.8s infinite linear;
}
.loader span:nth-child(5) {
animation: load 2.5s 0.6s infinite linear;
}
.loader span:nth-child(6) {
animation: load 2.5s 0.4s infinite linear;
}
.loader span:nth-child(7) {
animation: load 2.5s 0.2s infinite linear;
}
.loader span:nth-child(8) {
animation: load 2.5s 0s infinite linear;
}
.loader span:nth-child(9) {
animation: load 2.5s 0.2s infinite linear;
}
.loader span:nth-child(10) {
animation: load 2.5s 0.4s infinite linear;
}
.loader span:nth-child(11) {
animation: load 2.5s 0.6s infinite linear;
}
.loader span:nth-child(12) {
animation: load 2.5s 0.8s infinite linear;
}
.loader span:nth-child(13) {
animation: load 2.5s 1s infinite linear;
}
.loader span:nth-child(14) {
animation: load 2.5s 1.2s infinite linear;
}
.loader span:nth-child(15) {
animation: load 2.5s 1.4s infinite linear;
}
@keyframes load {
0% {
background: #ccc;
margin-top: 25%;
height: 10%;
}
50% {
background: #e1e1e1;
height: 100%;
margin-top: 0%;
}
100% {
background: #ccc;
height: 10%;
margin-top: 25%;
}
}

css代碼解釋:

.loader {} 定義動畫的大小及相對位置,.loader span {} 定義動畫音階背景顏色;@keyframes load {} 這里面定義音階的顏色,修改background此屬性值即可。

html代碼


<div id="div_loading" style ="margin:5px 5px 5px 5px;width:200px;height:150px;background-color:#ccc;">
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>

html代碼解釋:

id="div_loading" 這個div是加載動畫的位置,id名稱可以隨意更改;而class="loader" 這個div是展示動畫的容器,class="loader" 這個類名不能更改。

execcodegetcode

使用方法

1、css代碼直接復制到網頁的css文件里或網頁的<style></style>里面。

2、html代碼復制到網頁的<body></body>里面。

3、你可以修改 id="div_loading" 這個div的id名稱及其css屬性。

4、你必須確定你的網頁原來的css代碼不包含 .loader 這個類名,否則會有沖突。如果你的網頁原來的css代碼包含有 .loader 這個類名,那么你得改一下這個動畫效果的類名,把 .loader 改為其他名稱,記住css和html代碼里的 loader 要一起改。

您可能對以下文章也感興趣

標簽: css3  
  • IT熱文
  • 站長推薦
{ganrao} 浙江快乐彩走势 体育彩票快速赛车规律 足球鞋 二分彩计划软件官方下载 qq麻将手机版官方下载单机 单机麻将免费 八肖期期中免费资料 皇家棋牌直营 捕鱼大作战微信版 今晚选四开奖号走势图 山西掌上麻将下载 2017年大小波色单双句 韩国快乐8|平台 贵阳捉鸡麻将微乐 平特一肖500赔多少钱 东方娱乐棋牌网址