css实现类似萤火虫或蝴蝶的发光昆虫展翅飞翔动画效果代码-html代码-BFW代码库

css实现类似萤火虫或蝴蝶的发光昆虫展翅飞翔动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现类似萤火虫或蝴蝶的发光昆虫展翅飞翔动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body {
        	background:#2B7637;
        	background:#144906
        }
        .fairy {
        	width:300px;
        	height:300px;
        	top:50%;
        	left:50%;
        	margin:-150px 0 0 -150px;
        	position:absolute;
        	perspective:250px;
        	-webkit-animation:flying 12s linear infinite;
        	animation:flying 12s linear infinite
        }
        .glow {
        	width:56px;
        	height:56px;
        	top:50%;
        	left:50%;
        	margin:-28px 0 0 -28px;
        	position:absolute;
        	transform-style:preserve-3d;
        	border-radius:100px;
        	background:radial-gradient(ellipse at center,white 0,#fff0f0 35%,#fcc 50%,#f2949a 65%,#df7e84 100%)
        }
        .glow:after {
        	content:"";
        	width:54px;
        	height:54px;
        	top:50%;
        	left:50%;
        	margin:-27px 0 0 -27px;
        	position:absolute;
        	border-radius:100px;
        	-webkit-animation:pulse 1.5s ease-in-out infinite alternate;
        	animation:pulse 1.5s ease-in-out infinite alternate
        }
        .sparkle {
        	height:3px;
        	width:3px;
        	background:#FFAFB1;
        	position:absolute;
        	border-radius:100px;
        	opacity:0;
        	z-index:100
        }
        .sparkle:nth-child(1) {
        	top:-20px;
        	left:15px
        }
        .sparkle:nth-child(2) {
        	top:3px;
        	left:60px
        }
        .sparkle:nth-child(3) {
        	top:60px;
        	left:50px
        }
        .sparkle:nth-child(4) {
        	top:68px;
        	left:16px
        }
        .sparkle:nth-child(5) {
        	top:50px;
        	left:0
        }
        .sparkle:nth-child(1) {
        	-webkit-animation:sparkling .8s ease-in-out .2s infinite;
        	animation:sparkling .8s ease-in-out .2s infinite
        }
        .sparkle:nth-child(2) {
        	-webkit-animation:sparkling .8s ease-in-out .4s infinite;
        	animation:sparkling .8s ease-in-out .4s infinite
        }
        .sparkle:nth-child(3) {
        	-webkit-animation:sparkling .8s ease-in-out .6s infinite;
        	animation:sparkling .8s ease-in-out .6s infinite
        }
        .sparkle:nth-child(4) {
        	-webkit-animation:sparkling .8s ease-in-out .8s infinite;
        	animation:sparkling .8s ease-in-out .8s infinite
        }
        .sparkle:nth-child(5) {
        	-webkit-animation:sparkling .8s ease-in-out 1s infinite;
        	animation:sparkling .8s ease-in-out 1s infinite
        }
        .wings {
        	position:relative;
        	top:50%;
        	left:50%;
        	width:144px;
        	height:114px;
        	margin:-87px 0 0 -72px
        }
        .wings:before,.wings:after {
        	content:"";
        	width:64px;
        	height:114px;
        	top:50%;
        	left:50%;
        	margin:-57px 0 0 -72px;
        	position:absolute;
        	transform-origin:right;
        	-webkit-animation:flapping-left .2s ease-in-out infinite;
        	animation:flapping-left .2s ease-in-out infinite;
        	background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wing-left.svg") no-repeat
        }
        .wings:after {
        	left:auto;
        	right:50%;
       .........完整代码请登录后点击上方下载按钮下载查看