zoukankan      html  css  js  c++  java
  • 纯CSS3实现的顶部社会化分享按钮

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

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

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

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

    <div class="social">
        <span class="line"></span>
        <ul>
            <li class="facebook">
                <a href="#" target="_blank">
                    <i class="fa fa-facebook fa-2x"></i>
                </a>
            </li>
            <li class="twitter">
                <a href="#" target="_blank">
                    <i class="fa fa-twitter fa-2x"></i>
                </a>
            </li>
            <li class="codepen">
                <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>
            </li>
            <li class="youtube">
                <a href="#" target="_blank">
                    <i class="fa fa-youtube fa-2x"></i>
                </a>
            </li>
            <li class="instagram">
                <a href="#" target="_blank">
                    <i class="fa fa-instagram fa-2x"></i>
                </a>
            </li>
            <li class="pinterest">
                <a href="#" target="_blank">
                    <i class="fa fa-pinterest fa-2x"></i>
                </a>
            </li>
            <li class="github">
                <a href="#" target="_blank">
                    <i class="fa fa-github fa-2x"></i>
                </a>
            </li>
            <li class="flickr">
                <a href="#" target="_blank">
                    <i class="fa fa-flickr fa-2x"></i>
                </a>
            </li>
            <li class="linkedin">
                <a href="#" target="_blank">
                    <i class="fa fa-linkedin fa-2x"></i>
                </a>
            </li>
        </ul>
    </div>

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

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

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

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

    .social .line {
        position: absolute;
        top: 0; left: 0px;
        width: 100%; height: 5px;
        background: #fced00;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        z-index: 0;
    }
    .social ul {
        position: fixed;
        left: 50%; margin-left: -216px;
        list-style: none;
        color: #000;
    }
    .social ul li {
        float: left;
    }
    .social ul li a {
        position: relative;
        float: left;
        background: #fff000;
        width: 48px; height: 48px;
        text-align: center;
        color: #000;
        padding: 0 0 30px 0;
    }
    .social ul li a:hover {
        color: #fff;
    }
    .fa-facebook, .fa-twitter, .fa-youtube, .fa-instagram, .fa-pinterest, .fa-github, .fa-flickr, .fa-linkedin {
        padding: 10px 0 0 0;
    }

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

    .social ul li.facebook a:hover {
        background: #3b5998;
    }
    .social ul li.twitter a:hover {
        background: #44ccf6;
    }
    .social ul li.codepen a:hover {
        background: #cccccc;
    }
    .social ul li.youtube a:hover { 
        background: #da2d2e; 
    }
    .social ul li.instagram a:hover { 
        background: #66269e; 
    }
    .social ul li.pinterest a:hover {
        background: #c3042b;
    }
    .social ul li.github a:hover {
        background: #000000;
    }
    .social ul li.flickr a:hover {
        background: #72858c;
    }
    .social ul li.linkedin a:hover {
        background: #1c66c2; 
    }

    这段代码主要是对每一个按钮设置鼠标滑过的背景色设置,每一个按钮的背景色都不一样,这样显得色彩斑斓,非常漂亮。

    最后源代码分享一下,下载地址>>

  • 相关阅读:
    faster with MyISAM tables than with InnoDB or NDB tables
    w-BIG TABLE 1-toSMALLtable @-toMEMORY
    Indexing and Hashing
    MEMORY Storage Engine MEMORY Tables TEMPORARY TABLE max_heap_table_size
    controlling the variance of request response times and not just worrying about maximizing queries per second
    Variance
    Population Mean
    12.162s 1805.867s
    situations where MyISAM will be faster than InnoDB
    1920.154s 0.309s 30817
  • 原文地址:https://www.cnblogs.com/html5tricks/p/3710975.html
Copyright © 2011-2022 走看看