CSS3 導入了強大的動畫功能,各主流瀏覽器亦完成支援,如果不考慮舊版瀏覽器,可以利用 CSS 製作動畫比較方便。以下是兩朵雲在背景顏色逐漸改變的網頁中浮動,以不同速率移動製作的簡單視差效果(點圖看效果)。

指定 keyframes 樣式如下:
準備兩張 png 圖檔,配置如下:
完成套用之後即可得到上述的效果。

指定 keyframes 樣式如下:
@keyframes ccolor
{
0%
{
background-color: #000000;
}
10%
{
background-color: #FF0000;
}
35%
{
background-color: #FF7F00;
}
40%
{
background-color: #FFFF00;
}
50%
{
background-color:#00FF00 ;
}
60%
{
background-color: #0000FF;
}
75%
{
background-color: #4B0082;
}
90%
{
background-color: #4B0082;
}
100%
{
background-color: #8F00FF;
}
}
@keyframes slide
{
from
{
left: 20px;
}
to
{
left: 800px;
}
}
準備兩張 png 圖檔,配置如下:
<img src="image/cloud2.png" style="position: absolute;
animation: slide 110s infinite alternate;" />
<img src="image/cloud.png" style="position: absolute;
animation: slide 60s infinite alternate;" />
完成套用之後即可得到上述的效果。
沒有留言:
張貼留言