CSS3中提供了各種強大的動畫效果,其中按鈕上線跳動效果十分受歡迎。
button { position: relative; display: inline-block; padding: 10px 20px; font-size: 16px; color: #fff; text-decoration: none; background-color: #f21; border-radius: 8px; } button::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: inherit; box-shadow: 0 0 0 rgba(255,255,255,0.7); transition: all 0.3s ease; z-index: -1; } button:hover::before { box-shadow: 0 0 50px rgba(255,255,255,0.7); }
通過給按鈕和偽元素設定并快速切換box-shadow的屬性,實現按鈕上下跳動的效果。加上transition的屬性可以使過渡更加平滑。
上一篇mysql查詢的一些函數
下一篇css3 控制圖片顏色