目錄

• 效果圖
• 代碼

這種效果在大多數網站中都是常見的，屏幕右邊有一列列表，鼠標放上去之后，列表彈窗就從右邊滑出，因為常用自己寫一下方便以后直接使用。

效果圖

代碼

<div class="donate-content-div"><strong style="font-weight: bold"> <span id="donate-content-div">使用指南</span></strong><strong style="font-weight: bold"> <span id="content-div-title">搜索</span></strong><div class="content-titles" style="display: block;"><div><p style="margin: 0 0 12.5px;">我愛你中國</p></div></div></div> .donate-content-div:hover{transition:'0.3s all ease-in';right:0}* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.content-titles {max-height: 428px;position: relative;overflow: auto;}span#content-div-title {color: red;}span#donate-content-div {position: absolute;left: -63px;-webkit-transform: rotate(90deg);transform: rotate(90deg);width: auto;background: #ffc82c;height: auto;top: 21px;padding: 7px 14px;border-radius: 15px;color: #123464;font-family: initial;font-size: 18px;}.donate-content-div {border: 1px solid #0099d6;padding: 20px;background-color: #f0f0f0;display: inline-block;width: 304px;right: -304px;position: fixed;top: 40%;z-index: 9999;transition: right .35s ease-in-out;}

總結

以上是生活随笔為你收集整理的纯css实现网页侧边栏弹窗滑进滑出的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。