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 linear both;
	transform-origin:0 0
}
.b-details {
	top:39px;
	right:-13px;
	border-top:0 solid transparent;
	border-bottom:5px solid transparent;
	border-left:5px solid #FFFF43;
	transform:rotate(50deg)
}
.b-details:after {
	top:8px;
	right:3px;
	width:5px;
	height:5px;
	border-radius:50%;
	background-color:#2D2D2D
}
.b-beak {
	top:43px;
	right:-26px;
	border-top:0 solid transparent;
	border-bottom:11px solid transparent;
	border-left:13px solid gray;
	transform:rotate(-90deg)
}
.b-beak:after {
	top:3px;
	right:10px;
	border-top:0 solid transparent;
	border-bottom:5px solid transparent;
	border-left:11px solid #A9A9A9;
	transform:rotate(90deg)
}
.b-back {
	top:39px;
	right:55px;
	border-top:39px solid transparent;
	border-bottom:15px solid transparent;
	border-left:10px solid #5A5A5A;
	transform:rotate(-130deg)
}
.b-back:after {
	top:-43px;
	right:10px;
	border-top:43px solid transparent;
	border-bottom:11px solid transparent;
	border-left:9px solid #75BF75;
	transform:scale(-1,1)
}
.cloud {
	width:35px;
	height:11px;
	background-color:#fff;
	border-radius:100px;
	box-shadow:0 1px 5px 0 rgba(50,50,50,0.05);
	opacity:1
}
.cloud:after,.cloud:before {
	background-color:#fff
}
.cloud:after {
	width:10px;.........完整代码请登录后点击上方下载按钮下载查看