仿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. Linux shell脚本编程基础之练习篇

    shell脚本编程基础之练习篇. 1.编写一个脚本使我们在写一个脚本时自动生成”#!/bin/bash”这一行和注释信息. #!/bin/bash ] then echo "请输入一个参数& ...

  2. mysql cluster 运行的必备条件

    1.由于同步复制一共需要4次消息传递,故mysql  cluster的数据更新速度比单机mysql要慢.所以mysql cluster要求运行在千兆以上的局域网内,节点可以采用双网卡,节点组之间采用直 ...

  3. 转数据库分库分表(sharding)系列(一) 拆分实施策略和示例演示

    本文原文连接: http://blog.csdn.net/bluishglc/article/details/7696085 ,转载请注明出处!本文着重介绍sharding切分策略,如果你对数据库sh ...

  4. 【USACO】checker

    一看题目 经典的8皇后问题 不过是皇后数量可变而已 不用想 回溯法. 需要个生成每次可选择序列的函数, 在存储可选择的序列时按照先大后小的顺序排的.这样每次找最小和去掉最小都很方便,只要有个记录数量的 ...

  5. NEFU 2016省赛演练一 B题（递推）

    HK Problem:B Time Limit:2000ms Memory Limit:65535K Description yy is interested in numbers and yy nu ...

  6. (十)stm32中FSMC的使用（用于LCD）

    FSMC全称“静态存储器控制器”. 使用FSMC控制器后,可以把FSMC提供的FSMC_A[25:0]作为地址线,而把FSMC提供的FSMC_D[15:0]作为数据总线. (1)当存储数据设为8位时, ...

  7. 新浪SAE部署 503 JDK版本冲突解决

    上午把本地调试好的微信应用部署到SAE上,结果访问503错误.关键日志:—————————————————————————————————org.eclipse.jetty.servlet.Servl ...

  8. HTTP协议缓存机制的应用

    缓存的目 的是减少相应延迟 和 减少网络带宽消耗, 比如 css. js.图片这类静态资源应该进行缓存.实际项目 一般使用反向代理服务器(如 nginx. apache 等) 进行缓存. 关键字:ca ...

  9. oracle 10g 学习之视图、序列、索引、同义词（9）

    目标 通过本章学习,您将可以: l  描述视图 l  创建和修改视图的定义,删除视图 l  从视图中查询数据 l  通过视图插入, 修改和删除数据 l  使用“Top-N” 分析 l  创建, 维护, ...

  10. 判断checkbox是否被选中事件

    第一种////////////////////////////////////////////////////////<input type="checkbox" value ...