CSS實現頁面自動切換是網頁設計中常用的技巧之一。下面介紹一些實現方式。
代碼示例: html{ /*設定頁面自動切換背景*/ background: #fff url("bg1.jpg") no-repeat center top; -webkit-transition: background 2s ease-in-out; -moz-transition: background 2s ease-in-out; -o-transition: background 2s ease-in-out; transition: background 2s ease-in-out; } html:hover{ /*鼠標懸浮時頁面自動切換背景*/ background: #fff url("bg2.jpg") no-repeat center top; }
通過設置頁面背景圖片的屬性及其過渡效果,當鼠標懸浮于頁面時,頁面會自動切換成另一張背景圖片。
除此之外,也可以通過JavaScript實現頁面自動切換。具體代碼如下:
代碼示例:通過設置數組存放背景圖片,定義單張圖片的顯示時長以及當前圖片的索引,在頁面加載完畢后通過定時器實現循環播放,達到頁面自動切換的效果。
總之,無論是使用CSS還是JavaScript,都可以實現網頁自動切換的效果。根據需求選擇適合的方法即可。
上一篇css實現頁面灰色
下一篇html初始css練習