CSS 列表滑動刪除是一種非常實用的效果,能讓用戶快速而方便地刪除多余的列表項。下面我們將介紹如何使用 CSS 來實現這種效果。
/* HTML 結構 */ <ul class="list"> <li>列表項 1</li> <li>列表項 2</li> <li>列表項 3</li> <li>列表項 4</li> <li>列表項 5</li> </ul> /* CSS 樣式 */ .list { list-style: none; } .list li { position: relative; } .list li:before { content: '刪除'; display: block; position: absolute; top: 0; right: -80px; width: 80px; height: 100%; background-color: red; color: white; text-align: center; line-height: 40px; font-size: 16px; transition: all 0.3s ease; } .list li:hover:before { right: 0; } .list li:after { content: ''; display: block; position: absolute; top: 0; right: 0; width: 0; height: 100%; border: 1px solid red; transition: all 0.3s ease; } .list li:hover:after { width: 80px; }
上述樣式中,通過在每個列表項上設置position: relative;
,并在其上部疊加一個position: absolute;
的偽元素來實現滑動刪除的效果。在偽元素中設置了寬度為 80px 的紅色背景及相應的刪除文字。
通過為列表項和偽元素設置過渡效果transition: all 0.3s ease;
,在鼠標懸浮時可以呈現出平滑的滑動刪除效果。
總的來說,這種 CSS 列表滑動刪除效果十分簡單實用,可以大大提升用戶操作列表的效率。在實現時需要注意兼容性及結構上的合理性,以確保效果的可靠性和性能。
上一篇mysql的優化方案
下一篇css 列表循環展示效果