欧美精品视频一区,国产美女一级牲交片

技術(shù)頻道 - html技術(shù)

純css3音階波浪loading加載動(dòng)畫效果【源碼下載】

作者:admin 時(shí)間:2019-1-15 15:25:11 瀏覽:

純css3實(shí)現(xiàn)的音階波浪loading加載動(dòng)畫效果，在主流瀏覽器上測(cè)試通過(guò)，包括Chrome、360安全/極速瀏覽器、Firefox、IE11等。以前用flash來(lái)作為loading加載動(dòng)畫效果，但是現(xiàn)在的瀏覽器出于安全考慮，已經(jīng)不再默認(rèn)能自動(dòng)加載運(yùn)行flash文件了，因此用css3來(lái)實(shí)現(xiàn)同樣的效果，就能很好的避免這種情況的出現(xiàn)。

運(yùn)行效果：

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 {} 定義動(dòng)畫的大小及相對(duì)位置，.loader span {} 定義動(dòng)畫音階背景顏色；@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" 這個(gè)div是加載動(dòng)畫的位置，id名稱可以隨意更改；而class="loader" 這個(gè)div是展示動(dòng)畫的容器，class="loader" 這個(gè)類名不能更改。

execcode getcode

使用方法

1、css代碼直接復(fù)制到網(wǎng)頁(yè)的css文件里或網(wǎng)頁(yè)的<style></style>里面。

2、html代碼復(fù)制到網(wǎng)頁(yè)的<body></body>里面。

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

4、你必須確定你的網(wǎng)頁(yè)原來(lái)的css代碼不包含 .loader 這個(gè)類名，否則會(huì)有沖突。如果你的網(wǎng)頁(yè)原來(lái)的css代碼包含有 .loader 這個(gè)類名，那么你得改一下這個(gè)動(dòng)畫效果的類名，把 .loader 改為其他名稱，記住css和html代碼里的 loader 要一起改。