用HTML、CSS写一个动态小火箭，CV即可

最新推荐文章于 2024-05-07 13:19:36 发布

林多多@

最新推荐文章于 2024-05-07 13:19:36 发布

阅读量810

点赞数 2

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_59816940/article/details/123363889

版权

动态小火箭

源码，cv即可

<!DOCTYPE html>
<html>

<head>
    <title>Rocket Animation</title>

    <link rel="stylesheet" href="rocket.css" type="text/css">

</head>

<body>
    
    <div class="scene">
        <div class="rocket">
            <img src="rocket2.png" alt="rocket" style="width:100px">
        </div>
    </div>
    <script>

        function stars(){
            let count = 50;
            let scene = document.querySelector('.scene');
            let i=0;
            
            while(i < count){
                
                let star = document.createElement('i');
                let x =Math.floor(Math.random() * window.innerWidth*2);
                
                let duration = Math.random() * 1;
                let h =Math.random() * 100;
                
                star.style.left = x + 'px';
                star.style.width = 1 + 'px';
                star.style.height = h + 'px';
                star.style.animationDuration = duration + 's';

                scene.appendChild(star);
                i++;
            }
        }
        stars();
        al
    </script>
</body>

</html>

*{
    /* 格式化 */
    padding: 0px;
    margin:0px;
    /* 设置盒子大小计算方式 width = content + border +padding */
    box-sizing: border-box;
}
.scene{
    position: relative;
    /* 设置大小 */
    width:100%;
    height:100vh;
    /* 设置背景色 */
    background: #01070a;
    overflow: hidden;
    /* 设置显示模式为弹性盒子 */
    display:flex;
    justify-content: center;
    align-items: center;
}
.scene i{
    position: absolute;
    top:-250px;
    background: rgba(255,255,255,0.5);
    animation: Stars linear infinite;
}
@keyframes Stars {
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(200vh) ;
    }
}
.scene .rocket{
    position: relative;
    animation: fly 0.2s ease infinite ;
}
@keyframes fly {
    0%,100%{
        transform: translateY(-2px);
    }
    50%{
        transform: translateY(2px);
    }
}
.scene .rocket::before{
    content:"";
    width:5px;
    height:240px;
    position: absolute;
    bottom: -235px;
    left:50%;
    transform: translate(-50%,0);
    background:linear-gradient(#00d0ff,transparent);
}