Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); height: 100vh; overflow: hidden; display: flex; font-family: "Anton", sans-serif; justify-content: center; align-items: center; } .night { position: relative; width: 100%; height: 100%; transform: rotateZ(45deg); } .shooting_star { position: absolute; left: 50%; top: 50%; height: 2px; background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0)); border-radius: 999px; filter: drop-shadow(0 0 6px #699bff); -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite; animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite; } .shooting_star::before { content: ""; position: absolute; top: calc(50% - 1px); right: 0; height: 2px; background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0)); transform: translateX(50%) rotateZ(45deg); border-radius: 100%; -webkit-animation: shining 3000ms ease-in-out infinite; animation: shining 3000ms ease-in-out infinite; } .shooting_star::after { content: ""; position: absolute; top: calc(50% - 1px); right: 0; height: 2px; background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0)); transform: translateX(50%) rotateZ(45deg); border-radius: 100%; -webkit-animation: shining 3000ms ease-in-out infinite; animation: shining 3000ms ease-in-out infinite; transform: translateX(50%) rotateZ(-45deg); } .shooting_star:nth-child(1) { top: calc(50% - -27px); left: calc(50% - 236px); -webkit-animation-delay: 8752ms; animation-delay: 8752ms; } .shooting_star:nth-child(1)::before, .shooting_star:nth-child(1)::after { -webkit-animation-delay: 8752ms; animation-delay: 8752ms; } .shooting_star:nth-child(2) { top: calc(50% - -110px); left: calc(50% - 125px); -webkit-animation-delay: 6721ms; animation-delay: 6721ms; } .shooting_star:nth-child(2)::before, .shooting_star:nth-child(2)::after { -webkit-animation-delay: 6721ms; animation-delay: 6721ms; } .shooting_star:nth-child(3) { top: calc(50% - -10px); left: calc(50% - 283px); -webkit-animation-delay: 8915ms; animation-delay: 8915ms; } .shooting_star:nth-child(3)::before, .shooting_star:nth-child(3)::after { -webkit-animation-delay: 8915ms; animation-delay: 8915ms; } .shooting_star:nth-child(4) { top: calc(50% - -150px); left: calc(50% - 63px); -webkit-animation-delay: 4859ms; animation-delay: 4859ms; } .shooting_star:nth-child(4)::before, .shooting_star:nth-child(4)::after { -webkit-animation-delay: 4859ms; animation-delay: 4859ms; } .shooting_star:nth-child(5) { top: calc(50% - 21px); left: calc(50% - 154px); -webkit-animation-delay: 8735ms; animation-delay: 8735ms; } .shooting_star:nth-child(5)::before, .shooting_star:nth-child(5)::after { -webkit-animation-delay: 8735ms; animation-delay: 8735ms; } .shooting_star:nth-child(6) { top: calc(50% - -106px); left: calc(50% - 130px); -webkit-animation-delay: 2949ms; animation-delay: 2949ms; } .shooting_star:nth-child(6)::before, .shooting_star:nth-child(6)::after { -webkit-animation-delay: 2949ms; animation-delay: 2949ms; } .shooting_star:nth-child(7) { top: calc(50% - -90px); left: calc(50% - 95px); -webkit-animation-delay: 7816ms; animation-delay: 7816ms; } .shooting_star:nth-child(7)::before, .shooting_star:nth-child(7)::after { -webkit-animation-delay: 7816ms; animation-delay: 7816ms; } .shooting_star:nth-child(8) { top: calc(50% - 50px); left: calc(50% - 117px); -webkit-animation-delay: 3768ms; animation-delay: 3768ms; } .shooting_star:nth-child(8)::before, .shooting_star:nth-child(8)::after { -webkit-animation-delay: 3768ms; animation-delay: 3768ms; } .shooting_star:nth-child(9) { top: calc(50% - 190px); left: calc(50% - 158px); -webkit-animation-delay: 2620ms; animation-delay: 2620ms; } .shooting_star:nth-child(9)::before, .shooting_star:nth-child(9)::after { -webkit-animation-delay: 2620ms; animation-delay: 2620ms; } .shooting_star:nth-child(10) { top: calc(50% - 6px); left: calc(50% - 96px); -webkit-animation-delay: 1842ms; animation-delay: 1842ms; } .shooting_star:nth-child(10)::before, .shooting_star:nth-child(10)::after { -webkit-animation-delay: 1842ms; animation-delay: 1842ms; } .shooting_star:nth-child(11) { top: calc(50% - 129px); left: calc(50% - 133px); -webkit-animation-delay: 41ms; animation-delay: 41ms; } .shooting_star:nth-child(11)::before, .shooting_star:nth-child(11)::after { -webkit-animation-delay: 41ms; animation-delay: 41ms; } .shooting_star:nth-child(12) { top: calc(50% - 22px); left: calc(50% - 275px); -webkit-animation-delay: 4525ms; animation-delay: 4525ms; } .shooting_star:nth-child(12)::before, .shooting_star:nth-child(12)::after { -webkit-animation-delay: 4525ms; animation-delay: 4525ms; } .shooting_star:nth-child(13) { top: calc(50% - 143px); left: calc(50% - 219px); -webkit-animation-delay: 3600ms; animation-delay: 3600ms; } .shooting_star:nth-child(13)::before, .shooting_star:nth-child(13)::after { -webkit-animation-delay: 3600ms; animation-delay: 3600ms; } .shooting_star:nth-child(14) { top: calc(50% - -156px); left: calc(50% - 142px); -webkit-animation-delay: 6309ms; animation-delay: 6309ms; } .shooting_star:nth-child(14)::before, .shooting_star:nth-child(14)::after { -webkit-animation-delay: 6309ms; animation-delay: 6309ms; } .shooting_star:nth-child(15) { top: calc(50% - 100px); left: calc(50% - 145px); -webkit-animation-delay: 7858ms; animation-delay: 7858ms; } .shooting_star:nth-child(15)::before, .shooting_star:nth-child(15)::after { -webkit-animation-delay: 7858ms; animation-delay: 7858ms; } .shooting_star:nth-child(16) { top: calc(50% - 137px); left: calc(50% - 40px); -webkit-animation-delay: 2250ms; animation-delay: 2250ms; } .shooting_star:nth-child(16)::before, .shooting_star:nth-child(16)::after { -webkit-animation-delay: 2250ms; animation-delay: 2250ms; } .shooting_star:nth-child(17) { top: calc(50% - 75px); left: calc(50% - 107px); -webkit-animation-delay: 1351ms; animation-delay: 1351ms; } .shooting_star:nth-child(17)::before, .shooting_star:nth-child(17)::after { -webkit-animation-delay: 1351ms; animation-delay: 1351ms; } .shooting_star:nth-child(18) { top: calc(50% - -108px); left: calc(50% - 42px); -webkit-animation-delay: 482ms; animation-delay: 482ms; } .shooting_star:nth-child(18)::before, .shooting_star:nth-child(18)::after { -webkit-animation-delay: 482ms; animation-delay: 482ms; } .shooting_star:nth-child(19) { top: calc(50% - 156px); left: calc(50% - 159px); -webkit-animation-delay: 2341ms; animation-delay: 2341ms; } .shooting_star:nth-child(19)::before, .shooting_star:nth-child(19)::after { -webkit-animation-delay: 2341ms; animation-delay: 2341ms; } .shooting_star:nth-child(20) { top: calc(50% - 152px); left: calc(50% - 120px); -webkit-animation-delay: 4565ms; animation-delay: 4565ms; } .shooting_star:nth-child(20)::before, .shooting_star:nth-child(20)::after { -webkit-animation-delay: 4565ms; animation-delay: 4565ms; } @-webkit-keyframes tail { 0% { width: 0; } 30% { width: 100px; } 100% { width: 0; } } @keyframes tail { 0% { width: 0; } 30% { width: 100px; } 100% { width: 0; } } @-webkit-keyframes shining { 0% { width: 0; } 50% { width: 30px; } 100% { width: 0; } } @keyframes shining { 0% { width: 0; } 50% { width: 30px; } 100% { width: 0; } } @-webkit-keyframes shooting { 0% { transform: translateX(0); } 100% { transform: translateX(300px); } } @keyframes shooting { 0% { transform: translateX(0); } 100% { transform: translateX(300px); } } @-webkit-keyframes sky { 0% { transform: rotate(45deg); } 100% { transform: rotate(405deg); } } @keyframes sky { 0% { transform: rotate(45deg); } 100% { transform: rotate(405deg); } }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯CSS流星-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号