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.圆 根据 ...
随机推荐
- 关键字instanceof和final
Instanceof关键字(类似oc的isKindOfClass 和 isMemberOfClass) instanceof(实例类型) 关键字作用: 1.判断某一个对象是否属于某一个类 2.inst ...
- 连接数据库超时设置autoReconnect=true
1,问题现象: com.mysql.jdbc.CommunicationsException: The last packet successfully received from the serve ...
- 使用solrj操作solr索引库,solr是lucene服务器
客户端开发 Solrj 客户端开发 Solrj Solr是搭建好的lucene服务器 当然不可能完全满足一般的业务需求 可能 要针对各种的架构和业务调整 这里就需要用到Solrj了 Solrj是Sol ...
- [PHP] csv to xml
<?php error_reporting(E_ALL | E_STRICT); ini_set('display_errors', true); ini_set('auto_detect_li ...
- 系统的启动模式(启动级别)的改动---使用upstart启动机制的
/********************************************************************* * Author : Samson * Date ...
- Mybatis中实现oracle的批量插入、更新
oracle 实现在Mybatis中批量插入,下面测试可以使用,在批量插入中不能使用insert 标签,只能使用select标签进行批量插入,否则会提示错误 ### Cause: java.sql.S ...
- Prototype 原型模式
用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 原型模式即在运行时动态的通过一个对象的实例来创建这个类的对象,可以理解成通过一个实例克隆出另一个实例. Prototype模式的一些优 ...
- radio的change事件
radio的change事件 <scripttype="text/javascript"> $(document).ready(function(){ $(" ...
- c# 格式化百分比
代码示例: <%#Eval("total").ToString() == "0" ? "00.00%" : (Convert.ToDe ...
- servlet HttpSession 监听器
一.Servlet中对象作用域 1. ServletContext 上下文 应用服务器一启动就产生该对象,服务器关闭即销毁 作用于全局,所有Servlet ,相当于静态变量 2. HttpSessio ...