CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 纯CSS3实现的顶部社会化分享按钮

纯CSS3实现的顶部社会化分享按钮

        今天要分享一款纯CSS3实现的社会化分享按钮,它放置在网页的顶部,你可以选择将它固定在网页顶部,这样对用户分享内容就十分方便。这些社会化分享按钮的图标文件来自google和bootstrap的字体文件,包含了个大社交网站的logo图标,可以先来看看效果图:




看起来非常不错吧,非常特别的外观,图标也比较简洁明了。


我们也可以直接查看这款社会化分享按钮的DEMO演示。



接下来就来看看源代码了,源代码也非常简单,主要有HTML代码和CSS代码组成。先来看看HTML结构代码:


  1. <div class="social">
  2.     <span class="line"></span>
  3.     <ul>
  4.         <li class="facebook">
  5.             <a href="#" target="_blank">
  6.                 <i class="fa fa-facebook fa-2x"></i>
  7.             </a>
  8.         </li>
  9.         <li class="twitter">
  10.             <a href="#" target="_blank">
  11.                 <i class="fa fa-twitter fa-2x"></i>
  12.             </a>
  13.         </li>
  14.         <li class="codepen">
  15.             <a href="#" target="_blank"><img src="http://www.gettyicons.com/free-icons/222/simple/png/256/codepen_256.png" alt="CODEPEN" width="48" height="48"></a>
  16.         </li>
  17.         <li class="you**">
  18.             <a href="#" target="_blank">
  19.                 <i class="fa fa-you** fa-2x"></i>
  20.             </a>
  21.         </li>
  22.         <li class="instagram">
  23.             <a href="#" target="_blank">
  24.                 <i class="fa fa-instagram fa-2x"></i>
  25.             </a>
  26.         </li>
  27.         <li class="pinterest">
  28.             <a href="#" target="_blank">
  29.                 <i class="fa fa-pinterest fa-2x"></i>
  30.             </a>
  31.         </li>
  32.         <li class="github">
  33.             <a href="#" target="_blank">
  34.                 <i class="fa fa-github fa-2x"></i>
  35.             </a>
  36.         </li>
  37.         <li class="flickr">
  38.             <a href="#" target="_blank">
  39.                 <i class="fa fa-flickr fa-2x"></i>
  40.             </a>
  41.         </li>
  42.         <li class="linkedin">
  43.             <a href="#" target="_blank">
  44.                 <i class="fa fa-linkedin fa-2x"></i>
  45.             </a>
  46.         </li>
  47.     </ul>
  48. </div>
复制代码

        这里主要是利用了ul li列表结构,么一个li都定义了相应的class,比如第一个定义了class="facebook",在之后的css中,将会对facebook类进行样式定义,这样做会非常方便。


然后再看看CSS代码,也比较简单:


  1. @import url(http://fonts.googleapis.com/css?family=Quicksand:300,400);
  2. @import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
复制代码

先是引入了google和bootstrap的字体文件,下面可以利用这两个文件来渲染按钮的小图标。


  1. .social .line {
  2.     position: absolute;
  3.     top: 0; left: 0px;
  4.     width: 100%; height: 5px;
  5.     background: #fced00;
  6.     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  7.     z-index: 0;
  8. }
  9. .social ul {
  10.     position: fixed;
  11.     left: 50%; margin-left: -216px;
  12.     list-style: none;
  13.     color: #000;
  14. }
  15. .social ul li {
  16.     float: left;
  17. }
  18. .social ul li a {
  19.     position: relative;
  20.     float: left;
  21.     background: #fff000;
  22.     width: 48px; height: 48px;
  23.     text-align: center;
  24.     color: #000;
  25.     padding: 0 0 30px 0;
  26. }
  27. .social ul li a:hover {
  28.     color: #fff;
  29. }
  30. .fa-facebook, .fa-twitter, .fa-you**, .fa-instagram, .fa-pinterest, .fa-github, .fa-flickr, .fa-linkedin {
  31.     padding: 10px 0 0 0;
  32. }
复制代码

上面这段主要定义了整个按钮控件的整体外观,包括每一个按钮项的边距之类的设置。


  1. .social ul li.facebook a:hover {
  2.     background: #3b5998;
  3. }
  4. .social ul li.twitter a:hover {
  5.     background: #44ccf6;
  6. }
  7. .social ul li.codepen a:hover {
  8.     background: #cccccc;
  9. }
  10. .social ul li.you** a:hover {
  11.     background: #da2d2e;
  12. }
  13. .social ul li.instagram a:hover {
  14.     background: #66269e;
  15. }
  16. .social ul li.pinterest a:hover {
  17.     background: #c3042b;
  18. }
  19. .social ul li.github a:hover {
  20.     background: #000000;
  21. }
  22. .social ul li.flickr a:hover {
  23.     background: #72858c;
  24. }
  25. .social ul li.linkedin a:hover {
  26.     background: #1c66c2;
  27. }
复制代码

       这段代码主要是对每一个按钮设置鼠标滑过的背景色设置,每一个按钮的背景色都不一样,这样显得色彩斑斓,非常漂亮。
       最后源代码分享一下,下载地址>>


【纯CSS3实现的顶部社会化分享按钮】相关文章

1. 纯CSS3实现的顶部社会化分享按钮

2. 一款纯css3实现的颜色渐变按钮

3. jQuery鼠标悬停图片分享按钮动画

4. 纯CSS3实现圆角按钮

5. 效果非常酷!纯CSS3实现的图片滑块程序

6. 超可爱 纯CSS3实现的小猪、小老鼠、小牛

7. 7款纯CSS3实现的炫酷动画应用

8. 纯CSS实现的3D简洁按钮设计

9. 分享Jquery+CSS3实现的3D下拉菜单特效

10. 用纯CSS3实现图片幻灯片切换效果

本文来源:https://www.51html5.com/a1039.html

点击展开全部

﹝纯CSS3实现的顶部社会化分享按钮﹞相关内容

「纯CSS3实现的顶部社会化分享按钮」相关专题

其它栏目

也许您还喜欢