今天我們來聊一聊CSS捉迷藏韓國泡面!
/*韓國泡面圖片鼠標移動事件*/ img:hover{ opacity: 0.5; /*透明度*/ transform: rotate(10deg); /*旋轉*/ box-shadow: 5px 5px 10px grey; /*陰影*/ transition: all 0.3s ease-in-out; /*過渡效果*/ } /*泡面描述文字鼠標移動事件*/ p:hover { color: white; /*字體顏色*/ background-color: #F16E6E; /*背景色*/ padding: 5px; /*內邊距*/ border-radius: 10px; /*圓角*/ transition: all 0.3s ease-in-out; /*過渡效果*/ }
通過上面的代碼,我們可以讓韓國泡面的圖片在鼠標移動時產生一些特效,比如透明度、旋轉、陰影等。同時,我們也可以讓鼠標移到泡面的描述文字上時,產生顏色和背景色的變化,以及圓角和過渡效果等。
這些小技巧可以讓我們在網頁設計時更加細致地處理元素的交互性,從而增加用戶對網頁的好感度和使用體驗。
上一篇css按鈕怎么去掉填充
下一篇ajax執行完畢跳轉頁面