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;" />
完成套用之後即可得到上述的效果。
沒有留言:
張貼留言