簡單的 keyfrmaes 效果

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



指定 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;" />

完成套用之後即可得到上述的效果。


沒有留言: