仿Ios assistiveTouch 悬浮辅助球工具

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            .assistive-wrap{

                        width: 58px;

                        height: 58px;

                        position: fixed;

                        top: 50%;

                        margin-top: -29px;

                        left: 1px;

                    }

                    .assistive-touch{

                        width: 100%;

                        height: 100%;

                        background: #343434;

                        border-radius: 10px;

                        opacity: .3;

                        position: relative;

                    }

                    .assistive-touch:before, .assistive-touch:after, .assistive-touch span{

                        content: '';

                        position: absolute;

                        border-radius: 100%;

                        box-shadow: 0 0 2px rgba(30, 30, 30, .5);

                        display: block;

                        background: rgba(255, 255, 255, .6);

                    }

                    .assistive-touch:before{

                        width: 42px;

                        height: 42px;

                        left: 8px;

                        top: 8px;

                        opacity: .5;

                    }

                    .assistive-touch span{

                        width: 34px;

                        height: 34px;

                        left: 12px;

                        top: 12px;

                    }

                    .assistive-touch:after{

                        width: 26px;

                        height: 26px;

                        left: 16px;

                        top: 16px;

                        background: #fff;

                    }

        </style>

    </head>

    <body>

        <div class="assistive-wrap">

            <div class="assistive-touch">

                <span></span>

            </div>

        </div>

    </body>

</html>

Html - 仿Ios assistiveTouch 悬浮辅助球工具的更多相关文章

  1. android 仿ios 对话框已封装成工具类

    对话框 在android中是一种非经常见的交互提示用户的方式,可是非常多产品狗都叫我们这些做android的仿ios,搞的我们android程序猿非常苦逼,凭什么效果老是仿ios,有没有一点情怀,只是 ...

  2. Ion-affix & Ion-stick 仿IOS悬浮列表插件

    Ion-affix & Ion-stick 仿IOS悬浮列表插件 Ion-affix 1.相关网页 Ion-affix 2.环境准备: 执行命令 bower install ion-affix ...

  3. fir.im Weekly - 17 个提升 iOS 开发效率的必备工具

    本期 fir.im Weekly 精选了一些iOS 开发工具和动画源码分享,希望每个开发者能专注效率.实用.灵感.  iOS开发工具--如何优化ipa包大小 @iOS程序犭袁 推荐了关于"如 ...

  4. iOS及时log日志查看工具 （iConsole）

    github下载地址:https://github.com/nicklockwood/iConsole 偶然看到的一个iOS及时log日志查看工具,通过该工具,我们可以在任何想看日志的时候,通过手势呼 ...

  5. 20个可以帮你简化iOS app开发流程的工具

    这里推荐20个可以帮你简化iOS app开发流程的工具.很多开发者都使用过这些工具,涉及原型和设计.编程.测试以及最后的营销,基本上涵盖了整个开发过程. 原型和设计 有了一个很好的创意后,你要做的不是 ...

  6. IOS开发之网络开发工具

    IOS开发之网络开发工具 做移动端开发  常常会涉及到几个模块:1.网络检測   2.网络请求get和post请求  3.文件上传  4.文件下载   5.断点续传 如今将这些一一分享给大家 ,也欢迎 ...

  7. Android仿IOS回弹效果 ScrollView回弹 总结

    Android仿IOS回弹效果  ScrollView回弹 总结 应项目中的需求  须要仿IOS 下拉回弹的效果 , 我在网上搜了非常多 大多数都是拿scrollview 改吧改吧 试了一些  发现总 ...

  8. WPF 辅助开发工具

    原文:WPF 辅助开发工具 以下介绍的工具均为免费版,有些是源代码开放,希望对大家有用. Kaxaml 轻量级XAML 编辑器,可以同时进行图像和XAML 代码的编辑.最终生成开发人员想要的XAML ...

  9. vue 2 仿IOS 滚轮选择器 从入门到精通 （一）

    大家好,由于最近从事的是微信公众号和APP内嵌 H5开发,避免不了开发一些和native相同的操作功能,就如接下来说的 仿IOS滚轮选择器. 先来个截图: 接下来具体介绍如何实现的.能力有限避免不了错 ...

随机推荐

  1. javascript ASCII和Hex互转

    <script> var symbols = " !\"#$%&'()*+,-./0123456789:;<=>?@"; var loAZ ...

  2. mac OS X 安装svn

    因为从10.5版本开始适用Mac OS,SVN一直都是默认安装的软件. 后来发现一个简单的办法. 如果你有安装XCode,只需要在code > Preferences > download ...

  3. android 输入法出现挤压屏幕、android输入键盘覆盖了屏幕控件的解决办法

    如果希望输入法键盘弹出时不自动向上挤压activity,在Manifest清单文件中对应的activty中设置属性android:windowSoftInputMode="adjustPan ...

  4. cf158B(水题)

    题意:1辆出租车可以坐4人,已知k组人每组ki(ki<=4)人去坐车,要求同组人坐同一辆车,求最少需多少辆车.. 4人组的单独算,1人组和3人组一起,如1多余再将1和2匹配即可.... 代码如下 ...

  5. Material Design入门（三）

    本文主要包括 CollapsingToolbarLayout实现滚动动画效果 ViewPager+tabLayout实现左右类Tab效果 控件介绍 这次需要用到得新控件比较多,主要有以下几个: Coo ...

  6. MySQL监控

    http://blog.csdn.net/zreodown/article/details/8158469

  7. 菜鸟学Linux命令:find命令 查找文件

    find命令是Linux下最常用的命令之一,灵活的使用find命令,你会发现查找文件变得十分简单. 命令格式 find [指定查找目录]  [查找规则(选项)]  [查找完后执行的动作] 参数规则 - ...

  8. 创建一个ASP.NET MVC OutputCache ActionFilterAttribute

    在每一个web应用程序中, 有的情况下,你想在一段时间内缓存一个具体的页面HTML输出,因为相关的数据和处理并不是总是变化.这种缓存的响应是储存在服务器的内存中.因为没有必要的额外处理,它提供了非常快 ...

  9. ytu 1939:统计元音（水题）

    统计元音 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 68  Solved: 33[Submit][Status][Web Board] Descrip ...

  10. WebRTC源码分析四：视频模块结构

    转自:http://blog.csdn.net/neustar1/article/details/19492113 本文在上篇的基础上介绍WebRTC视频部分的模块结构,以进一步了解其实现框架,只有了 ...