CSS中有一個很有趣的特性,可以讓圖片在鼠標停留時發生圖像浮動的效果。這個特性的實現需要用到鼠標hover屬性和圖片的浮動屬性。
如上述代碼,當鼠標放到float-img類別的圖片上時,圖片會以向右旋轉20度的效果浮動起來,給人一種有趣的感覺。
除了rotate函數,CSS中還有其他的函數可以實現不同的圖像浮動效果。例如,translate函數可以讓圖片在鼠標停留時做出平移的效果。scale函數則可以讓圖片放大或縮小。
如上代碼,當鼠標放到float-img類別的圖片上時,圖片會向右下方平移10個像素。
圖像浮動效果可以讓網頁更加生動有趣,可以在圖片展示類的網頁元素中有所體現。但是要注意浮動效果不要過于夸張,影響到網頁的整體美觀度。
上一篇css鼠標放上去整行變色
下一篇css鼠標怎么設置變色