作者：手机用户2502910855 | 来源：互联网 | 2023-09-17 06:57
动态小火箭
源码&＃xff0c;cv即可
<html><head><title>Rocket Animationtitle><link rel&＃61;"stylesheet" href&＃61;"rocket.css" type&＃61;"text/css">head><body><div class&＃61;"scene"><div class&＃61;"rocket"><img src&＃61;"rocket2.png" alt&＃61;"rocket" style&＃61;"width:100px">div>div><script>function stars(){let count &＃61; 50;let scene &＃61; document.querySelector(&＃39;.scene&＃39;);let i&＃61;0;while(i < count){let star &＃61; document.createElement(&＃39;i&＃39;);let x &＃61;Math.floor(Math.random() * window.innerWidth*2);let duration &＃61; Math.random() * 1;let h &＃61;Math.random() * 100;star.style.left &＃61; x &＃43; &＃39;px&＃39;;star.style.width &＃61; 1 &＃43; &＃39;px&＃39;;star.style.height &＃61; h &＃43; &＃39;px&＃39;;star.style.animationDuration &＃61; duration &＃43; &＃39;s&＃39;;scene.appendChild(star);i&＃43;&＃43;;}}stars();alscript>
body>html>
*{padding: 0px;margin:0px;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;
}
&＃64;keyframes Stars {0%{transform: translateY(0);}100%{transform: translateY(200vh) ;}
}
.scene .rocket{position: relative;animation: fly 0.2s ease infinite ;
}
&＃64;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);
}
京公网安备 11010802041100号