`
alyouge
  • 浏览: 193654 次
  • 性别: 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左侧边栏3D酷炫导航展开效果jquery特效代码.zip

    该资源是一个基于CSS3和jQuery实现的左侧边栏3D酷炫导航展开效果的代码库，适用于企业网站或商城网站的界面设计。这个特效能够为用户带来动态且富有视觉冲击力的浏览体验，提升网站的专业性和吸引力。 首先，我们要...

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

    在本文中，我们将深入探讨如何使用CSS3的`transform`属性来实现14种不同的侧边栏导航隐藏和显示的动画效果。这些效果对于优化移动设备和其他小屏幕设备的用户体验至关重要，因为它们允许用户轻松地访问和隐藏导航...

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

    3. **CSS3动画**：在这些隐藏侧边栏菜单中，可能运用了CSS3的`transform`属性，它可以改变元素的大小、位置和形状，比如通过`translateX()`实现菜单的滑动效果。`opacity`属性可以控制元素的透明度，创造出淡入淡出...

    CSS3侧边栏卡片式菜单导航.rar

    【标题】"CSS3侧边栏卡片式菜单导航.rar"是一个关于网页设计的资源，它包含了一种使用HTML和CSS3技术实现的侧边栏菜单导航的实例。这个菜单导航的特点是采用卡片式设计，既实用又具有良好的视觉效果。 在网页设计中...

    css实现侧边栏弹窗滑进滑出.zip

    本教程通过"css实现侧边栏弹窗滑进滑出.zip"文件，将教会你如何仅使用CSS来创建这样一个动态效果。以下是实现这一功能的核心知识点和详细步骤： 1. **CSS选择器**：首先，你需要熟悉CSS选择器，如类选择器（`.class...

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

    在这个名为“6种css3和js显示/隐藏侧边栏效果”的资源中，我们可以深入学习如何利用CSS3和JavaScript来创建交互式的侧边栏导航，这些侧边栏可以从页面的上、下、左、右四个方向进行隐藏和显示，为用户带来更加流畅和...

    jQuery和css3侧边栏滑动显示相关文章插件

    总的来说，这个jQuery和CSS3侧边栏滑动显示相关文章插件巧妙地结合了两者的优势，既实现了动态效果，又保证了界面的美观和用户体验。对于开发者来说，它提供了一个可自定义、易于集成的解决方案，能够快速提升网站的...

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

    但在这个主题中，我们主要关注的是纯CSS3实现的动画效果。 在压缩包中的文件中，你可能会找到HTML示例文件和对应的CSS样式表。这些文件展示了各种不同的侧边栏菜单动画效果，包括但不限于滑动、折叠、旋转、淡入...

    CSS3侧边栏卡片式菜单导航.zip

    "CSS3侧边栏卡片式菜单导航"是利用CSS3特性实现的一种交互性极强的网页导航设计。这种菜单在用户鼠标滑过时，能够展现出卡片向外抽出的动画效果，极大地提升了用户体验，使得网站的导航部分更加生动和引人入胜。 ...

    CSS3侧边栏卡片式菜单导航.rar_CSS3侧边栏卡片式菜单导航_quiet7s1_wrappedvss

    本项目，"CSS3侧边栏卡片式菜单导航"，正是利用了CSS3的新特性来实现一个动态且具有自适应性的侧边栏菜单。 首先，让我们了解一下侧边栏菜单的基本概念。侧边栏通常位于网页的左侧或右侧，提供一种紧凑的方式来展示...

    jQuery和css3炫酷隐藏侧边栏菜单特效插件

    在隐藏侧边栏菜单中，CSS3的过渡效果用于实现侧边栏滑动出现和消失的动画。通过设置特定的CSS属性，如`transform`和`transition-duration`，可以控制侧边栏滑出和滑入的速度和方式。 此外，插件还支持二级子菜单，...

    简洁时尚的jQuery和CSS3侧边栏菜单插件

    总的来说，sidenav是一款将jQuery的实用性和CSS3的美化效果完美结合的侧边栏菜单插件，它通过简洁的代码和优雅的效果，为网页设计师和开发者提供了一个高效、灵活的导航解决方案。无论你是初学者还是经验丰富的专业...

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

    【纯CSS3抽屉式滑动侧边栏菜单设计】是一种流行且实用的网页交互元素，它通过CSS3的新特性实现动态效果，为用户提供了友好的界面体验。在这个设计中，侧边栏菜单隐藏在屏幕边缘，当鼠标悬停或点击特定触发元素时，它...

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

    在本文中，我们将深入探讨如何使用CSS3来实现侧边栏的展开收起动画。CSS3引入了关键帧动画（@keyframes），这使得我们能够创建丰富的动态效果，包括侧边栏的滑动展开和收起。下面我们将详细介绍这个过程，并提供相关...

    jQuery和css3实用滑动侧边栏购物车插件

    总结，这款jQuery和CSS3滑动侧边栏购物车插件结合了两者的优势，实现了优雅的动画效果和良好的用户体验。开发者可以根据需求进行定制，以适应各种电商网站的需求。同时，理解并掌握其工作原理，对于提升Web开发技能...

    侧边栏菜单 纯css

    纯CSS的侧边栏菜单是指不依赖JavaScript或者其他编程语言，仅通过CSS（层叠样式表）来实现菜单的展示、交互效果和布局。这种菜单设计方式具有响应性好、性能高效以及易于维护的优点。以下将详细介绍纯CSS侧边栏菜单...

    jQuery和css3侧边栏滑出式图片介绍插件

    通过设置合适的值，可以实现侧边栏从屏幕右侧无缝滑出的效果，同时确保在支持CSS3的浏览器中平滑流畅。 **插件的结构和文件组成** - `index.html`: 这是插件的主要入口文件，包含HTML结构和JavaScript引用。HTML...

    jQuery+CSS3左侧边栏圣诞老人滑动面板特效

    本篇文章将深入解析一款利用jQuery和CSS3技术实现的“左侧边栏圣诞老人滑动面板特效”，这款特效为网页增添了一份独特的节日气氛，让访问者在浏览过程中感受到浓厚的圣诞气息。 首先，我们要理解jQuery和CSS3在其中...

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