CSS綠箭頭效果實現
.arrow { width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-right: 30px solid green; } .arrow:before { content: ''; position: absolute; top: -30px; left: -30px; width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-right: 30px solid green; } .arrow:after { content: ''; position: absolute; top: -30px; left: 0px; width: 30px; height: 60px; background: green; } .arrow:hover:before { border-right-color: lightgreen; animation: arrowAnim 0.5s; } .arrow:hover { border-right-color: lightgreen; animation: arrowAnim 0.5s; } @keyframes arrowAnim { 0% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
上述代碼實現了一個綠色的箭頭效果。主要分為三部分:
1. 定義箭頭的形狀。
使用border屬性定義箭頭邊框,將上下的邊框設為透明,右邊的邊框設為綠色。這樣箭頭的形狀就出來了。
2. 定義箭頭的左側部分。
使用:before偽類來實現箭頭左側的一部分,即一個與箭頭同形的三角形,通過對邊框顏色的設置,讓它與箭頭有一個連接的效果。
3. 定義箭頭的動畫效果。
使用:hover偽類實現鼠標懸停時,箭頭的右側邊框和左側三角形邊框顏色變化,并通過@keyframes定義旋轉動畫效果。