一款基于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:;

  bottom:;

  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:;

}

/* 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:;

  height: 0%;

  top: 100%;

}

.is-open .ferris-base .ferris-base--main {

  height: 100%;

  top:;

  -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:;

  width:;

  margin-left: 50%;

  overflow: hidden;

  opacity:;

}

.is-open .ferris-base top-height,

.is-open .ferris-base .ferris-base--top {

  width: 108%;

  margin-left: -4%;

  overflow: visible;

  opacity:;

  -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:;

}

.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:;

  height: 5.78125rem;

  opacity:;

}

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/8022

巴特西

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

最新文章

热门文章