CSS3实现漂亮的文章分享样式

9月 10, 2014 发表于: HTML & CSS. 评论 (3)

Sponsor

看了今天苹果发布会的线上专题页(Apple Live – September 2014)，里面有个社交分享效果很赞，即时就喜欢上了…下面我把代码重构了一下，喜欢的同学也可以来一起研究或下载使用。

这个样式除了用于社交分享，你也能用在其它方面。

点击查看在线DEMO。

使用教程

这个交互主要使用了CSS3的transform属性来实现，总是的来说不复杂，代码也不多。

准备图标

这里我使用了font awsome图标字体，下面代码放到网页<head>里。

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

HTML代码：

<div class="box"> <a href="#nogo"><img src="http://images.shejidaren.com/wp-content/uploads/2014/09/100126KaS.jpg" width="447"/></a>
<h2>爱设计，爱分享——设计达人！</h2>
<div class="sharesheet">
<ul class="sharesheet-links">
<li><a href="#nogo"><i class="fa fa-weibo"></i></a></li>
<li><a href="#nogo"><i class="fa fa-tencent-weibo"></i></a></li>
<li><a href="#nogo"><i class="fa fa-weixin"></i></a></li>
<li><a href="#nogo"><i class="fa fa-renren"></i></a></li>
<li><a href="#nogo"><i class="fa fa-qq"></i></a></li>
<li><a href="#nogo"><i class="fa fa-facebook-square"></i></a></li>
</ul>
</div>
</div>

CSS代码：

.box {
position: relative;
width: 447px;
padding: 10px;
margin: 0 auto;
background: #fff
}
.sharesheet {
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
height: 100%;
background: rgba(0,0,0,.8);
opacity: 0;
transition: opacity 300ms ease;
}
.sharesheet-links {
display: inline-block;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
width: 21.25em;
margin:0;
padding:0;
}
.sharesheet-links li {
display: inline-block;
margin: 1.875em;
}
.sharesheet-links li a {
color: #fff;
font-size: 3em;
}

/* 利用scale属性实现图标隐藏 */
.sharesheet-links li {
-webkit-transform: scale(0);
transform: scale(0);
transition: -webkit-transform 600ms cubic-bezier(0.175, 0.885, 0.35, 1.44);
transition: transform 600ms cubic-bezier(0.175, 0.885, 0.35, 1.44);
}
/* 鼠标经过，.sharesheet透明度为100% */
.box:hover .sharesheet {
opacity: 1;
}

/* 鼠标经过时显示分享按钮 */
.box:hover .sharesheet-links li {
-webkit-transform: scale(1);
transform: scale(1);
}

/* 控制图标出现时间 */
.sharesheet-links li:nth-child(1) {
-webkit-transition-delay: 150ms;
transition-delay: 150ms
}
.sharesheet-links li:nth-child(2) {
-webkit-transition-delay: 250ms;
transition-delay: 250ms
}
.sharesheet-links li:nth-child(4) {
-webkit-transition-delay: 275ms;
transition-delay: 275ms
}
.sharesheet-links li:nth-child(3) {
-webkit-transition-delay: 350ms;
transition-delay: 350ms
}
.sharesheet-links li:nth-child(5) {
-webkit-transition-delay: 375ms;
transition-delay: 375ms
}
.sharesheet-links li:nth-child(6) {
-webkit-transition-delay: 450ms;
transition-delay: 450ms
}
/* 鼠标经过不同图标，显示相应的品牌颜色 */
a:hover {
color: #5cc3f6
}
a:hover .fa-facebook-square {
color: #3b5998
}
a:hover .fa-qq {
color: #59adeb
}
a:hover .fa-weixin {
color: #0C3
}
a:hover .fa-weibo {
color: #d72928
}
a:hover .fa-tencent-weibo {
color: #20b8e5
}
a:hover .fa-renren {
color: #105ba3
}

点击查看在线DEMO。

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

爱设计，爱分享。

CSS3实现漂亮的文章分享样式

使用教程

准备图标

HTML代码：

CSS代码：

+ 添加评论3 Responses to “CSS3实现漂亮的文章分享样式”

{ 发表评论 }

推荐书籍

最新文章

大神推荐

标签

CSS3实现漂亮的文章分享样式

使用教程

准备图标

HTML代码：

CSS代码：

与 CSS3 相关的文章

+ 添加评论3 Responses to “CSS3实现漂亮的文章分享样式”

{ 发表评论 }

推荐书籍

最新文章

大神推荐

标签