文章介绍

随着CSS3的普及，她的很多优质特性被广大前端程序员熟知并使用，例如今天案例里面扯到的过渡与动画。今天带来的是一款侧边栏插件，纯CSS3实现。说到这里，我们就要想，这么一个东西到底有什么用呢？很显然，诸多网站都有这样的侧边栏，不论是天猫京东等大型电商平台，亦或是企业团队学校等小型网站。今天我们这个插件里面主要有4个小版块：[微信][微博][QQ][返回顶部]，当然他的局限性可不止这么点，你可以随意修改里面的内容以及过渡的动画。这四个板块的动画效果不尽相同，但均基于CSS3。这么一个侧边栏里面用到的知识点主要有：

• 隐藏网页元素的九种方法
• before和after伪元素的妙用
• CSS3过渡：transition
• CSS3动画：transform:scale,transform: translate
• font-awesome字体图标

案例预览

点击预览

图片预览[此图有点丑，莫怪]

技术分析

首先我们说第一点：隐藏网页元素的九种方法。显然，此案例中的效果都是通过鼠标的hover事件（或者说css的hover伪元素）来触发的，那么拿微信来说，里面的二维码等内容肯定是要先隐藏，鼠标hover之后再显示，那么问题来了，怎么隐藏呢？有同学就说了，很简单嘛，display:none;经过我的实验，使用display：none;属性不会有过渡效果，其实我们想一想也是很正常的，display规定网页元素以怎样的形式展现，none和block之间本就是瞬间变化的，因此是没有过渡和动画效果的，因此我们使用了visibility: hidden;opacity: 0;来隐藏元素，这里我们可以总结性的说一句：元素要有动画和过渡，必须牵扯到数字，例如left:0;变化至left:200px;或者opacity:0;变化至opacity:1;更多关于隐藏网页元素的方法，请参考我的另一篇博文：隐藏网页元素的九种方法及其妙用

其次就说第二点，使用before和after伪元素制作一个三角形，这里也不多说，before和after伪元素的妙用请参考我的另一篇博文：before和after伪元素的妙用

第三点就是案例的核心所在：动画，我们首先将元素隐藏，鼠标hover之后显示，并改变其位置等，来达到动画的效果

第四点：font-awesome是一套字体图标库，内置了许多字体图标。font-awesome使用教程请参考我的另一篇博文：before和after伪元素的妙用

编者感言

代码有惊喜哦0.0

案例下载

点击下载