demo_05HTML5+CSS3绘制小鸟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: skyblue
}
.cloud{
width: 200px;
height: 200px;
position: relative;
margin-top: 50px;
margin-left: 100%;
animation: piao 5000ms linear infinite;
}
.cloud li{
list-style: none;
width: 50px;
height: 50px;
background: #fff;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
position: absolute;
top: 0;
left: 0;
}
.cloud li:first-child{
top: 5px;
left: -20px;
}
.cloud li:nth-child(2){
top: 25px;
left: -40px;
}
.cloud li:nth-child(3){
top: 5px;
left: 20px;
}
.cloud li:nth-child(4){
top: 25px;
left: 40px;
}
.cloud li:nth-child(5){
top: 25px;
left: 0;
}
.cloud li:nth-child(6){
top: 25px;
left: -15px;
}
.cloud li:nth-child(7){
top: 25px;
left: 15px;
}
.bird{
width: 200px;
height: 200px;
margin: 0 auto;
/*border: 1px solid #fff;*/
position: relative;
}
.main{
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background: #fab;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.tail{
position: absolute;
top: 80px;
left: 30px;
border-top: 20px solid #fde;
border-bottom: 20px solid transparent;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}
.eyes{
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
background: #fff;
border: 2px solid #000;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
.eye{
position: absolute;
top: 5px;
right: 2px;
border: 5px solid #000;
width: 10px;
height: 10px;
background: #fff;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.mouth{
top: 70px;
left: 150px;
position: absolute;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #fda;
border-right: 20px solid transparent;
}
.line{
position: absolute;
height: 1px;
background: #ccc;
width: 20px;
top: 90px;
left: 150px;
}
.swing{
position: absolute;
border-bottom: 20px solid transparent;
border-top: 20px solid #fdd;
border-left: 20px solid #fdd;
border-right: 20px solid transparent;
top:120px;
left: 70px;
transform-origin: top;
animation: swing 600ms linear infinite;
}
@keyframes swing{ 50%{
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
} }
@keyframes piao{
100%{
-webkit-transform: translateX(-1200%);
-moz-transform: translateX(-1200%);
-ms-transform: translateX(-1200%);
-o-transform: translateX(-1200%);
transform: translateX(-1200%);
}
}
</style>
</head>
<body>
<div class="cloud">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="bird">
<div class="tail"> </div>
<div class="main">
<div class="eyes">
<div class="eye"></div>
</div>
</div>
<div class="swing"> </div>
<div class="mouth"> </div>
<p class="line"></p>
</div>
</body>
</html>
纯CSS3和HTML5
demo_05HTML5+CSS3绘制小鸟的更多相关文章
- CSS3绘制六边形
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...
- CSS3绘制旋转的太极图案（一）
实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...
- css3绘制几何图形
用css3绘制你需要的几何图形 1.圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class=&q ...
- 用纯CSS3绘制萌系漫画人物动态头像
大家已经见惯了用CSS3画的图标.LOGO.头像,这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫<轻音少女>女主角秋山澪的动态头像.看到动图我震惊了!!!CSS3的强大再次霸气测 ...
- css3绘制腾讯logo
CSS3绘制的腾讯LOGO,下边是对比图. 演示地址
- 【项目1-1】使用HTML5+CSS3绘制HTML5的logo
作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...
- CSS3绘制砖墙-没实用不论什么图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用 CSS3 绘制 Hello Kitty
偶然间看到了 SegmentFault 上的一篇文章,感觉这个 Hello Kitty 画的还不错,心血来潮也用 CSS3 画了个 Hello Kitty,现在在这里记录一下详细的绘制过程.想要源码. ...
- 详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧
1.矩形 绘制矩形应该是最简单的了,直接设置div的宽和高,填充颜色,效果就出来了. 2.圆角矩形 绘制圆角矩形也很简单,在1的基础上,在使用css3的border-radius,即可. 3.圆 根据 ...
随机推荐
- 51单片机连接24C02-C语言测试代码
忙了一天多终于透彻了,自己写的不好使,用别人的逐步分析改成自己的,我写得非常简洁易懂. 我总结3点需要注意的地方 1.关闭非IIC通信器件,比如我的开发板SDA和SCL也连接了DS1302,造成干扰会 ...
- Linux 日志基础
首先,我们将描述有关 Linux 日志是什么,到哪儿去找它们,以及它们是如何创建的基础知识.如果你已经知道这些,请随意跳至下一节. Linux 系统日志 许多有价值的日志文件都是由 Linux 自动地 ...
- Intellij 中的git操作 转！
http://blog.csdn.net/lovesummerforever/article/details/50032937 Git原理以后会分章节介绍,本次主要说一下intellij怎样操作git ...
- linux运维安全工具集合[持续更新中..]
lynis 安全漏洞检测工具 https://cisofy.com/download/lynis/ https://cisofy.com/files/lynis-2.2.0.tar.gz ...
- C#使用Sockets操作FTP【转载】
using System; using System.Collections; using System.IO; using System.Net; using System.Net.Sockets; ...
- 查看LINUX发行商版本与LINUX内核版本
查看LINUX发行商版本:[root@server-mysql ~]# cat /etc/issue Red Hat Enterprise Linux Server release 6.3 (Sant ...
- (转载)为啥我们要学习Linux
学习Linux也有一阵子了,这过程中磕磕撞撞的,遇到了问题,也解决了一些问题,学习的路子是曲折的,想总结点啥的,让刚刚学习Linux的不会望而生畏. 为啥我们要学习Linux 技术的价值不在于这个技术 ...
- CentOS 6.7平台nginx压力测试（ab/webbench）
压力测试工具一:webbench 1.安装 wget http://home.tiscali.cz/~cz210552/distfiles/webbench-1.5.tar.gz tar zxvf w ...
- 【Oracle】INSERT INTO SELECT语句和SELECT INTO FROM语句的区别
>>>>>>>>>>>>>>>>>>>>>>>>> ...
- CI框架篇之模型篇--直接操作（2）
在CI里面对数据库的操作有两种形式,一种是直接通过最原始的sql语句操作 一种则是通过CI里面的AR模型进行操作.两种操作各有千秋,应当有机的结合 现在讲解第一种操作的方式: 装载数据路操作类后就能够 ...