【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 7 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

簡單的 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;" />

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


沒有留言: