CSS3圓形加號是一種通過CSS3技術實現的圓形形狀的加號。這種效果可以很好地用于網頁設計和開發中的按鈕、圖標等元素中,以呈現美觀而簡潔的樣式。
.circle-plus { position: relative; display: inline-block; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; } .circle-plus:before, .circle-plus:after { content: ""; position: absolute; width: 2px; height: 15px; background-color: #FFF; top: 50%; left: 50%; transform: translate(-50%, -50%); } .circle-plus:before { transform: translate(-50%, -50%) rotate(90deg); } .circle-plus:hover:before, .circle-plus:hover:after { height: 20px; } .circle-plus:hover:before { transform: translate(-50%, -50%) rotate(45deg); } .circle-plus:hover:after { transform: translate(-50%, -50%) rotate(-45deg); }
上面的代碼展示了如何使用CSS3創建一個圓形加號。首先定義一個居中的圓形區域,接著分別在圓形區域的上下兩個方向添加兩個長條,作為加號的豎線,然后添加對應的CSS3過渡和旋轉效果以及交互效果。
此外,如果您需要更改加號的顏色、大小和動畫效果等,也可以根據自己的需求進行修改,以達到更好的視覺效果。
上一篇css li橫代碼
下一篇css li兩端對齊