• 思缘论坛首页
  • 论坛搜索
  • 下载记录
  • 每日签到
  • 设计软件,PS下载
  • VIP素材区预览
  • 精品套图素材
  • 缘分币充值
发新话题
打印

[CSS教程] CSS3实例教程:实现漂亮的文章分享样式

CSS3实例教程:实现漂亮的文章分享样式

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



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



使用教程

这个交互主要使用了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
}
来源:设计达人

教程中需要的素材请访问:优秀的PS素材和图片素材

TOP

发新话题

关于本站 广告服务 联系我们 版权隐私 合作站点 网站地图 免责申明 管理团队

Powered by Discuz Copyright © 2005-2019 www.MissYuan.com All rights reserved.站长QQ8713688 邮箱8713688@qq.com