CSS3制作精美的iphone电话图标,不使用图片
IPhone手机的图标,大家都知道,看上去很精致很酷,本效果使用CSS3技术仿制一个精美的iPhone图标(无使用任何的图片素材),笔者觉得作者水平很酷哦,当然,如果使用了图片,那就没什么意义了。
代码如下:
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8> <title>CSS3完美实现iphone电话图标</title> <style> *{margin:0px;padding:0px;} body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;} .icon {width: 56px;height: 56px;z-index: 10;position: absolute;left: 50%;top: 50%;margin-left: -28px;margin-top: -28px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: rgba(0,0,0,0.5) 0 1px 2px; -moz-box-shadow: rgba(0,0,0,0.5) 0 1px 2px; box-shadow: rgba(0,0,0,0.5) 0 1px 2px; } .icon span { display: block;text-align: center;font: bold 11px/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;color: #fff;position: absolute;top: 58px;left: -10px;width: 76px; text-shadow: rgba(0,0,0,0.3) 1px 2px 1px; text-transform: capitalize; } .i_phone { width: 100%;height: 100%; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: relative; overflow: hidden; cursor: pointer; background:-webkit-linear-gradient(top, #015801, #06f700); background:-moz-linear-gradient(top, #015801, #06f700); background:-ms-linear-gradient(top, #015801, #06f700); background:-o-linear-gradient(top, #015801, #06f700); background:linear-gradient(top, #015801, #06f700); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#015801', endColorstr='#06f700', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#015801', endColorstr='#06f700', GradientType=0); } .i_phone .bg_angled { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: 125%; height: 125%; position: absolute; left: -7px; top: -7px; -webkit-background-size: 4px 4px; -moz-background-size: 4px 4px; -ms-background-size: 4px 4px; -o-background-size: 4px 4px; background-size: 4px 4px; background-color: none; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%); background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%); background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%); background-image: linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .i_phone:after{ content: ''; -webkit-box-shadow: inset #06f700 0 0 2px; -moz-box-shadow: inset #06f700 0 0 2px; box-shadow: inset #06f700 0 0 2px; width: 100%; height: 100%; position: absolute; display: block; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; z-index: 2; } .i_phone:before{ content: ''; width: 100%; height: 50%; position: absolute; display: block; -webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; -moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; background: rgba(255,255,255,0.5); z-index: 5; -webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; } .i_phone .truba { position: absolute; top: 7px; left: 5px; z-index: 1; width: 40px; height:40px; font: bold 40px/40px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important; color: #f1f5f9; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); text-shadow: rgba(0,0,0,0.5) 0 0 2px; } .i_phone .truba:after { content: ''; position: absolute; width: 12px; height: 10px; top: 2px; left: 25px; background: #f1f5f9; -webkit-border-radius: 50% / 2px 2px 6px 2px; -moz-border-radius: 50% / 2px 2px 6px 2px; border-radius: 50% / 2px 2px 6px 2px; -webkit-transform: rotate(-57deg); -moz-transform: rotate(-57deg); -ms-transform: rotate(-57deg); -o-transform: rotate(-57deg); transform: rotate(-57deg); } .i_phone .truba:before { content: ''; position: absolute; width: 12px; height: 10px; top: 24px; left: 4px; background: #f1f5f9; -webkit-border-radius: 50% / 2px 2px 2px 6px; -moz-border-radius: 50% / 2px 2px 2px 6px; border-radius: 50% / 2px 2px 2px 6px; -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -o-transform: rotate(-25deg); transform: rotate(-25deg); } .i_phone .truba b { position: absolute; width: 35px; height: 4px; top: 17px; left: 7px; background: #f1f5f9; border-radius: 0 0 5px 5px; -webkit-transform: rotate(-47deg); -moz-transform: rotate(-47deg); -ms-transform: rotate(-47deg); -o-transform: rotate(-47deg); transform: rotate(-47deg); } </style> </head> <body> <div> <div> <div></div> <div><b></b></div> </div> <span>Phone</span> </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上设置计划任务的方法