效果查看：http://hovertree.com/texiao/css3/6/

CSS3画猪头： http://hovertree.com/texiao/css3/6/1/

代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>纯CSS3实现可爱的猪猪 - 何问起</title>

    <base target="_blank" />

    <link href="http://hovertree.com/texiao/css3/6/hovertreepig.css" type="text/css" rel="stylesheet"/>

</head>

<body>

    <h2>纯CSS3实现可爱的猪猪</h2>

    <div class="hovertreebody">

        <div class="face">

            <div class="left_ear"></div>

            <div class="right_ear"></div>

            <div class="eyes"></div>

            <div class="nose">何问起</div>

        </div>

        <div class="stomach">

            <div class="left_leg"></div>

            <div class="right_leg"></div>

        </div>

        <div class="hovertreetail"></div>

    </div>

    <div style="text-align:center;margin-top:100px;"><a href="http://hovertree.com/h/bjaf/0pt35qks.htm">代码</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a></div>

</body>

</html>

转自：http://hovertree.com/h/bjaf/0pt35qks.htm

推荐：http://hovertree.com/texiao/css3/5/

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

CSS画猪的更多相关文章

  1. 用CSS画小猪佩奇，你就是下一个社会人！

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~ 背景 小猪佩奇已经火了好 ...

  2. 用CSS画小猪佩奇，你就是下一个社会人！ js将“I am a coder”反转成 “coder a am I”，不许用split，join，subString，reverse；求解方法三

    用CSS画小猪佩奇,你就是下一个社会人!   欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯 ...

  3. 【前端切图】用css画一个卡通形象-小猪佩奇

    最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...

  4. div+css画一个小猪佩奇

    用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container&quo ...

  5. 一步一步教你用CSS画爱心

    今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...

  6. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  7. Effective前端3：用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  8. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  9. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

随机推荐

  1. Expert 诊断优化系列------------------冤枉磁盘了

    现在很多用户被数据库的慢的问题所困扰,又苦于花钱请一个专业的DBA成本太高.软件维护人员对数据库的了解又不是那么深入,所以导致问题迟迟不能解决,或只能暂时解决不能得到根治.开发人员解决数据问题基本又是 ...

  2. ABP框架理论学习之后台工作(Jobs)和后台工作者（Workers）

    返回总目录 本篇目录 介绍 后台工作 后台工作者 让你的应用程序一直运行 介绍 ABP提供了后台工作和后台工作者,它们会在应用程序的后台线程中执行一些任务. 后台工作 后台工作以队列和持续的方式在后台 ...

  3. 探索C#之布隆过滤器(Bloom filter)

    阅读目录: 背景介绍 算法原理 误判率 BF改进 总结 背景介绍 Bloom filter(后面简称BF)是Bloom在1970年提出的二进制向量数据结构.通俗来说就是在大数据集合下高效判断某个成员是 ...

  4. 辛巴学院-Unity-剑英陪你零基础学c#系列(二)顺序

    这不是草稿 辛巴学院:正大光明的不务正业.   上一次的教程写出来之后,反馈还是挺多的,有很多都做了修改,也有一些让人崩溃,不得不说上几句.有些人有些很奇怪的地方,你写篇东西,被看了以后不说他感觉怎么 ...

  5. Mongoose Schemas定义中timestamps选项的妙用

    在Node.js中使用MongoDB少不了Mongoose. 假设有如下Mongoose Schemas的定义: var ItemSchema = new mongoose.Schema({ biz: ...

  6. C语言 · 打印1-200之间的素数

    素数定义:除了1和本身再无其他整数可被其本身整除的数称为素数,也称质数. 举一例子打印出1-200之间所有的素数: #include<stdio.h> #include<math.h ...

  7. Objective-C三方库: ZXEasyCoding

    对FastCoding做了二次封装, 实现更加便捷的存储和读取数据, 分享给大家 ZXEasyCoding 说明: 对FastCording进行封装, 更便捷存储和读取对象数据 安装: 添加ZXEas ...

  8. crossplatfrom---electron入门教程

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  9. CSS学习笔记2-2d变换和过渡属性

    前言:今天又是一个周末,心情不错,趁着闲暇之余,把剩下来的CSS3学习的内容全部整理出来,练习用的源码也稍微整理了一下. 2D转换 transform:translate||rotate||scale ...

  10. IIS7.5+WebConfig实现页面伪静态和301重定向

    IIS7.5+WebConfig实现页面伪静态和301重定向 使用URLRewriter组件在windows 2003 +iis 6.0下配置伪静态的文章网络上一大堆.但在iis7.0或iis 7.5 ...