在制作手機網頁的過程中,選中效果是一項非常重要的設計元素,可以使得頁面交互更加人性化。而實現選中效果可以通過CSS來實現。
/**設置選中樣式**/ * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*去掉默認的選中樣式*/ } /**添加選中效果**/ a:active, button:active { opacity: 0.7; /*改變按鈕或鏈接的透明度*/ } input[type="radio"]:checked, input[type="checkbox"]:checked { /*選中的樣式*/ color: #fff; /*文字變白色*/ background-color: #007aff; /*背景顏色*/ border-color: #007aff; /*邊框變藍*/ }
以上是一個CSS實現選中效果的簡單例子,通過設置選中樣式和添加選中效果,我們可以達到非常好的交互效果。在移動端,這種效果尤為重要,因為用戶對于一個好的交互體驗,會更傾向于選擇你的網站。希望這篇文章可以給正在開發移動端網站的小伙伴們提供幫助。
下一篇css手機站菜單js