<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>iphone logo</title>

<style type="text/css">

/*==============苹果==============*/

#apple .canvas,.apple6,.apple7,.apple8,.apple61 {

    background: #fff;

}

#apple .icon {

    left: 184px;

    height: 202px;

    top: 51px;

    width: 172px;

}

.apple1 {

    border-radius: 108px 108px 108px 94px/128px 128px 128px 128px;

    height: 128px;

    top: 47px;

    width: 108px;

}

.apple2 {

    left: 72px;

}

.apple3 {

    border-radius: 22px 64px 64px 64px/106px 106px 106px 106px;

    height: 106px;

    left: 12px;

    -webkit-transform: rotate(-25deg);

    transform: rotate(-25deg);

    top: 98px;

    width: 64px;

}

.apple4 {

    border-radius: 64px 22px 64px 64px/106px 106px 106px 106px;

    left: 103px;

    -webkit-transform: rotate(25deg);

    transform: rotate(25deg);

}

.apple5 {

    height: 145px;

    left: 54px;

    top: 53px;

    width: 70px;

}

.apple6 {

    left: 50px;

    -webkit-transform: scaley(0.5);

    transform: scaley(0.5);

    top: 14px;

}

.apple61 {

    border-radius: 20px;

    height: 80px;

    -webkit-transform: rotate(-45deg) scale(0.9);

    transform: rotate(-45deg) scale(0.9);

    width: 80px;

}

.apple7 {

    border-radius: 50%;

    height: 22px;

    left: 66px;

    top: 192px;

    width: 47px;

}

.apple8 {

    border-radius: 50%;

    height: 85px;

    left: 144px;

    top: 63px;

    width: 85px;

}

#apple .slice {

    height: 200px;

    position: absolute;

    width: 180px;

}

#apple .slice * {

    position: absolute;

}

#apple .slice1 *{

    background:#333;

}

/*==========分解apple==========*/    

.apple9:before,.apple9:after {

    background: #333;

}

.apple9{

    left:122px;

    top:-18px;

    -webkit-transform: rotate(40deg);

    transform: rotate(40deg);

    }

.apple9:before,.apple9:after {

    border-radius:50%;

    content:".";

    display: block;

    height: 90px;

    position: absolute;

    width:90px;background: #333;

}

.apple9:before {

    clip:rect(0 13px 80px 0px);

}

.apple9:after {

    clip:rect(14px 100px 76px 76px);

    left:-64px;

}

</style>

</head>

<body>

<div id="apple">

    <div class="canvas">

        <div class="icon">

            <!--苹果[-->

            <div class="slice1 slice">

                <div class="apple1"></div>

                <div class="apple2 apple1"></div>

                <div class="apple3"></div>

                <div class="apple4 apple3"></div>

                <div class="apple5"></div>

            </div>

            <!--end 苹果-->

            <div class="slice">

                <!--苹果顶部凹下去部分-->

                <div class="apple6">

                    <div class="apple61"></div>

                </div>

                <!--end 苹果顶部凹下去部分-->

                <!--苹果底部凹下去部分-->

                <div class="apple7"></div>

                <!--苹果底部凹下去部分-->

                <!--被咬一口的部分-->

                <div class="apple8"></div>

                <!--end 被咬一口部分-->

                <!--顶部叶子部分-->

                <div class="apple9"></div>

                <!--end 顶部叶子部分-->

            </div>

        </div>

    </div>

</div>

</body>

</html>

抄袭了原版的，简化了原版的，合适菜鸟学习

原文：http://www.w3cfuns.com/thread-5592982-1-1.html

css3画苹果logo的更多相关文章

  1. css3画三角形的原理

    以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...

  2. 纯CSS3画出小黄人并实现动画效果

    前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...

  3. 使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...

  4. 如何使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...

  5. 如何用CSS3画出一个立体魔方？

    前言 最近在写<动画点点系列>文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎 ...

  6. 如何用CSS3画出懂你的3D魔方？

    作者:首席填坑官∙苏南公众号:honeyBadger8,群:912594095,本文原创,著作权归作者所有,转载请注明原链接及出处. 前言 最近在写<每周动画点点系列>文章,上一期分享了& ...

  7. 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

    [二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...

  8. 关于用CSS3画图形的一些思考

    众所周知,用CSS3的圆角.转换可以画出各种不同的形状,制作不同的图案,早些前先驱者已画出经典的叮当猫,iphone手机等展示CSS3的强大实力,趁最近有空我也对CSS3进行了一些实践,颇有收获. 用 ...

  9. （转）浅谈HTML5与css3画饼图！

    神马系饼图? 饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到.如cnzz的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制 ...

随机推荐

  1. javaWeb防止恶意登陆或防盗链的使用

    使用场景:明明引用了一个正确的图片地址,但显示出来的却是一个红叉或写有“此图片仅限于***网站用户交流沟通使用”之类的“假图片”.用嗅探软件找到了多媒体资源的真实地址用下载软件仍然不能下载.下载一些资 ...

  2. 怎么把QQ我的收藏表情图片转移到另一台电脑上

    把收藏的QQ表情从一台电脑转移到另一台电脑的操作步骤如下:    1.在有表情的电脑登陆QQ,随便打开一个聊天窗口,点击[表情],选择[表情设置],点击[导入导出表情包],选择[导出全部表情包]:   ...

  3. Excel表无法正常打开

    Excel表无法正常打开 处理:从菜单栏中的文件中,找到任何一个Excel表正常打开之后,在工具->选项->常规-> 去掉“忽略其他应用程序”,确认,关闭表格再次打开即正常.

  4. 设定PCB电路板形状和物理边界

    1 设定PCB电路板形状和物理边界 在Protel DXP的PCB板文件向导中,我们已经初步确定了电路板的形状和物理边界.但我们在绘制PCB板之前,也许还会对电路板的边界的细节加以调整.如果我们要对电 ...

  5. USB状态错误原因

    USBD_STATUS调试过USB的同学肯定见过BUS Hound里面给的各种错误提示,但是大家是否知道是什么意思呢? USBD_STATUS 出错原因,详解如下:   The USBD_STATUS ...

  6. Mac下Sublime Text 3安装配置

    1.下载Sublime Text 3 2.安装Package Control,参考 快捷键 control + ` 或者菜单栏选择View > Show Console 在控制台输入: impo ...

  7. Adobe Photoshop CC 2015安装激活

    分享一下Adobe Photoshop CC 2015 安装激活步骤 工具/原料   xf-adobecc2015.exe Adobe Photoshop CC 2015官方原版 方法/步骤   1 ...

  8. 解决 'utf-8' codec can't decode byte 0x8b in position 1: invalid start byte

    "Accept-Encoding": "gzip, deflate", 这条信息代表本地可以接收压缩格式的数据,而服务器在处理时就将大文件压缩再发回客户端,IE ...

  9. iOS BMOB-登录注册手机验证码、邮箱验证

    1.下载BmobSDK 2.把里面的BmobSDK.framework拖到你的工程里面的工具文件夹内. 3.导入类库 CoreLocation.framework.Security.framework ...

  10. JavaScript 自动分页插件 datatables

    DataTables Table plug-in for jQuery https://www.datatables.net/