純 CSS 左側滑動效果是指網頁中某個區(qū)域在頁面加載時默認處于隱藏狀態(tài),鼠標觸發(fā)某個操作后,該區(qū)域從左側滑出的動畫效果。這種效果可以增強頁面的交互性和視覺效果,也可以在需要時提供一種更好的用戶體驗。
HTML 代碼部分: <div class="slider"> <button class="slide-button">展開</button> <div class="slider-content"> <p>這里是要展開的內容</p> </div> </div> CSS 代碼部分: .slider { position: relative; overflow: hidden; width: 300px; } .slide-button { position: absolute; left: 0; top: 0; z-index: 1; background-color: #09F; color: #FFF; padding: 10px; border: none; outline: none; cursor: pointer; transition: transform 0.2s ease-in-out; } .slider-content { width: 100%; height: 100%; position: absolute; top: 0; left: -300px; background-color: #FFF; transition: transform 0.2s ease-in-out; } .slider:hover .slide-button { transform: translateX(300px); } .slider:hover .slider-content { transform: translateX(300px); }
在代碼中,使用了一個包含按鈕和內容區(qū)域的容器,并對它們添加了一些樣式。當鼠標懸停在該容器上時,按鈕和內容區(qū)域都會從左側滑出。
以上就是純 CSS 左側滑動效果的實現(xiàn)方式和相關代碼,希望對你有所幫助。