[原创] 纯CSS3实现多功能网站侧边栏

文章介绍

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

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

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

article3-1

技术分析

首先我们说第一点:隐藏网页元素的九种方法。显然,此案例中的效果都是通过鼠标的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

共有 7 条评论

  1. 呵呵

    不错

  2. FXIT

    呃。我想问问这个可以用在single的主题上面吗?或者是single主题怎么加多点侧边栏?谢谢~

  3. Gengxin

    怎么弄到网站上阿

    1. Vince

      你懂css就知道 不懂我也说不清

  4. 很二的男人

    怎么弄到网站上呀

  5. 不错

    [钱]

  6. vince

    测试

Top