css3 動態背景

動態背景

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

demo位址 步驟

1.利用css的radial-gradient建立乙個映象漸變的背景。其中的80% 20%為漸變中心的x,y位置。

具體的radial-gradient用法可以參見這裡

2.重複第一步建立4個擁有不同的漸變背景的div。漸變中心點的位置分別為80% 20%80% 80%20% 80%20% 20%

.dynbg__bg

.dynbg__bg1
.dynbg__bg2
.dynbg__bg3
.dynbg__bg4

四個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

16.6667%
33.3333%
50%66.6667%
83.3333%
100%
}@-webkit-keyframes dynbg__ani2
16.6667%
33.3333%
50%66.6667%
83.3333%
100%
}@-webkit-keyframes dynbg__ani3
16.6667%
33.3333%
50%66.6667%
83.3333%
100%
}

再給div的class加上動畫屬性

.dynbg__bg

.dynbg__bg1
.dynbg__bg2
.dynbg__bg3
.dynbg__bg4

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

transition的使用方法可以參考這裡

animation的使用方法可以參考這裡

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

.dynbg__bg0

也可以收藏天機的官網，

經常更新最新的教程。

1.波浪狀動態背景

CSS3邊框背景

邊框背景 border image 邊框背景主要是用來給元素邊框新增背景影象，本質是用一張來修飾邊框背景，看下圖效果 用左邊來完成右邊的效果 先看一下邊框背景的引數 border image image boeder width 引數可寫1 4個 填充方式 stretch repeat round ...

CSS3背景屬性

background是乙個使用率很高的屬性，也是乙個非常有用的屬性。背景主要包括5個基本屬性 background color 背景顏色 background image 背景 background repeat 背景展示方式 background attachment 背景是固定還是滾動 back...

css3設定背景

可以新增一張或者多張 background image url url background position right bottom,left top center 作用分別是將背景放在右邊 底 左 上 居中 background url img1.gif right bottom no rep...