Html - 仿Ios assistiveTouch 悬浮辅助球工具
2016-03-26 22:40
471 查看
仿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>
相关文章推荐
- iOS导航条颜色色差的问题
- iOS开发推荐DMG资源
- iOS动效学习-推荐资料(最全)
- iOS开发常用网址(最全)
- iOS开发之Runtime机制深入解析
- IOS本地通知实现
- iOS高级控件之tableViewController-城市列表
- 更新iOS和Xcode版本所遇到的问题
- iOS Couldn't update the Keychain Item问题
- iOS之09-特有语法
- IOS中类和对象还有,nil/Nil/NULL的区别
- ios随机设置颜色代码
- IOS中获取各种文件的目录路径的方法
- IOS开发之深拷贝与浅拷贝(mutableCopy与Copy)详解
- iOS—Storyboard的简单使用
- iOS 声明属性关键字
- iOSDay16之OC集合遍历和数组排序
- iOS View 指定圆角位置
- IOS的一个带动画的多项选择的控件(一)
- Auto Layout 使用心得