css 制作流星效果（简单上手，一看就会）

css 制作流星效果（简单上手，一看就会）

css 制作流星效果

<div>黄色星星</div><div class="star-yellow"><div class="yellow"><div class="lineYellow"></div></div></div>

css部分

<style lang="scss" scoped>
// yellow
.star-yellow {border: 1px solid red;.yellow {border: 1px solid red;width: 125px;height: 120px;overflow: hidden;display: flex;justify-content: center;align-items: center;perspective: 800px;/* perspective-origin: left bottom; */transform-style: preserve-3d;background-color: #007dff;}
}.lineYellow {width: 60px;height: 5px;border-radius: 4px 100% 100% 4px;background: linear-gradient(to right, #fff74d, #b5ac62, transparent);animation: downYellow 4s linear infinite both;animation-delay: 1.2s;
}.lineYellow::before,
.lineYellow::af