羅盤CSS3是一種基于CSS3技術的視覺效果,它可以幫助我們實現指南針的效果。
.compass { width: 60px; height: 60px; border-radius: 30px; border: 4px solid #aaa; box-shadow: inset 0 0 3px #aaa; position: relative; } .compass:before { content: ""; position: absolute; top: -40px; left: -40px; width: 140px; height: 140px; border-radius: 70px; box-shadow: inset 0 0 3px #aaa; } .compass:after { content: ""; position: absolute; top: calc(50% - 24px); left: calc(50% - 2px); width: 4px; height: 48px; background: #aaa; border-radius: 2px; transform-origin: bottom center; } .compass .needle { position: absolute; top: calc(50% - 8px); left: calc(50% - 8px); width: 16px; height: 16px; background: #aaa; border-radius: 50%; box-shadow: 0 0 5px #aaa; } .compass .needle:before { content: ""; position: absolute; top: 0; left: calc(50% - 2px); width: 4px; height: calc(50% - 16px); background: #aaa; border-radius: 2px; transform-origin: bottom center; }
上述代碼中,我們定義了一個名為.compass的類,在該類中我們定義了指南針的樣式。使用偽元素:before和:after可以實現指南針外殼和指針,.needle類用于定義指針的中心部分。
上一篇過渡和css動畫的區別
下一篇css設置的邊框不顯示