<!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. 一次不是事故的SSH闪断问题

    从前一天下午的一个瞬间,公司内所有的ssh 连接在没有任何征兆的情况下,全部开始闪断. 折腾了一天,关闭过SELinux, 清空过Iptables,软硬重启过服务器,交换机,路由,重新配置过sshd文 ...

  2. Codeforces 704D Captain America

    题意:平面上有n个点,每个点必须涂成红色和蓝色中的一种,花费各为r和b(对所有的点花费都一样).m条限制,每条限制形如"y=b这条直线上两种颜色的点的数目之差的绝对值不能超过c"或 ...

  3. sql对日期的处理，一个存储过程示例

    IF v_docType = 3 THEN update T_PATIENT_INFO set USER_NAME =userName ,SEX = v_sex,BIRTHDAY = to_date( ...

  4. z-index的最大值、最小值

    浏览器 最大值 超过最大值后变成 最小值 小于最小值后变成 备注 IE6 2147483647 2147483647 -2147483648 -2147483648   IE7 2147483647 ...

  5. PCB敷铜小结

    有人说加大敷铜可以加大散热面,其实,对于此我不以为然.我说过铜是一种散热吸热快的金属,如果加大散热面要靠加大敷铜的面积的话,那就没有必要给很多的器件加热片了,我想大家对于计算机都颇有心得,一定攒过电脑 ...

  6. XML在数据传输哪些方面会比JSON有优势，在哪些领域更加适合？

    XML 跟 JSON 的圣战,或许会成为自 vim/emacs 圣战,cli/gui 圣战等等圣战以来的又一个圣战,而所有的圣战大抵都不会有结果,因为每方都有各自的道理,谁都不服谁. 在我看来,XML ...

  7. Delphi 调试BPL包中引用另外的BPL的方法。

    在实际程序中,遇到1.bpl 引用了2.bpl中的方法,2.bpl的方法进入后又引用了3.bpl ,刚开始挺蒙,怎么调试呢,  其实bpl就是dll, 故, 1.我在Delphi的run->pa ...

  8. poj2955：括号匹配，区间dp

    题目大意: 给一个由,(,),[,]组成的字符串,其中(),[]可以匹配,求最大匹配数 题解:区间dp: dp[i][j]表示区间 [i,j]中的最大匹配数 初始状态 dp[i][i+1]=(i,i+ ...

  9. POJ-1488(字符串应用)

    Description TEX is a typesetting language developed by Donald Knuth. It takes source text together w ...

  10. DB2高级安装

     学习从安装开始,哈哈.这里记下  Windows 和 UNIX/Linux安装DB2的各种方式,不同,及具体的一些细节.    Windows下向导化安装:            setup.exe ...