发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
之前分享了很多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./Article/8022
来自: 昵称10504424 > 《工作》
0条评论
发表
请遵守用户 评论公约
FE(0x01)--前端吗?我需要一个按钮
我需要一个按钮。box-shadow: 0 1px 2px #b9ecc4 inset, 0 -1px 0 #6c9f76 inset, 0 -2px 3px #b9ecc4 inset;<button type="but...
图片自适应大小的通用JS代码
图片自适应大小的通用JS代码前几天群里碰到好几个在调整内容页图片尺寸太大时自动缩小的问题,今天我在做一个别墅设计相关网站时,也碰到了这个问题,所以考虑了个通用的解决方案。那最好的解决办法,...
jQuery 动态调整图片大小
转发
jQuery中添加自定义或函数方法
方法一: jQuery.fn.setApDiv=function () { //apDiv浮动层显示位置居中控制 var wheight=$(window).height(); var wwidth=$(window).width(); var apHeight=wheight-$(...
jQuery简单实现导航栏根据滑动自动悬浮效果
今天在网上看一些别人的一些网站,都觉得很厉害,写插件什么的,无意间看到一款基于插件为导航栏自动悬浮插件,当时看到之后觉得挺简单,然后便自己也开始试着写了一下。 主要用处就是一个导航栏本来...
jQuery元素样式设置的方式
基于jquery的bootstrap在线文本编辑器插件Summernote
基于jquery的bootstrap在线文本编辑器插件Summernote.//取值var sHTML = $(''.summernote'').code();//同一页面多个sum...
通过HTML和CSS隐藏和显示元素的4种方法
通过HTML和CSS隐藏和显示元素的4种方法。这篇文章中,我们要介绍4种更为高级的显示和隐藏元素的方法,这些方法只工作在最新版本的现代浏...
css中单位em和rem的区别
css中单位em和rem的区别。上代码:(html代码如上,只是把css代码的元素长度单位变了)html { font-size: 10px; }div { font-size: 4rem...
微信扫码,在手机上查看选中内容