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.圆 根据 ...
随机推荐
- openstack liberty 版本按照官方文档手动整合 完成后 基于dashboard-horizon 创建虚拟机报错 用CL却是成功的 网络等验证都是正确的通过启动的虚拟实例测试以成功
- MSSQLSERVER数据库- 打开表出现目录名无效
打开SQLSERVER数据库,出现目录名无效,如下图: 解决方法到 临时目录:C:\Documents and Settings\Administrator\Local Settings\Temp 手 ...
- tomcat install on Linux
1)下载apache-tomcat-6.0.10.tar.gz 2)#tar -zxvf apache-tomcat-6.0.10.tar.gz ://解压 3)#cp -R apache-tomca ...
- JAVA从零单排之前因
本人,男,21岁,普通院校本科,计算机专业.大学之前对计算机编程没有一点涉及.大学学计算机专业也是个偶然.因为当初高考的成绩不好,结果都是我父亲帮我报的学校和专业. 上了大学之后,大一都是在新奇中度过 ...
- resin 4.0数据源的配置
在resin 的conf 文件下有resin.xml 我们在这里能够配置数据源以及配置项目 一.配置多个数据源,多个项目共享这些数据源.也就是这些数据源配置在<host> </ ...
- Linux kernel驱动相关抽象概念及其实现 之“bus，device，driver”
bus,device,driver三个很重要的概念贯穿Linux内核驱动架构,特转载一篇博文: (转载自http://blog.csdn.net/gdt_a20/article/details/642 ...
- android 66 sharedperference的使用
package com.itheima.qqlogin; import java.io.BufferedReader; import java.io.File; import java.io.File ...
- 启动MYSQL密码审计插件
http://www.innomysql.com/article/25717.html [root@server-mysql plugin]# pwd /usr/local/mysql56/lib/p ...
- iOS 如何做才安全--逆向工程 - Reveal、IDA、Hopper、https抓包 等
http://www.cnblogs.com/dahe007/p/5546990.html
- Elasticsearch .Net Client NEST使用说明 2.x
Elasticsearch .net client NEST使用说明 2.x Elasticsearch.Net与NEST是Elasticsearch为C#提供的一套客户端驱动,方便C#调用Elast ...