CSS樣式實現加減號是一種常見的制作效果,可以為網站和應用程序增加一些交互性和視覺效果。
/*加號樣式*/ .add { position: relative; display: inline-block; width: 20px; height: 20px; cursor: pointer; } .add::before, .add::after { content: ""; position: absolute; left: 0; top: 8px; width: 100%; height: 3px; background-color: #000; } .add::after { transform: rotate(90deg); } /*減號樣式*/ .minus { position: relative; display: inline-block; width: 20px; height: 20px; cursor: pointer; } .minus::before { content: ""; position: absolute; left: 0; top: 8px; width: 100%; height: 3px; background-color: #000; } /*hover時變色*/ .add:hover::before, .add:hover::after, .minus:hover::before { background-color: #aaa; }
這些CSS樣式代碼實現了一個簡單的加減號樣式,可以應用于按鈕、菜單、列表和表單等多種場景。通過hover偽類可以為加減號增加一些動態交互效果,例如鼠標懸停時變色。在實際應用中,還需要結合HTML和JavaScript編寫交互邏輯,實現加減操作。
上一篇ajax提交form對象
下一篇css樣式基本知識