css实现可爱蜜蜂眨眼展翅飞行动画效果-html代码-BFW代码库

css实现可爱蜜蜂眨眼展翅飞行动画效果

代码语言：html

所属分类：动画

代码描述：css实现可爱蜜蜂眨眼展翅飞行动画效果

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        .bee {
        	display:inline-block;
        	position:relative;
        	width:130px;
        	height:90px;
        	z-index:100;
        	background-color:#61555a;
        	border-radius:100% 98% 98% 100%;
        	box-shadow:inset 0 -10px 0 -2px rgba(0,0,0,0.15),inset 32px 0 0 -20px #61555a,inset 48px 0 0 -20px #fcd658,inset 58px 0 0 -20px #61555a,inset 88px 0 0 -28px #fcd658;
        	-moz-transform:rotate(2deg);
        	-ms-transform:rotate(2deg);
        	-webkit-transform:rotate(2deg);
        	transform:rotate(2deg);
        	-moz-animation:float 3s infinite;
        	-webkit-animation:float 3s infinite;
        	animation:float 3s infinite
        }
        .bee:before,.bee:after {
        	display:block;
        	content:"";
        	position:absolute
        }
        .bee:before {
        	right:24px;
        	bottom:57%;
        	width:8px;
        	height:15px;
        	border-radius:100% 100% 88% 88%;
        	background-color:#fff;
        	box-shadow:10px 0 0 -2px #fff;
        	-moz-animation:blink 7s infinite;
        	-webkit-animation:blink 7s infinite;
        	animation:blink 7s infinite
        }
        .bee:after {
        	left:-7px;
        	top:50%;
        	width:20px;
        	height:10px;
        	border-radius:100% 100% 0 0;
        	border-top:5px solid #61555a
        }
        .bee .antennae {
        	position:relative
        }
        .bee .antennae:before,.bee .antennae:after {
        	display:block;
        	content:"";
        	position:absolute
        }
        .bee .antennae:before {
        	top:4px;
        	right:2px;
        	height:32px;
        	width:18px;
        	z-index:-1;
        	border-left:4px solid #61555a;
        	border-radius:100% 0 0 100%;
        	-moz-transform:rotate(30deg);
        	-ms-transform:rotate(30deg);
        	-webkit-transform:rotate(30deg);
        	transform:rotate(30deg);
        	-moz-animation:antenna 5s infinite;
        	-webkit-animation:antenna 5s infinite;
        	animation:antenna 5s infinite
        }
        .bee .antennae:after {
        	top:-4px;
        	right:20px;
        	height:32px;
        	width:6px;
        	z-index:-1;
        	border-left:4px solid #61555a;
        	border-radius:100% 0 0 100%;
        	-moz-transform:rotate(14deg);
        	-ms-transform:rotate(14deg);
        	-webkit-transform:rotate(14deg);
        	transform:rotate(14deg);
        	-moz-animation:antenna 10s infinite;
        	-webkit-animation:antenna 10s infinite;
        	animation:antenna 10s infinite
        }
        .bee .wing {
        	position:absolute;
        	background-color:rgba(0,0,0,0.2);
        	border-radius:100% 100% 100% 100%
        }
        .bee .wing.one {
        	width:34px;
        	height:52px;
        	top:-44px;
        	left:27px;
        	box-shadow:inset 6px 1px 0 -4px rgba(0,0,0,0.3);
        	-moz-transform-origin:50% 100%;
        	-ms-transform-origin:50% 100%;
        	-webkit-transform-origin:50% 100%;
        	transform-origin:50% 100%;
        	-moz-transform:rotate(-30deg);
        	-ms-transform:rotate(-30deg);
        	-webkit-transform:rotate(-30deg);
        	transform:rotate(-30deg);
        	-moz-animation:wings .01s infinite;
        	-webkit-animation:wings .01s infinite;
        	animation:wings .01s infinite
        }
        .bee .wing.two {
        	width:32px;
        	height:44px;
        	top:-48px;
        	left:32px;
        	box-shadow:3px 1px 0 -1px rgba(0,0,0,0.4);
        	-moz-transform-origin:50% 100%;
        	-ms-transform.........完整代码请登录后点击上方下载按钮下载查看