<!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. 51单片机I/O口使用经验

    按常规,在51端口(P1.P2.P3)某位用作输入时,必须先向对应的锁存器写入1,使FET截止.一般情况是这样,也有例外.所谓IO口内部与电源相连的上拉电阻而非一常规线性电阻,实质上,该电阻是由两个场 ...

  2. 黑马程序员_JavaIO流（一）

    IO(Input Output)流 概述: IO流(数据流)用来处理设备之间的数据传输. Java对数据的操作是通过流的方式. Java用于操作流的对象都在IO包中. 流按操作数据分为两种:字节流与字 ...

  3. C++Memset误区

    Memset的原型是void *memset(void *s, char ch, size_t n); Memset是按字节赋值的,对char以外的类型赋0(00000000) -1(11111111 ...

  4. 随记，C#修饰符访问级别

    private : 私有成员, 在类的内部才可以访问. protected : 保护成员,该类内部和继承类中可以访问. (无修饰符时默认)internal: 在同一命名空间内可以访问.public : ...

  5. apue

    #ifndef apue_h #define apue_h #define _POSIX_C_SOURCE 200809L #if defined(SOLARIS) /* Solaris 10 */ ...

  6. 自定义input file样式

    自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...

  7. ReactJS 的背景及原理

    原文链接:http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react 在Web开发中,我们 ...

  8. c++应用程序文件的编译过程

    这里讲下C++文件的编译过程及其中模板的编译过程: 一:一般的C++应用程序的编译过程.     一般说来,C++应用程序的编译过程分为三个阶段.模板也是一样的. 在cpp文件中展开include文件 ...

  9. 跟我一起学extjs5(22--模块Form的自己定义的设计)

    跟我一起学extjs5(22--模块Form的自己定义的设计)         前面几节完毕了模块Grid的自己定义,模块Form自己定义的过程和Grid的过程类似,可是要更复杂一些.先来设计一下要完 ...

  10. php增删改查，自己写的demo

    1.链接数据库通用方法:conn.php <?php //第一步:链接数据库 $conn=@mysql_connect("localhost:3306","root ...