CSS3实现Android 安卓图标
CSS3实现的安卓图标,Android机器人图标,学习CSS3布局的极好的范例素材,只不过现在主流的IE8并不支持CSS3.所以大家测试的话,请使用Chrome、火狐或Oprea等浏览器。用CSS实现图标其实也挺方便,本例来说,主要是用到了CSS3中的transform、transition、border-radius等属性,请了解。
代码如下:
<!DOCTYPE html> <html> <head> <title>CSS3 Android 安卓图标</title> <style> .android { position: absolute; left: 320px; top: 230px; } .body { width: 336px; height: 285px; background-color: #A5C63B; border-radius: 0px 0px 30px 30px; position: absolute; } .body:before, .body:after { background-color: #A5C63B; content: ''; width: 75px; height: 122px; bottom: -122px; position: absolute; border-radius: 0px 0px 50px 50px; } .body:before { left: 68px; } .body:after{ right: 68px; } .head { width: 336px; height: 155px; background-color: #A5C63B; border-radius: 200px 200px 0px 0px; position: absolute; top: -170px; } .head:before, .head:after { background-color: #A5C63B; content: ''; width: 10px; height: 53px; position: absolute; top: -30px; border-radius: 20px 20px 0px 0px; } .head:after { -webkit-transform: translate(63px, 0px) rotate(-30deg); -moz-transform:translate(63px, 0px) rotate(-30deg); -o-transform:translate(63px, 0px) rotate(-30deg); } .head:before{ -webkit-transform: translate(255px, 0px) rotate(30deg); -moz-transform:translate(255px, 0px) rotate(30deg); -o-transform:translate(255px, 0px) rotate(30deg); } .arms:before, .arms:after { background-color: #A5C63B; content: ''; width: 75px; height: 233px; top: -8px; position: absolute; border-radius: 40px 40px 40px 40px; } .arms:before { left: -90px; } .arms:after{ right: -90px; } .eyes:before, .eyes:after { background-color: #FFFFFF; content: ''; width: 27px; height: 27px; top: 68px; position: absolute; border-radius: 20px; } .eyes:before { left: 78px;} .eyes:after{ right: 78px;} </style> </head> <body> <div class="android"> <div class="head"> <div class="eyes"></div> </div> <div class="body"> <div class="arms"></div> </div> </div> </body> </html>
效果如图:
一、推荐使用迅雷或快车等多线程下载软件下载本站资源。
二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。
三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!
四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.
五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。
六、如需转载本站资源,请注明转载来自并附带链接
七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com
大家评论
站长推荐
点击排行
- 1CSS控制文字在Div最底部显示
- 2Thinkphp5如何配置IP+端口访问项目模块
- 3elementUI el-dialog弹框居中
- 4教你如何搭建及优化站点
- 5国内互联网视频行业运营分析
- 6service mysql start出错,mysql不能启动,解决mysql: unrecognized service错误
- 7CSS实现悬浮顶部的Div工具栏
- 8记一次Thinkphp5.1框架mysql数据库崩溃(SQLSTATE [08004] Too many connections)
- 9连接SQL Server数据库提示:Login failed for user 'sa'错误的解决方案
- 10Thinkphp3.2在centos7上设置计划任务的方法