<!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. mvc 生成输出url

    最近一直在学习mvc,其中对于 Url.Action生成的url感到很困惑.官方的解释的基于路由方案生成的url.问题是,怎样基于,怎样选择,没有过多的解释.网上找了很多资料,也看不懂,最后还是在pr ...

  2. python 3.5 用户登录验证和输入三次密码锁定用户

    #!/usr/bin/env python #encoding: utf-8 #登录程序,输入用户和密码输出欢迎信息,输入错误三次锁定用户,不让登录 import sys print (''' 欢迎登 ...

  3. 转：Keil MDK从未有过的详细使用讲解

    来自:http://blog.csdn.net/zhzht19861011/article/details/5846510 熟悉Keil C 51的朋友对于Keil MDK上手应该比较容易,毕竟界面是 ...

  4. Entity Framewor 学习笔记 (Enum)

    EF 6 支持Enum 的处理 首先说一下 mysql 和 sql server 的区别 mysql 是有 Enum 这个类型的 , insert 时是放入 int , 出来的时候它会是 string ...

  5. C++中对sprintf()函数的说明(转)

    在将各种类型的数据构造成字符串时,sprintf 的强大功能很少会让你失望.由于sprintf 跟printf 在用法上几乎一样,只是打印的目的地不同而已,前者打印到字符串中,后者则直接在命令行上输出 ...

  6. Netbeans 学习

    1.NetBeans快捷键: 1.完成代码:ctrl+\ //任何地方按下此组合键,均会提示相应的参考字段: 2.错误提示:alt + enter //顾名思义,当系统报错时,按下此组合可以查看系统提 ...

  7. 高德JAVA笔试题

    1.常用的RuntimeException. 2.叙述RuntimeException和一般异常的异同. 3.叙述ArrayList.Vector和LinkedList各自的特点和特性. 4.什么是反 ...

  8. 鼠标点击DIV后，DIV的背景变色（js）

    <!DOCTYPE html> <html> <head> <script> window.onload = function(){ var divs ...

  9. Python爬虫实战（二）

    本来晚上是准备写贴吧爬虫的,但是在分析页面时就遇到了大麻烦!选取了某个帖子,在爬取的时候,发现正则匹配不全..很尴尬!!先来看看吧, #!/usr/bin/env python # -*- codin ...

  10. nginx 配置自签名的ssl证书

    最近要搭一个https的测试环境,使用nginx做反向代理. 网上找过不少资料,但过程不是很完整,吃了不少亏,故把自己的操作过程总结下来.如果你刚好遇到这个问题,希望对你有帮助! ********** ...