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.圆 根据 ...
随机推荐
- js两个时间比较
var applyStart = $("#ApplyStart").val().replace(/-/g,'/'); var applyEnd = $("#ApplyEn ...
- java读取properties
Java读取properties文件的方法比较多,网上我最多的文章是“Java读取properties文件的六种方法”,我看了好多的文章,在读到“博客之星-熔岩”的“Java读取properties文 ...
- UVa 567: Risk
这是一道很简单的图论题,只要使用宽度优先搜索(BFS)标记节点间距离即可. 我的解题代码如下: #include <iostream> #include <cstdio> #i ...
- FZU 2129 子序列个数 (动态规划)
题意:子序列的定义:对于一个序列a=a[1],a[2],......a[n].则非空序列a'=a[p1],a[p2]......a[pm]为a的一个子序列,其中1<=p1<p2<.. ...
- shell 获取当前ip
HOST_IP=$(hostname --all-ip-addresses | awk '{print $1}')
- Android开发_SharedPreferences
SharedPreferences是Android平台上一个轻量级的存储类,主要是保存一些常用的配置比如窗口状态,一般在Activity中 重载窗口状态onSaveInstanceState保存一般使 ...
- There is an error while getting planid. No Free partitions available
问题概述 Oracle Advanced Supply Chain Planning最初的设置职责的时候有点问题,不知是不是要打什么补丁或其它配置什么东东,, 这个提示,,但我查到的分区是还有可用分区 ...
- 以色列学生---debugger 构建
http://eli.thegreenplace.net/2011/01/23/how-debuggers-work-part-1 http://eli.thegreenplace.net/
- ViewPager的用法实例
前言:最近在做一个项目,文件管理器,能够在主界面通过滑动选择:手机,内存卡,云端的不同界面,因此就用到了ViewPager. 起步阶段,ViewPager写好了,对应的Adapter也写好了,测试通过 ...
- PureMVC(JS版）源码解析（九）：View类
在讲解View类之前,我们先回顾一下PureMVC的模块划分: 在PureMVC中M.V.C三部分由三个单例类管理,分别是Model/View/Controller.PureMVC中另外一个 ...