div+css实现小鸟天空中飞翔动画效果代码-html代码-BFW代码库

div+css实现小鸟天空中飞翔动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现小鸟天空中飞翔动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" class="sky">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.sky {
	height:100%;
	width:100%;
	background:linear-gradient(to bottom,#ADD8E6 0,#B5E0EF 100%);
	overflow:hidden
}
.bird,.bird *,.cloud {
	position:absolute
}
.bird:after,.bird:before,.bird *:after,.bird *:before,.cloud:after,.cloud:before {
	display:block;
	content:"";
	position:absolute
}
.bird {
	position:absolute;
	top:40%;
	left:50%;
	z-index:5;
	-webkit-animation:bird-movement-xy 20s linear infinite alternate both,bird-movement-z 50s linear infinite alternate both;
	animation:bird-movement-xy 20s linear infinite alternate both,bird-movement-z 50s linear infinite alternate both
}
.b-body {
	top:0;
	right:0;
	border-top:55px solid transparent;
	border-bottom:25px solid transparent;
	border-left:30px solid #5A5A5A;
	transform:rotate(-90deg)
}
.b-body:after {
	top:-55px;
	right:30px;
	border-top:55px solid transparent;
	border-bottom:25px solid transparent;
	border-left:25px solid #75BF75;
	transform:rotate(180deg)
}
.b-wings:before {
	top:54px;
	right:-51px;
	border-top:20px solid transparent;
	border-bottom:20px solid transparent;
	border-left:50px solid #5A5A5A;
	transform:rotateZ(90deg) rotateY(90deg);
	-webkit-animation:wing-movement-top .8s infinite linear both;
	animation:wing-movement-top .8s infinite linear both;
	transform-origin:0 0
}
.b-wings:after {
	top:56px;
	right:-11px;
	border-top:20px solid transparent;
	border-bottom:20px solid transparent;
	border-left:50px solid #A9A9A9;
	transform:rotateZ(-90deg) rotateY(90deg);
	-webkit-animation:wing-movement-bottom .8s infinite linear both;
	animation:wing-movement-bottom .8s infinite.........完整代码请登录后点击上方下载按钮下载查看