CSS3制作精美的iphone电话图标，不使用图片

2020-01-27 14:17:08

字体：大中小

来源：转载

供稿：网友

IPhone手机的图标，大家都知道，看上去很精致很酷，本效果使用CSS3技术仿制一个精美的iPhone图标（无使用任何的图片素材），笔者觉得作者水平很酷哦，当然，如果使用了图片，那就没什么意义了。

<!DOCTYPE HTML><html lang=zh-cn><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 class="icon">    <div class="i_phone">        <div class="bg_angled"></div>        <div class="truba"><b></b></div>    </div>    <span>Phone</span></div></body></html>

上一篇：CSS3制作苹果手机的Message图标，超强大！

下一篇：HTML5网页Loading加载效果