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.........完整代码请登录后点击上方下载按钮下载查看