jQuery蛮有创意的一个分享按钮

所有的分享按钮被装在一个盒子里，点击盒盖时，盒盖展开，分享按钮被显示，点击分享后，恢复关闭状态。

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1691
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
*,*:before,*:after{
  box-sizing: border-box;
}
body{
  background:#36bfa6;
  text-align:center;
  font-family: 'Open Sans', sans-serif;
}

.share-button{
  position:absolute;
  height:36px;
  top:30%;
  margin-top:-17px;
  width:135px;
  left:50%;
  margin-left:-65px;
  background:#368b8b;
  border-radius:20px;
  overflow:hidden;
  line-height:36px;
  -webkit-user-select: none;
}
/*----- FIX overflow + transform + border-radius ---*/
.share-button:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
box-shadow: 0 0 0 50px #36bfa6;
box-sizing: content-box;
-webkit-transform: translate(0,0);
border-radius: 50px;
z-index: 3;
pointer-events: none;
}
.lid{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#fff;
  border-radius:20px;
  color:#aeaeae;
  transition: 300ms ease all;
  -webkit-transform-origin: 0 0;
  cursor:default;
z-index: 4;
}
.open .lid{
  -webkit-transform:rotateX(90deg);
}
.thank-you {
  position:absolute;
top: -100px;
left: 0;
width: 100%;
color: #fff;
  transition: 300ms ease all;
}
.thankyou .thank-you{
  position:absolute;
  top:0px;
}
.share-item{
  display:block;
  color:#368b8b;
  background:#fff;
  text-decoration:none;
  height:30px;
  width:30px;
  text-align:center;
  line-height:30px;  
  border-radius:50%;
  float:left;
  margin-left:3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  transition: 500ms ease all;
}
.share-item:active{
  background:#ccc;
  transition: 50ms ease all;
}
.share-item:nth-child(1){
-webkit-transform: translateX(200px) rotate(180deg);
}
.share-item:nth-child(2){
-webkit-transform: translateX(400px) rotate(200deg);
}
.share-item:nth-child(3){
-webkit-transform: translateX(580px) rotate(220deg);
}
.share-item:nth-child(4){
-webkit-transform: translateX(740px) rotate(240deg);
}
.share-item:nth-child(5){
-webkit-transform: translateX(880px) rotate(260deg);
}
.share-item:nth-child(6){
-webkit-transform: translateX(1000px) rotate(280deg);
}
.open .share-item{
-webkit-transform: translateX(0) rotate(0);  
margin-left:3px;
}
.share-items {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 3px 0;
width: 201px;
}
.share-items-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;  
  width : 267px;
  left: 50%;
  margin-left:-133.5px;
}
.shared .share-item{
  -webkit-transform:translateY(200px);
}
.shared .share-item:nth-child(1){
  transition: 200ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(2){
  transition: 600ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(3){
  transition: 1000ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(4){
  transition: 1400ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(5){
  transition: 1800ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(6){
  transition: 2200ms cubic-bezier(.32,-0.22,.9,.93) all;
}

HTML

所有的分享按钮被装在一个盒子里，点击盒盖时，盒盖展开，分享按钮被显示，点击分享后，恢复关闭状态。

share

编辑器支持Emmet

快捷键

所有的分享按钮被装在一个盒子里，点击盒盖时，盒盖展开，分享按钮被显示，点击分享后，恢复关闭状态。

share

使用Angular.js实现自定义的Addthis社交分享插件界面和指令

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：