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