前端实现流星雨特效

前端实现流星雨特效

目录

​​前言​​

​​效果图：​​

​​HTML​​

​​CSS​​

​​完整代码​​

前言

使用html+css实现简单得浏览器特效，在编译器用导入项目，直接在浏览器打开即可，效果十分得炫酷，十分得哇塞，女朋友直呼NB!

效果图：

HTML

CSS

*{ margin: 0; padding: 0; box-sizing: border-box;}body{ overflow: hidden;}section{ position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background: url(bg.jpg); background-position-x: center; background-size: cover; animation: animateBg 50s linear infinite;}@keyframes animateBg{ 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); }}span{ position: absolute; top: 50%; left: 50%; width :4px; height: 4px; background: #fff; border-radius: 50px; box-shadow: 0 0 0 4px rgba(255,255,255,0.1), 0 0 0 8px rgba(255,255,255,0.1), 0 0 20px rgba(255,255,255,1); animation: animate 3s linear infinite;}span::before{ content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 300px; height: 1px; background: linear-gradient(90deg,#fff,transparent);}@keyframes animate{ 0% { transform: rotate(315deg) translateX(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(315deg) translateX(-1000px); opacity: 0; }}span:nth-child(1){ top: 0; right: 0; animation-delay: 0; animation-duration: 1s;}span:nth-child(2){ top: 0; right: 80px; left: initial; animation-delay: 0.2s; animation-duration: 3s;}span:nth-child(3){ top: 80px; right: 0; left: initial; animation-delay: 0.4s; animation-duration: 2s;}span:nth-child(4){ top: 0; right: 180px; left: initial; animation-delay: 0.6s; animation-duration: 1.5s;}span:nth-child(5){ top: 0; right: 400px; left: initial; animation-delay: 0.8s; animation-duration: 2.5s;}span:nth-child(6){ top: 0; right: 600px; left: initial; animation-delay: 1s; animation-duration: 3s;}span:nth-child(7){ top: 300px; right: 0; left: initial; animation-delay: 1.2s; animation-duration: 1.75s;}span:nth-child(8){ top: 0; right: 700px; left: initial; animation-delay: 1.4s; animation-duration: 1.25s;}span:nth-child(9){ top: 0; right: 1000px; left: initial; animation-delay: 0.75s; animation-duration: 2.25s;}span:nth-child(10){ top: 0; right: 450px; left: initial; animation-delay: 2.75s; animation-duration: 2.25s;}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。