CSS3技術不斷的為網頁開發帶來新的可能性。在按鈕設計方面,CSS3也為我們提供了許多有趣的特效,例如讓按鈕抖動的特效。
.button { position: relative; display: inline-block; padding: 10px 20px; font-size: 16px; color: #ffffff; background-color: #ff6666; border-radius: 5px; cursor: pointer; animation-name: shake; animation-duration: 0.5s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.36,0.07,0.19,0.97); } @keyframes shake { 0% {transform: translateX(0);} 10% {transform: translateX(-10px);} 20% {transform: translateX(10px);} 30% {transform: translateX(-10px);} 40% {transform: translateX(10px);} 50% {transform: translateX(-10px);} 60% {transform: translateX(10px);} 70% {transform: translateX(-10px);} 80% {transform: translateX(10px);} 90% {transform: translateX(-10px);} 100% {transform: translateX(0);} }
上面的代碼使用了CSS3的關鍵幀動畫(Keyframes),通過在不同時間點上應用不同的變形(Transform)實現了按鈕抖動的效果。我們可以在按鈕的類名上添加animation-name、animation-duration、animation-iteration-count、animation-timing-function屬性來控制動畫的名稱、持續時間、循環次數以及時間函數。
使用CSS3讓按鈕動起來,能夠增強用戶的互動感和趣味性,可以吸引用戶的眼球,提高網站的用戶體驗。
上一篇css3解決移動端輸入框
下一篇mysql查詢一列的和