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