效果查看：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. LOMA280保险原理读书笔记

    LOMA是国际金融保险管理学院(Life Office Management Association)的英文简称.国际金融保险管理学院是一个保险和金融服务机构的国际组织,它的创建目的是为了促进信息交流 ...

  2. Unit Testing with NSubstitute

    These are the contents of my training session about unit testing, and also have some introductions a ...

  3. linux 使用fdisk分区扩容

    标签:fdisk分区 概述 我们管理的服务器可能会随着业务量的不断增长造成磁盘空间不足的情况,在这个时候我们就需要增加磁盘空间,本章主要介绍如何使用fdisk分区工具创建磁盘分区和挂载分区,介绍两种情 ...

  4. Excel单元格发生变化后，使用Outlook给特定的人发邮件

    自己在公司里面维护了一个小金库的Excel,当某个人的余额小于0的时候,Outlook会自动给这个人发一封邮件,同时将这个Excel附在邮件中,具体的代码如下: Public Function sen ...

  5. 如何在 ASP.NET MVC 中集成 AngularJS（2）

    在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...

  6. C# 用原生JS进行文件的上传

    1.此文章是用原生JS来进行文件的上传,有两个版本,一个不用ajax,一个用ajax. 1)非AJAX <!DOCTYPE html> <html> <head> ...

  7. Mysql 备份

    MySQL数据库备份命令   备份MySQL数据库的命令 mysqldump -hhostname -uusername -ppassword databasename > backupfile ...

  8. Android知识——ViewHolder的作用与用法

    ViewHolder通常出现在适配器里,为的是listview滚动的时候快速设置值,而不必每次都重新创建很多对象,从而提升性能.在android开发中Listview是一个很重要的组件,它以列表的形式 ...

  9. CATransition转场动画

    背景: 最近在温习动画,分享个简单系统的转场动画 viewcontroller *VC=[self.storyboard instantiateViewControllerWithIdentifier ...

  10. SubSonic3.0.0.4.1源码包与调用Dll

    ================================================================ 名    称:SubSonic插件版    本:3.0.0.4.1最后 ...