css3 動態背景

動態背景

利用多層背景的交替淡入淡出，實現一種背景在不停變換的效果，先看圖。 效果圖：

DEMO地址

步驟

1.利用css的radial-gradient創建一個鏡像漸變的背景。當中的80% 20%為漸變中心的x,y位置。

詳細的radial-gradient使用方法能夠參見這里

.dynbg__bg{
    position: absolute;
    top: 0px;
    left: 0px;
    width:100%;
    height:100%;
    background:-moz-radial-gradient(80% 20%,farthest-side, #edbf47, #D58123);
    background:-webkit-radial-gradient(80% 20%,farthest-side, #edbf47, #D58123);
}

在線代碼

2.反復第一步創建4個擁有不同的漸變背景的DIV。漸變中心點的位置分別為80% 20% 80% 80% 20% 80%20% 20%

.dynbg__bg{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
}
.dynbg__bg1{
    background:-moz-radial-gradient(80% 20%,farthest-side, #edbf47, #D58123);
    background:-webkit-radial-gradient(80% 20%,farthest-side, #edbf47, #D58123);
    z-index: 4;
}
.dynbg__bg2{
    background:-moz-radial-gradient(80% 80%,farthest-side, #edbf47, #D58123);
    background:-webkit-radial-gradient(80% 80%,farthest-side, #edbf47, #D58123);
    z-index: 3;
}
.dynbg__bg3{
    background:-moz-radial-gradient(20% 80%,farthest-side, #edbf47, #D58123);
    background:-webkit-radial-gradient(20% 80%,farthest-side, #edbf47, #D58123);
    z-index: 2;
}
.dynbg__bg4{
    background:-moz-radial-gradient(20% 20%,farthest-side, #edbf47, #D58123);
    background:-webkit-radial-gradient(20% 20%,farthest-side, #edbf47, #D58123);
    z-index: 1;
}

四個div的效果

3.將四個div按順序疊加擺放，並按照順序將div的透明度由1變為0再變為1。最后一個div的透明度不須要變，所以一個須要變化3個div，每一個div的變化有兩個狀態，所以一共同擁有6個狀態。我們將100%除以6，分成0%,16.6667%,33.3333%,50%,66.6667%,83.3333%,100%。每一個div在不同階段的狀態例如以下。

@-webkit-keyframes dynbg__ani1{
  0%{
    opacity: 1;
  }
  16.6667%{
    opacity: 0;
  }
  33.3333%{
    opacity: 0;
  }
  50%{
    opacity: 0;
  }
  66.6667%{
    opacity: 0;
  }
  83.3333%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@-webkit-keyframes dynbg__ani2{
  0%{
    opacity: 1;
  }
  16.6667%{
    opacity: 1;
  }
  33.3333%{
    opacity: 0;
  }
  50%{
    opacity: 0;
  }
  66.6667%{
    opacity: 0;
  }
  83.3333%{
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}
@-webkit-keyframes dynbg__ani3{
  0%{
    opacity: 1;
  }
  16.6667%{
    opacity: 1;
  }
  33.3333%{
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
  66.6667%{
    opacity: 1;
  }
  83.3333%{
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}

再給div的class加上動畫屬性

.dynbg__bg{
  ...
  -webkit-transition:all 1s linear;
  -moz-transition:all 1s linear;
  ...
}
.dynbg__bg1{
  ...
  -webkit-animation:dynbg__ani1 infinite 8s;
  -moz-animation:dynbg__ani1 infinite 8s;
}
.dynbg__bg2{
  ...
  -webkit-animation:dynbg__ani2 infinite 8s;
  -moz-animation:dynbg__ani2 infinite 8s;
}
.dynbg__bg3{
  ...
  -webkit-animation:dynbg__ani3 infinite 8s;
  -moz-animation:dynbg__ani3 infinite 8s;
}
.dynbg__bg4{
  ...
}

這樣就將3張圖片按順序由顯示漸變為透明再變回顯示了。

transition的用法能夠參考這里
animation的用法能夠參考這里

4.最后在最上面加上一層平鋪的半透明的點來添加質感。

.dynbg__bg0{
    background-repeat: repeat;
    background: -webkit-radial-gradient(rgba(255,255,255,0.4) 5%, transparent 10%);
    background: -moz-radial-gradient(rgba(255,255,255,0.4) 5%, transparent 10%);
    background-size: 16px 16px;
    z-index: 5;
}

在線代碼

如有問題或者建議請微博@UED天機。我會及時回復

也能夠收藏天機的官網， http://ued.sexy/   常常更新最新的教程。

github地址

相關閱讀

1.波浪狀動態背景