css+svg实现蜜蜂展翅飞翔动画效果代码-html代码-BFW代码库

css+svg实现蜜蜂展翅飞翔动画效果代码

代码语言：html

所属分类：动画

代码描述：css+svg实现蜜蜂展翅飞翔动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: radial-gradient(
		circle,
		rgba(0, 20, 60, 1) 0%,
		rgba(0, 0, 0, 1) 100%
	);
}

svg {
	width: 300px;
}

/*Insect*/
.bodyinsect {
	fill: #f7931e;
}

ellipse {
	fill: #000;
}

.antenna {
	fill: none;
	stroke: #000;
	stroke-width: 10;
	stroke-linecap: round;
	animation: antenna ease-in-out 5s infinite alternate;
}

@keyframes antenna {
	0% {
		transform: translate(0px, 0px);
	}
	100% {
		transform: translate(0px, -20px);
	}
}

.nocturnalinsect {
	transform-origin: center center;
	animation: move ease-in-out 5s infinite alternate;
}

.wing {
	fill: #f7931e;
	stroke: #000000;
	stroke-width: 10;
	opacity: 0.8;
	transform-origin: 50% 50%;
	animation-direction: normal;
	animation: fly 1s infinite;
	animation-timing-function: ease-in-out;
}

@keyframes fly {
	0% {
		transform: translate(0px, 0px) scale(1);
	}

	50% {
		transform: translate(0px, 0px) scaleX(0.5);
	}

	100% {
		transform: translate(0px, 0px) scale(1);
	}
}

@keyframes move {
	0% {
		transform: translate(0px, 0px) rotate(0deg);
	}

	50% {
		transform: translate(-10px, 70px) rotate(10deg);
	}

	100% {
		transform: translate(10px, -70px) rotate(-10deg);
	}
}

/* Background */
.star {
	fill: #fff;
	opacity: 0.3;
}

.meteoroid {
	fill: #fff;
	animation: meteoroid linear 10s infinite;
	animation-direction: normal;
}

@keyframes meteoroid {
	0% {
		transform: translate(0, 0);
		opacity: 0.2;
	}

	50% {
		transform: translate(300px, 500px) scale(0.6);
		opacity: 0;
	}

	100% {
		transform: translate(300px, 500px) scale(0.1);
		opacity: 0;
	}
}

#milkyway {
	transform-origin: center center;
	animation: spin ease-in-out 120s infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(360deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
</style>

</head>
<body>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
	<g id="milkyway"></g>
	<circle class="meteoroid.........完整代码请登录后点击上方下载按钮下载查看