`
alyouge
  • 浏览: 190612 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

css3 实现边栏效果

csshtml 
阅读更多 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.toolbar {
    width: 36px;
    height: 150px;
    position: fixed;
    bottom: 15px;
    right: 15px;
    text-align: center;
}

.toolbar a {
    width: 36px;
    display: block;
    font-size: 12px;
    padding: 4px;
    font-weight: bold;
    color: #EEE;
    cursor: pointer;
    margin-bottom: 1px;
    position: relative;
    background-color: #0A908B;
}

.toolbar a .t-layer {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #00b3e2;
    bottom: 0;
    right: 39px;
    opacity: 0;
    filter: opacity(0);
    transform: scale(0);
    transition: all 1s;
    transform-origin: right bottom;
    box-shadow: 3px 3px 2px #CCC;
}

.toolbar a:hover .t-layer {
    opacity: 1;
    filter: opacity(1);
    transform: scale(1);
}



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边栏工具条</title>
    <link href="dest/asset/all-min.css" rel="stylesheet">
</head>
<body>
    <div class="toolbar">
        <a><span class="t-layer"></span>微信扫码</a>
        <a><span class="t-layer"></span>微博帐号</a>
        <a><span class="t-layer"></span>QQ<br>平台</a>
        <a><span class="t-layer"></span>网页导航</a>
    </div>
</body>
</html>
分享到：
webstorm 安装 grunt
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css3 transform 14种侧边栏导航的隐藏和显示动画效果

    利用css3 transform属性制作的14种不同效果的侧边栏导航的隐藏和显示动画效果。该侧边栏导航可用于移动设备等小屏幕设备，效果极赞。

    9种html5+css3隐藏侧边栏导航菜单动画效果.rar

    9种html5+css3隐藏侧边栏导航菜单动画效果;有波浪形、滑动形、角落隐藏形，方便用于模板，可直接使用，快速建网

    CSS3 实现侧边栏展开收起动画

    主要介绍了如何使用CSS3 实现侧边栏展开收起动画，并附上了示例代码，非常的详细，推荐给需要的小伙伴。

    6种css3和js显示/隐藏侧边栏效果

    这是一款使用css3和js制作的侧边栏显示和隐藏效果的网页布局。这个侧边栏显示和隐藏效果的侧边栏可以在页面的上、下、左、右四个方向隐藏显示。

    纯CSS3抽屉式滑动侧边栏菜单设计

    这是一款使用纯CSS3制作的抽屉式滑动侧边栏菜单设计效果。该侧边栏在鼠标滑过菜单项时，会以平滑的方式滑出相应的主菜单，就像拉开抽屉的效果，非常的时尚。

    4种CSS3超酷移动手机滑动隐藏侧边栏菜单特效

    这是一组共4种效果非常炫酷的CSS3移动手机滑动...这四种效果分别是：默认的点击滑动侧边栏菜单效果、带3D transforms的滑动侧边栏效果、文字缩放和淡入淡出效果的滑动侧边栏以及使用translate来实现滑动侧边栏的效果。

    js+css实现右侧边栏抽屉功能效果

    js实现抽屉效果：点击实现右侧弹出内容页面特效，点击空白遮罩处或关闭按钮可以隐藏弹出的页面。 本特效常用于各类后台管理系统中。 使用帮助： 调用函数 rightWindows(title, content, isIframe); 参数说明： * ...

    js+css3侧边栏滚动显示首字母索引特效

    基于js+css3实现的一款简单的侧边栏滚动显示首字母索引特效。

    html+jquery+CSS实现最简单的右侧导航栏效果

    html+jquery+CSS实现最简单的右侧导航栏效果

    JS+CSS实现侧边栏跟随浏览器滚动效果

    看月光博客，卢松松博客，文章页的侧边栏都可以随着浏览器滚动而停留在页面，羡慕了吧。其实我们也可以用这种特效的呢。下面，就讲讲如何实现这个效果吧~这个是卢松松博客原创的，我稍稍介绍了一下而已哈！

    右侧弹出抽屉

    右侧弹出抽屉效果，希望能对需要的人提供些帮助

    css3实现针线缝合效果(图解步骤)

    什么是CSS3缝合效果,可以参考一下相关网站(IT EXPRESS)侧边栏就是用了CSS3的缝合效果做出来的,感兴趣的朋友可以了解下，或许本文对你学习css3有所帮助

    css3超酷tab选项卡式页面切换特效

    这是一款使用纯css3制作的类似tab选项卡的全屏页面切换特效插件。该tab选项卡的选项以侧边栏的形式排列，点击每个选项就会以动画的显示进行全屏页面切换。

    H5+CSS3.zip

    效果标签： 标签实现换行效果，特殊字符&nbsp;实现空格效果，标签实现水平线； 列表标签：使用&lt;ul&gt;&lt;li&gt;实现无序列表，使用&lt;ol&gt;&lt;li&gt;实现有序列表； 使用标签添加图片，使用标签添加链接，使用table添加表格，...

    CSS3 完美实现圆角效果

    现在使用CSS3 技术不需要图片即可实现圆角，把侧边栏标题背景的圆角效果和搜索框的圆角效果用 CSS3 实现。记录一下以便以后使用。W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性：border-radius，Firefox 和 Safari ...

    sidebar-transitions边栏过渡效果

    侧边栏滑动菜单Sidebar Transitions,多种css3特效变换

    CSS3轻松实现圆角效果

    在Web前端页面实现圆角效果，CSS3帮你轻松实现，一个人人皆知的属性。 CSS3圆角的优点 传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多...

    基于Html+css+js实现的静态购物网站

    4.设计商品分类展示效果(样式自定义)，每件商品必须有：商品名称、图片、价格内容；商品数目不少于20个。 4.设计侧边栏：商品栏目导航或者其他你认为实用的功能。 5.提供商品购买操作功能，编写代码，实现以下功能：...

Magicbox
Global site tag (gtag.js) - Google Analytics