首页 > 代码库 > 一款基于jquery和css3实现的摩天轮式分享按钮
一款基于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;}
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/8022
一款基于jquery和css3实现的摩天轮式分享按钮
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。