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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

CSS3

描述

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