效果查看：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. 谈谈D2

    很多参与了 D2 的人还不知道 D2 是个什么东西,印象中就是很多很多前端工程师汇聚在一起,交流技术.D2 是 D2前端技术论坛的简称,英文名 Designer & Developer Fro ...

  2. Windows+GCC下内存对齐的常见问题

    结构/类对齐的声明方式 gcc和windows对于modifier/attribute的支持其实是差不多的.比如在gcc的例子中,内存对齐要写成: class X { //... } __attrib ...

  3. Maven常用插件

    maven利用各种插件来管理构建项目,本文记录下工作中常用到的插件及使用方法.每个插件都会提供多个目标(goal),用于标示任务.各插件配置在pom.xml里,如下: <build> [. ...

  4. SqlServer2008安装时提示重启计算机失败 解决办法

    问题描述: 在安装Sql Server 2008时提示重启计算机,重启之后不行,仍需要重启计算机. 如下图所示: 解决方法: 1.运行(或按键盘Win+R 组合键),输入regedit,调出注册表管理 ...

  5. CentOS RDO方式快速安装OpenStack

    一.了解RDO RDO是什么? RDO是红帽Red Hat Enterprise Linux OpenStack Platform的社区版,类似RHEL和Fedora,RHEV和oVirt这样的关系. ...

  6. Java Thread 的使用

    Java Thread 的使用 Java Thread 的 run() 与 start() 的区别 Java Thread 的 sleep() 和 wait() 的区别   一.线程的状态 在正式学习 ...

  7. 【转】Linq Group by

    http://www.cnblogs.com/death029/archive/2011/07/23/2114877.html 1.简单形式: var q = from p in db.Product ...

  8. 深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap

    × 目录 [1]NodeList [2]HTMLCollection [3]NamedNodeMap[4]注意事项 前面的话 一说起动态集合,多数人可能都有所了解.但是,如果再深入些,有哪些动态集合, ...

  9. EntityFramework 7.0之初探【基于VS 2015】（十）

    前言 本篇作为EF 7.0的开篇也是Entity Framework目前系列末篇,因为关于EF 7.0学习资料实在是太少,我都是参考老外的资料花费了不少时间去研究去尝试同时也失败多次,个人觉得那是值得 ...

  10. The network bridge on device VMnet0 is not running

    The network bridge on device VMnet0 is not running. The virtual machine will not be able to communic ...