在網(wǎng)頁(yè)設(shè)計(jì)中,我們常常需要使用一些動(dòng)畫(huà)效果來(lái)吸引用戶(hù)的注意力。其中,input css 動(dòng)畫(huà)是一種非常流行的動(dòng)畫(huà)效果之一。它可以為文本框、按鈕等表單元素添加動(dòng)畫(huà)效果,使得用戶(hù)操作更加有趣。
輸入框動(dòng)畫(huà)的代碼示例: input { border: none; border-bottom: solid 1px #ccc; outline: none; transition: border-bottom-color 0.3s ease-in-out; } input:focus { border-bottom-color: #FF6B6B; }
代碼中,我們給輸入框添加了一個(gè)邊框底部的樣式,并且添加了一個(gè)過(guò)渡動(dòng)畫(huà)效果。當(dāng)輸入框聚焦時(shí),邊框底部會(huì)發(fā)生顏色變化,形成一個(gè)動(dòng)畫(huà)效果。
按鈕動(dòng)畫(huà)的代碼示例: button { position: relative; background-color: #EEE; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; transition: 0.5s; overflow: hidden; } button span { position: absolute; display: block; background-color: #FF6B6B; width: 0; height: 100%; top: 0; left: -100%; z-index: -1; transition: 1s; } button:hover span { left: 0; width: 100%; } button:hover { color: #FFF; }
代碼中,我們給按鈕元素添加了一個(gè)背景顏色,并添加了一個(gè)過(guò)渡動(dòng)畫(huà)效果。當(dāng)鼠標(biāo)懸停在按鈕上時(shí),按鈕會(huì)變成帶有紅色背景的狀態(tài)。同時(shí),顏色變化的同時(shí)也會(huì)有一個(gè)span元素從左側(cè)開(kāi)始展開(kāi),最終填滿整個(gè)按鈕,形成一個(gè)動(dòng)畫(huà)效果。
總之,在設(shè)計(jì)網(wǎng)頁(yè)時(shí),合理利用 input css 動(dòng)畫(huà),不僅可以為網(wǎng)頁(yè)添加更多的趣味性,還可以提升用戶(hù)體驗(yàn),值得我們使用。