CSS3实现侧边栏快速定位的隐藏和消失
生活随笔
收集整理的這篇文章主要介紹了
CSS3实现侧边栏快速定位的隐藏和消失
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Dome
<!DOCTYPE html> <html> ? <head><meta charset="utf-8"><title>CSS3隱藏懸浮網(wǎng)站左側(cè)標(biāo)簽式導(dǎo)航欄代碼 </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>復(fù)制代碼效果：?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
總結(jié)
以上是生活随笔為你收集整理的CSS3实现侧边栏快速定位的隐藏和消失的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 白发人送黑发人的心情说说181个
- 下一篇： 另一种纯CSS相册