CSS3实现漂亮的文章分享样式
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。
赞助商链接
与 CSS3 相关的文章
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
+ 添加评论3 Responses to “CSS3实现漂亮的文章分享样式”
{ 发表评论 }
推荐书籍
-
艺术的故事艺术与审美入门之书 -
DON'T MAKE ME THINK设计师必看 -
《移动应用UI设计模式》手机APP设计 -
《设计心理学 全四册》高阶技能！ -
JavaScript权威指南(第5版)只能说牛X -
《见微知著》Web用户体验入门书籍
Archives
- 2023 年 4 月
- 2022 年 10 月
- 2022 年 9 月
- 2021 年 7 月
- 2021 年 6 月
- 2020 年 6 月
- 2020 年 5 月
- 2020 年 4 月
- 2020 年 3 月
- 2020 年 2 月
- 2020 年 1 月
- 2019 年 12 月
- 2019 年 11 月
- 2019 年 10 月
- 2019 年 9 月
- 2019 年 8 月
- 2019 年 7 月
- 2019 年 6 月
- 2019 年 5 月
- 2019 年 4 月
- 2019 年 3 月
- 2019 年 2 月
- 2019 年 1 月
- 2018 年 12 月
- 2018 年 11 月
- 2018 年 10 月
- 2018 年 9 月
- 2018 年 8 月
- 2018 年 7 月
- 2018 年 6 月
- 2018 年 5 月
- 2018 年 4 月
- 2018 年 3 月
- 2018 年 2 月
- 2018 年 1 月
- 2017 年 12 月
- 2017 年 11 月
- 2017 年 10 月
- 2017 年 9 月
- 2017 年 8 月
- 2017 年 7 月
- 2017 年 6 月
- 2017 年 5 月
- 2017 年 4 月
- 2017 年 3 月
- 2017 年 2 月
- 2017 年 1 月
- 2016 年 12 月
- 2016 年 11 月
- 2016 年 10 月
- 2016 年 9 月
- 2016 年 8 月
- 2016 年 7 月
- 2016 年 6 月
- 2016 年 5 月
- 2016 年 4 月
- 2016 年 3 月
- 2016 年 2 月
- 2016 年 1 月
- 2015 年 12 月
- 2015 年 11 月
- 2015 年 10 月
- 2015 年 9 月
- 2015 年 8 月
- 2015 年 7 月
- 2015 年 6 月
- 2015 年 5 月
- 2015 年 4 月
- 2015 年 3 月
- 2015 年 2 月
- 2015 年 1 月
- 2014 年 12 月
- 2014 年 11 月
- 2014 年 10 月
- 2014 年 9 月
- 2014 年 8 月
- 2014 年 7 月
- 2014 年 6 月
- 2014 年 5 月
- 2014 年 4 月
- 2014 年 3 月
- 2014 年 2 月
- 2014 年 1 月
- 2013 年 12 月
- 2013 年 11 月
- 2013 年 10 月
- 2013 年 9 月
- 2013 年 8 月
- 2013 年 7 月
- 2013 年 6 月
- 2013 年 5 月
- 2013 年 4 月
- 2013 年 3 月
- 2013 年 2 月
- 2013 年 1 月
- 2012 年 12 月
- 2012 年 11 月
- 2012 年 10 月
- 2012 年 9 月
- 2012 年 8 月
- 2012 年 7 月
- 2012 年 6 月
- 2012 年 5 月
- 2012 年 4 月
- 2012 年 3 月
- 2012 年 2 月
- 2012 年 1 月
- 2011 年 12 月
- 2011 年 11 月
- 2011 年 10 月
- 2011 年 9 月
- 2011 年 8 月
- 2011 年 7 月
- 2011 年 6 月
- 2011 年 5 月
- 2011 年 4 月
- 2011 年 3 月
- 2011 年 2 月
- 2011 年 1 月
- 2010 年 12 月
- 2010 年 11 月
赞助商
CSS3实现漂亮的文章分享样式
很喜欢！
很实用