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