當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3实现侧边栏快速定位的隐藏和消失

發布時間：2023/12/31 CSS 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3实现侧边栏快速定位的隐藏和消失小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Dome

<!DOCTYPE html> <html> ? <head><meta charset="utf-8"><title>CSS3隱藏懸浮網站左側標簽式導航欄代碼 </title><style type="text/css"> ?a:link,a:hover,a:visited,a:active {color: #fff;text-decoration: none;} ?body {height: 100%;width: 100%;margin: 0;padding: 0;background: #fff;} ?.card-holder {position: fixed;width: 0px;overflow: visible;right: 0px;} ?.card-wrapper {display: inline-block;float: right;clear: both;} ?.card {position: relative;left: 100px;padding: 7px 32px 7px 64px;margin-top: 15px;x-box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.5);box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.5);background: #fff;transition: all 0.3s ease-in-out 0.1s;border-radius: 5px;} ?.card:hover {position: relative;left: 100%;margin-left: -100px;box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.5),0 8px 8px -8px rgba(0, 0, 0, 0.5);transition: all 0.3s ease-in-out;} ?.card-content {display: inline-block;color: #fff;font-family: 'Droid Sans', sans-serif;font-size: 16px;font-weight: bold;white-space: nowrap;position: relative;left: -15px;} ?.bg-01 {background: #977e78;} ?</style> </head> ? <body> ?<div class='card-holder'><div class='card-wrapper'><a href='#'><div class='card bg-01'><span class='card-content'>更多</span></div></a></div></div> ? </body> </html>復制代碼

效果：?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

總結

以上是生活随笔為你收集整理的CSS3实现侧边栏快速定位的隐藏和消失的全部內容，希望文章能夠幫你解決所遇到的問題。

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