一款基于jquery和css3实现的摩天轮式分享按钮

之前分享了很多css3实现的按钮。今天要给大家带来一款基于jquery和css3实现的摩天轮式分享按钮。这款分享按钮页面底部有一个toggle按钮，单击该按钮，摩天轮按钮以动画的形式出现，各个分享按钮挂在摩天轮上。效果图如下：



在线预览 源码下载

实现的代码。

部分html代码：

<div class="ferris-base">
<div class="ferris-base--center">
<div id="" title="" class="icon ">
<svg viewbox="0 0 32 32">
<use xlink:href="#twitter-icon">
</use></svg></div>
</div>
<div class="ferris-base--top">
</div>
<div class="ferris-base--main">
</div>
<div class="ferris-base--spike is-1">
</div>
<div class="ferris-base--spike is-2">
</div>
<div class="ferris-base--handle">
</div>
</div>

部分css3代码：

* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* ENVIROMENT */
/* grid size = 10px in rem equivalent */
html {
font-size: 16px;
}
body {
background: #6ed2d2 repeat top left;
position: relative;
}
html,
body {
height: 100%;
}
.button {
background: #dd5754;
border-radius: 0.1875rem;
text-transform: uppercase;
color: #fff;
height: 3.125rem;
line-height: 3.125rem;
width: 12.5rem;
text-align: center;
letter-spacing: 0.125rem;
}
.button:hover {
background-color: #e06461;
cursor: pointer;
}
.button:active {
background-color: #dd5754;
}
.ground {
position: absolute;
left: 0;
bottom: 0;
height: 7.5rem;
width: 100%;
background: #493442  repeat bottom right;
}
.ground .button {
margin-left: auto;
margin-right: auto;
margin-top: 2.1875rem;
position: relative;
z-index: 2;
}
/* FERRIS WHEEL */
.human {
background-color: #6e6e6e;
border-radius: 50%;
height: 1.625rem;
width: 0.625rem;
position: relative;
}
.human:after {
content: '';
position: absolute;
width: 0.4375rem;
height: 0.4375rem;
background-color: inherit;
top: -0.3125rem;
border-radius: 50%;
left: 50%;
margin-left: -0.1875rem;
}
.ferris-base {
margin-left: 50px;
position: relative;
width: 14.875rem;
height: 2.4375rem;
}
.ferris-base .ferris-base--main {
background-color: #ce5250;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
height: 0%;
top: 100%;
}
.is-open .ferris-base .ferris-base--main {
height: 100%;
top: 0;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.ferris-base top-height,
.ferris-base .ferris-base--top {
position: absolute;
height: 0.75rem;
background-color: #9b2e2e;
z-index: 2;
width: 0;
margin-left: 50%;
overflow: hidden;
opacity: 0;
}
.is-open .ferris-base top-height,
.is-open .ferris-base .ferris-base--top {
width: 108%;
margin-left: -4%;
overflow: visible;
opacity: 1;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.ferris-base top-height:before,
.ferris-base .ferris-base--top:before,
.ferris-base top-height:after,
.ferris-base .ferris-base--top:after {
content: '';
position: absolute;
border: 0.75rem solid rgba(155,46,46,0);
border-left-width: 0.5rem;
border-right-width: 0.5rem;
border-top-color: #9b2e2e;
top: 0;
}
.ferris-base top-height:before,
.ferris-base .ferris-base--top:before {
left: -0.5rem;
}
.ferris-base top-height:after,
.ferris-base .ferris-base--top:after {
right: -0.5rem;
}
.ferris-base .ferris-base--spike {
height: 9.6875rem;
width: 0.9375rem;
background-color: #b33333;
position: absolute;
top: -10.125rem;
left: 50%;
margin-left: -0.46875rem;
-webkit-transform-origin: 50% top;
-ms-transform-origin: 50% top;
transform-origin: 50% top;
z-index: 0;
height: 5.78125rem;
opacity: 0;
}

注：本文爱编程原创文章，转载请注明原文地址：/article/1211818.html