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.圆 根据 ...
随机推荐
- 在线App开发平台——应用之星傻瓜式开发平台
随着智能手机及APP应用程序的普及,越来越多的企业和个人意识到APP的营销价值,出于对技术的敬畏,很多企业下意识认为开发APP是一个有难度的技术活,所以很多时候有心无力,也担心APP的后续的技术支持. ...
- ios开发所有的iCON 的大小
新浪微博: 16x16png,80x80png,120x120png qq开放平台: 16*16png 20k以内 512*512jpg或者png 200以内 微信开放平台: 28x28 png,10 ...
- 系统性能优化分析—CPU消耗
http://blog.csdn.net/longdel/article/details/7296446
- The Class Loader Hierarchy--转载
Class loaders in the Application Server runtime follow a delegation hierarchy that is illustrated in ...
- Hibernate 配置派生属性
在持久化类中,有些属性在表中没有对应的字段,可以在映射文件中设置派生属性. 比如在一个订单中有多个商品的价格,但没有计算总的价格,可以在持久化类中增添一个统计总价格的属性,在映射文件中配置一些信息. ...
- WTL的核心机制
WTL背景介绍 WTL是微软ATL开发组成员Nenad Stefanovic先生在ATL Windowing机制上发展起来的一整套GUI框架,运用template技术组织和创建GUI对象,构筑了精致的 ...
- oracle学习----访问路径
什么是访问路径?表扫描数据的时候使用了什么方式,这个方式就是访问路径 1.全表扫描TABLE ACCESS FULL 全表扫描,多块读,等待事件:db file scattered read 如果是并 ...
- plupload使用指南（转）
转自http://www.cnblogs.com/2050/p/3913184.html 现在随着html5技术的逐渐推广和普及,再去使用以flash为上传手段的SWFUpload显然就有点过时了,毕 ...
- CentOS 6.7安装配置Cacti监控系统
一.安装配置LAMP环境 yum -y install httpd php php-mysql php-snmp php-xml php-gd mysql mysql-server 启动http和my ...
- jstl中添加自定义的函数
由于jstl中提供的函数未必能够满足我们的要求,而我们又希望能够像jstl提供的函数那样能够轻松方便使用,那么可以通过自定义函数补充jsltl函数.给jstl添加自定义函数需要以下步骤: 定义一个st ...