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

代码语言:html

所属分类:动画

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

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

网友评论0