css3制作流星雨动画

CSS3制作流星雨动画

流星雨是许多人所梦见过的美丽场景，如今借助CSS3，我们可以在网页上制作出逼真的流星雨动画效果，让我们来看看如何实现。

//html代码div class="stars">
    !--添加流星的div-->
    div class="meteor">
    /div>
    div class="meteor">
    /div>
    div class="meteor">
    /div>
    div class="meteor">
    /div>
    /div>
//css代码.stars{
    //设置背景background: #0a0a2a;
    //设置宽度和高度width:100%;
    height:100vh;
    //开启动画效果animation: shooting-stars 15s linear infinite;
}
.meteor{
    //设置圆角border-radius:50%;
    //设置背景和颜色background: -webkit-gradient(linear, 0 0, 0 100%, from(#f77e41), to(#ed8d2c));
    background: -moz-linear-gradient(#f77e41,#ed8d2c);
    background: linear-gradient(to bottom, #f77e41,#ed8d2c);
    //设置位置和大小position: absolute;
    top: -10%;
    left: 50%;
    width: 4px;
    height: 60px;
    //设置缩放动画animation: trail 10s linear infinite;
}
@keyframes shooting-stars{
//设置同时动画0%{
 transform: translateX(300%) }
5%{
 transform: translateX(-50%) }
10%{
 transform: translateX(300%) }
15%{
 transform: translateX(-50%) }
20%{
 transform: translateX(300%) }
25%{
 transform: translateX(-50%) }
30%{
 transform: translateX(200%) }
35%{
 transform: translateX(-50%) }
100%{
 transform: translateX(300%) }
}
@keyframes trail{
//设置缩放动画0%{
 transform: scale(1) }
100%{
 transform: scale(0) }
}
    

通过CSS3的动画效果，我们设置流星的运行轨迹，同时加上背景和光芒特效，让流星在夜空中更加逼真，是一种美丽又实用的制作效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！