CSS3实现动画-飞翔的小鸟
傅皓君
CSS3实现动画-飞翔的小鸟
以前的时候动画都是flash,flash存在着种种弊端，当c3动画出来后，就是这个问题有了新的解决方案，使一切变得简单可操作。
在这个例子中，动画中实现了鸟翅膀的煽动，以及云彩的移动，所以c3很强大，仅仅用了这点代码就能实现动态效果。直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>birdfly</title>
<style>
body {
margin: 0;
padding: 0;
background: #77B7ED;
overflow: hidden;
}
.cloud{
width:100px;
height:80px;
border-radius: 50%;
margin: 100px auto 0px;
background:#fff;
position: relative;
right:-780px;
border:0px solid gray;
box-shadow: 50px -30px 0 #fff,100px -45px 0 #fff,120px 0px 0 #fff,50px 0px 0 #fff;
animation: cloud 3s linear infinite;
}
.cloud:after{
content:"";
width:140px;
height:30px;
display:inline-block;
position: absolute;
border-radius: 10px;;
top: 50px;
left:20px;
background:#fff;
border:0px solid gray;
z-index:2;
}
#cloudp {
position: absolute;
top: 140px;
right: -80px;
animation: cloud1 5s linear infinite;
}
#cloudp2 {
position: absolute;
top: 340px;
left:0;
animation: cloud1 6s linear infinite;
}
.birdbody{
width:120px;
height:40px;
background: -webkit-linear-gradient(top,#ed4961 50%,#ed494a 50%);
/*background: -webkit-linear-gradient(right,red,blue,yellow);*/
margin: 150px auto;
position: relative;
border-radius: 10px;
}
@keyframes fly {
0%{
transform:rotateX(0deg)
}
50%{
transform:rotateX(180deg)
}
100%{
transform:rotateX(0deg)
}
}
@keyframes cloud {
0%{
left: 60%;
}
100%{
left: -60%;
}
}
@keyframes cloud1 {
0% {
left: 180%;
}
100% {
left: -160%;
}
}
.mouse:before{
content:"";
height:2px;
width:2px;
display:block;
background: #000;
position: absolute;
top:3px;
left:-5px;
border-radius: 2px;
z-index: 3;
}
.mouse{
height:0px;
width:0px;
border:8px solid #f9c438;
background: #fff;
position: absolute;
top:5px;
left:120px;
border-radius: 0px;
border-top:8px solid transparent;
/*border-bottom:10px solid transparent;*/
border-right:8px solid transparent;
background:#77B7ED;
}
.mouse:after{
content:"";
height:0px;
width:0px;
display:block;
border:4px solid #e5ae30;
background: #fff;
position: absolute;
top:10px;
left:-8px;
border-radius: 0px;
/*border-top:8px solid transparent;*/
border-bottom:8px solid transparent;
border-right:8px solid transparent;
background:#77B7ED;
}
.eye {
height: 15px;
width: 15px;
border-radius: 50%;
background: #fff;
border: 5px solid #701c2c;
position: relative;
top: 5px;
left: 90px;
}
.eye:before{
content:"";
display:block;
height:3px;
width:15px;
border-radius: 50%;
background:#701c2c;
/*border:3px solid #701c2c;*/
position: relative;
top:-9px;
left: 3px;
}
.eye:after{
content:"";
display:block;
height:5px;
width:5px;
border-radius:50%;
background:#000;
position: absolute;
top:4px;
}
.ulgy{
height:10px;
width:10px;
border-radius: 50%;
background:#f08ca6;
position: absolute;
top:10px;
left:10px;
}
.ulgy:before {
content: "";
display: block;
height: 5px;
width: 5px;
border-radius: 50%;
background: #f08ca6;
position: absolute;
top: 9px;
left: 15px;
}
.ulgy:after{
content: "";
display:block;
height:6px;
width:6px;
border-radius: 50%;
background:#f08ca6;
position: absolute;
top:13px;
left:5px;
}
.wing{
height:0px;
width:0px;
border:40px solid #b6323d;
position: absolute;
top:20px;
left:10px;
border-bottom:30px solid transparent;
border-right:30px solid transparent;
transform-origin: center top;
animation: fly 0.3s 0s infinite;
z-index:2;
}
.last{
height:0px;
width:0px;
border:35px solid #ec4a61;
position: absolute;
top:7px;
left:-30px;
border-radius: 10px;
border-bottom:15px solid transparent;
border-right:15px solid transparent;
border-top:15px solid transparent;
}
</style>
</head>
<body>
<div class="cloud"></div>
<div class="cloud" id="cloudp"></div>
<div class="cloud" id="cloudp2"></div>
<div class="birdbody">
<div class="mouse"></div>
<div class="eye"></div>
<div class="ulgy"></div>
<div class="wing"></div>
<div class="last"></div>
</div>
</body>
</html>
类似资料：