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

代码语言：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;
	height:10px;
	border-radius:50%;
	top:-54%;
	left:14%;
	transform:rotate(-25deg)
}
.cloud:before {
	width:20px;
	height:20px;
	border-radius:50%;
	top:-90%;
	right:10%
}
.cloud:nth-child(1) {
	top:11%;
	left:178%;
	transform:scale(1);
	-webkit-animation:cloud-movement-1 27s -23s infinite linear;
	animation:cloud-movement-1 27s -23s infinite linear;
	opacity:.92;
	z-index:2
}
@-webkit-keyframes cloud-movement-1 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}@keyframes cloud-movement-1 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}.cloud:nth-child(2) {
	top:52%;
	left:121%;
	transform:scale(5);
	-webkit-animation:cloud-movement-2 24s -26s infinite linear;
	animation:cloud-movement-2 24s -26s infinite linear;
	opacity:.92;
	z-index:6
}
@-webkit-keyframes cloud-movement-2 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}@keyframes cloud-movement-2 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}.cloud:nth-child(3) {
	top:44%;
	left:139%;
	transform:scale(5);
	-webkit-animation:cloud-movement-3 12s -38s infinite linear;
	animation:cloud-movement-3 12s -38s infinite linear;
	opacity:.92;
	z-index:6
}
@-webkit-keyframes cloud-movement-3 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}@keyframes cloud-movement-3 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}.cloud:nth-child(4) {
	top:47%;
	left:193%;
	transform:scale(5);
	-webkit-animation:cloud-movement-4 49s -1s infinite linear;
	animation:cloud-movement-4 49s -1s infinite linear;
	opacity:.92;
	z-index:6
}
@-webkit-keyframes cloud-movement-4 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}@keyframes cloud-movement-4 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}.cloud:nth-child(5) {
	top:61%;
	left:103%;
	transform:scale(7);
	-webkit-animation:cloud-movement-5 45s -5s infinite linear;
	animation:cloud-movement-5 45s -5s infinite linear;
	opacity:.92;
	z-index:8
}
@-webkit-keyframes cloud-movement-5 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}@keyframes cloud-movement-5 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}.cloud:nth-child(6) {
	top:27%;
	left:105%;
	transform:scale(3);
	-webkit-animation:cloud-movement-6 49s -1s infinite linear;
	animation:cloud-movement-6 49s -1s infinite linear;
	opacity:.92;
	z-index:4
}
@-webkit-keyframes cloud-movement-6 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}@keyframes cloud-movement-6 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}.cloud:nth-child(7) {
	top:60%;
	left:116%;
	transform:scale(6);
	-webkit-animation:cloud-movement-7 29s -21s infinite linear;
	animation:cloud-movement-7 29s -21s infinite linear;
	opacity:.92;
	z-index:7
}
@-webkit-keyframes cloud-movement-7 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}@keyframes cloud-movement-7 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}.cloud:nth-child(8) {
	top:23%;
	left:103%;
	transform:scale(7);
	-webkit-animation:cloud-movement-8 26s -24s infinite linear;
	animation:cloud-movement-8 26s -24s infinite linear;
	opacity:.92;
	z-index:8
}
@-webkit-keyframes cloud-movement-8 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}@keyframes cloud-movement-8 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}.cloud:nth-child(9) {
	top:53%;
	left:112%;
	transform:scale(7);
	-webkit-animation:cloud-movement-9 17s -33s infinite linear;
	animation:cloud-movement-9 17s -33s infinite linear;
	opacity:.92;
	z-index:8
}
@-webkit-keyframes cloud-movement-9 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}@keyframes cloud-movement-9 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}.cloud:nth-child(10) {
	top:80%;
	left:128%;
	transform:scale(2);
	-webkit-animation:cloud-movement-10 38s -12s infinite linear;
	animation:cloud-movement-10 38s -12s infinite linear;
	opacity:.92;
	z-index:3
}
@-webkit-keyframes cloud-movement-10 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}@keyframes cloud-movement-10 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}.cloud:nth-child(11) {
	top:35%;
	left:177%;
	transform:scale(1);
	-webkit-animation:cloud-movement-11 26s -24s infinite linear;
	animation:cloud-movement-11 26s -24s infinite linear;
	opacity:.92;
	z-index:2
}
@-webkit-keyframes cloud-movement-11 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}@keyframes cloud-movement-11 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}.cloud:nth-child(12) {
	top:82%;
	left:107%;
	transform:scale(1);
	-webkit-animation:cloud-movement-12 16s -34s infinite linear;
	animation:cloud-movement-12 16s -34s infinite linear;
	opacity:.92;
	z-index:2
}
@-webkit-keyframes cloud-movement-12 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}@keyframes cloud-movement-12 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}.cloud:nth-child(13) {
	top:8%;
	left:101%;
	transform:scale(5);
	-webkit-animation:cloud-movement-13 22s -28s infinite linear;
	animation:cloud-movement-13 22s -28s infinite linear;
	opacity:.92;
	z-index:6
}
@-webkit-keyframes cloud-movement-13 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}@keyframes cloud-movement-13 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}.cloud:nth-child(14) {
	top:28%;
	left:128%;
	transform:scale(1);
	-webkit-animation:cloud-movement-14 42s -8s infinite linear;
	animation:cloud-movement-14 42s -8s infinite linear;
	opacity:.92;
	z-index:2
}
@-webkit-keyframes cloud-movement-14 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}@keyframes cloud-movement-14 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}.cloud:nth-child(15) {
	top:96%;
	left:113%;
	transform:scale(1);
	-webkit-animation:cloud-movement-15 41s -9s infinite linear;
	animation:cloud-movement-15 41s -9s infinite linear;
	opacity:.92;
	z-index:2
}
@-webkit-keyframes cloud-movement-15 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}@keyframes cloud-movement-15 {
	99.999% {
	opacity:.92;
	left:-10%
}
100% {
	opacity:0
}
}..........完整代码请登录后点击上方下载按钮下载查看