在網頁設計中，圖片的使用頻率和重要性越來越高。而且，圖片更是頁面的重要組成部分之一。為了使網頁更加的豐富多彩, 可以加入一些隨機刷新的特效。那么，當我們需要讓一張圖片隨機更換時，該怎么做呢？

在 CSS 中, 我們通過使用偽類選擇器”:hover”等屬性，可以給元素添加鼠標移入或移出的樣式效果。這是因為 CSS 可以改變元素的樣式，也可以改變元素的屬性。在實現圖片刷新隨機變化的時候，我們也可以使用 CSS 樣式實現。

.HTML {background:#E6E6E6;} 
#Img {width:200px; height:200px;} 
/* css3 切換 transform anational */
#Img:hover {transform:rotate(360deg);} 
/* css3 切換 opacity */
#Img:hover {opacity:.2;} 
/* 選項卡切換——不用Preload可以實現隨機切換 */
#Img1 {position:absolute; top:0px; left:0px; z-index:1;} 
#Img2 {position:absolute; top:0px; left:0px; z-index:2;} 
#Img3 {position:absolute; top:0px; left:0px; z-index:3;} 
/* CSS3動畫 keyframes實現 */
@keyframes shift {
　　0% {transform:rotate(0);}
　　20% {transform:rotate(20deg);}
　　40% {transform:rotate(40deg);}
　　60% {transform:rotate(60deg);}
　　80% {transform:rotate(80deg);}
　　100% {transform:rotate(100deg);}
}
#Img:hover {animation:shift 1s ease forwards ;}

以上是實現圖片刷新隨機變化的幾種方法，但是，它們需要的前提是每張圖片的大小和比例是完全一樣的,否則就會出現缺陷。因此，實現圖片隨機刷新的同時也需要考慮其實際使用效果和應用場景。