纯CSS3实现流星划过动画

1.html ：创建几个流星

<div class="meteor-body"><div class="main-con"><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div></div>
</div>

2.css动画：如下图所示，流星坠落过程有两个动画

（1）流星渐变淡入淡出动画

（2）流星坠落动画

动画代码如下所示：

/* 动画 */
@-webkit-keyframes tail {0% {opacity: 0;}30% {opacity: 1;}100% {opacity: 0;}
}@keyframes tail {0% {opacity: 0;}30% {opacity: 1;}100% {opacity: 0;}
}
@-webkit-keyframes shooting {0% {-webkit-transform: translateY(0);transform: translateY(0);}100% {-webkit-transform: translateY(100px);transform: translateY(100px);}
}
@keyframes shooting {0% {-webkit-transform: translateY(0);transform: translateY(0);}100% {-webkit-transform: translateY(100px);transform: translateY(100px);}
}

3.css布局不展示了，下面为代码地址，欢迎评论交流

代码地址：https://github.com/dong1220/meteor

纯CSS3实现流星划过动画相关推荐

css3实现流星划过动画效果
html结构: <div class="d-shootingStar"><div class="d-stars"></div> ...
css3蒙版运动,纯CSS3制作逼真的汽车运动动画
简要教程这是一款使用纯CSS3制作的逼真汽车运动动画特效.该特效中,所有元素都是通过CSS渲染得到的,没有使用任何图片.它通过公路斑马线的左右晃动来制作出汽车运动的视觉效果. 使用方法 HTML结构 ...
纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览源码下载实现的代码. html代码: < ...
一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
html 鼠标图标做成动画效果,纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 实现的代码. html代码: 复制代码代码如下: css3代 ...
汉堡式折叠html,纯CSS3菜单汉堡包按钮变形动画特效
这是一款非常有趣的纯CSS3菜单汉堡包按钮变形动画特效.该特效共有9种不同的按钮变形动画效果,这些效果都是使用CSS3帧动画完成的,效果非常的酷. 制作方法 HTML结构该按钮变形动画使用嵌套的H ...
纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
纯CSS3海底泡泡多角鱼动画js特效
下载地址纯CSS3海底泡泡多角鱼动画特效是一款纯css3绘制卡通的海底水气泡和多角鱼群动画特效. dd:
纯CSS3 制作交通信号灯红绿灯动画效果
纯CSS3 制作交通信号灯红绿灯动画效果 HTML: <div class="light"><div class="red"></ ...

纯CSS3实现流星划过动画

纯CSS3实现流星划过动画相关推荐

最新文章

热门文章