<!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. UCOS 杂项 笔记

    1.  建立任务和建立数据队列  哪个先建立? 经过试验得知,数据队列和任务的建立先后没有顺序,都可以正常运行. 2.关于主函数的面试问题. 主函数写法有:   int  main()    和voi ...

  2. Unix和Linux下C语言学习指南

    转自:http://www.linuxdiyf.com/viewarticle.php?id=174074 Unix和Linux下C语言学习指南 引言 尽管 C 语言问世已近 30 年,但它的魅力仍未 ...

  3. 转：Qt项目中遇到的一些小问题汇总

    链接:http://blog.csdn.net/yangyunfeizj/article/details/7082001    作者:GoatYangYang 公司让负责qt界面开发,但是接触qt又不 ...

  4. COJ 0138 NOIP201108计算系数

    NOIP201108计算系数 难度级别:A: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 给定一个多项式(ax + by)^k,请求出多项式 ...

  5. 【转】adobe acrobat pro修改pdf文字

    原文网址:http://zhidao.baidu.com/link?url=7MTeEu5IM49lNIISNQMcZLyLAwMPsRQWF5WAwQPfvkPsbbZLHSQE43MWaIxxVm ...

  6. [置顶] 白话二分匹配之最大匹配+附上hdu2063解题报告

    最近开始学习图论的二分匹配,关于最大匹配做一次小总结,希望自己后面回头来看一目明了,也对刚接触的人有帮助: ps:开始有的文字很多....对于很多人来说一看到文字就烦啦...不过这个总结是针对匈牙利算 ...

  7. 常用cl命令参数解释

    紧接前文,第一行cl命令如下: 1> cl /c /IC:\...\include /ZI /nologo- /W3 /WX- /sdl /Od /Oy- /D WIN32 /D _DEBUG ...

  8. ORCL_UNINSTALL_WIN10

    1.开始->设置->控制面板->管理工具->服务 停止所有Oracle服务. 2.运行Universal Installer 3.选择卸载产品 4.只勾选Oracle Data ...

  9. 【初学者常见问题】一脚踏入protected埋下的陷阱

    受保护的(protected)——声明该成员的类的子类可以访问这个类的成员(但有一定的限制),并且,声明该成员的包内部的任何类也可以访问这个成员 protected修饰符参考:http://www.3 ...

  10. android后台截屏实现(3)--编译screencap

    修改好之后就要编译了,screencap的编译是要在源码环境中进行的. 将修改后的screencap.cpp文件替换源码中的原始文件,然后修改screencap的Android.mk文件,修改后的文件 ...