|
[tr][td] 今天要分享一款纯CSS3实现的社会化分享按钮，它放置在网页的顶部，你可以选择将它固定在网页顶部，这样对用户分享内容就十分方便。这些社会化分享按钮的图标文件来自google和bootstrap的字体文件，包含了个大社交网站的logo图标，可以先来看看效果图：
图片：061013316824540.jpg  看起来非常不错吧，非常特别的外观，图标也比较简洁明了。 我们也可以直接查看这款社会化分享按钮的DEMO演示。 接下来就来看看源代码了，源代码也非常简单，主要有HTML代码和CSS代码组成。先来看看HTML结构代码： [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] 复制代码 这里主要是利用了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-you**, .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.you** 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; [*]} 复制代码 这段代码主要是对每一个按钮设置鼠标滑过的背景色设置，每一个按钮的背景色都不一样，这样显得色彩斑斓，非常漂亮。 最后源代码分享一下，下载地址>> [/td][/tr] |
|
