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

最新推荐文章于 2023-07-06 12:59:53 发布

静水流深之鑫

最新推荐文章于 2023-07-06 12:59:53 发布

阅读量3.5k

点赞数 1

分类专栏： CSS3

本文链接：https://blog.csdn.net/qq_26941173/article/details/84781390

版权

CSS3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>

效果：
在这里插入图片描述

静水流深之鑫

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现侧边栏快速定位的隐藏和消失

Dome&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;CSS3隐藏悬浮网站左侧标签式导航栏代码 &amp;lt;/title&amp;gt;
复制链接

扫一扫