css3社会分享图标

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3社会分享图标的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Icon Fonts in Use with a Fancy Hover Effect - Demo" />
<meta name="keywords" content="social icons fonts hover with css3 transitions pseudo-elements" />
<meta name="author" content="PeHaa for PEPSized" />
<!--<link href='http://fonts.googleapis.com/css?family=Unica+One' rel='stylesheet' type='text/css'>-->
<link rel="stylesheet" href="screen.css"  media="screen" title="no title" >
<title>css3社会分享图标</title>
</head>
<body>	
	<section class="example" id="ex2">
		<header>
			<h1>Follow us :</h1>
		</header>
		<ul class="social">
			<li><a href="#" aria-hidden="true" class="icon-dribbble"></a></li>
			<li><a href="#" aria-hidden="true" class="icon-twitter"></a></li>
			<li><a href="#" aria-hidden="true" class="icon-facebook"></a></li>
			<li><a href="#" aria-hidden="true" class="icon-pinterest"></a></li>
			<li><a href="#" aria-hidden="true" class="icon-flickr"></a></li>
			<li><a href="#" aria-hidden="true" class="icon-google-plus"></a></li>
			<li><a href="#" aria-hidden="true" class="icon-tumblr"></a></li>
			<li><a href="#" aria-hidden="true" class="icon-github"></a></li>
		</ul>
	</section>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)