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: 200%; transform: rotateZ(139deg); } .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 * 2); 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 * 2); 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% - -4px * 2); left: calc(50% - 248px); -webkit-animation-delay: 3060ms; animation-delay: 3060ms; } .shooting_star:nth-child(1)::before, .shooting_star:nth-child(1)::after { -webkit-animation-delay: 3060ms; animation-delay: 3060ms; } .shooting_star:nth-child(2) { top: calc(50% - 180px * 2); left: calc(50% - 166px); -webkit-animation-delay: 4693ms; animation-delay: 4693ms; } .shooting_star:nth-child(2)::before, .shooting_star:nth-child(2)::after { -webkit-animation-delay: 4693ms; animation-delay: 4693ms; } .shooting_star:nth-child(3) { top: calc(50% - -88px * 2); left: calc(50% - 136px); -webkit-animation-delay: 1178ms; animation-delay: 1178ms; } .shooting_star:nth-child(3)::before, .shooting_star:nth-child(3)::after { -webkit-animation-delay: 1178ms; animation-delay: 1178ms; } .shooting_star:nth-child(4) { top: calc(50% - 92px * 2); left: calc(50% - 92px); -webkit-animation-delay: 9285ms; animation-delay: 9285ms; } .shooting_star:nth-child(4)::before, .shooting_star:nth-child(4)::after { -webkit-animation-delay: 9285ms; animation-delay: 9285ms; } .shooting_star:nth-child(5) { top: calc(50% - 89px * 2); left: calc(50% - 92px); -webkit-animation-delay: 5475ms; animation-delay: 5475ms; } .shooting_star:nth-child(5)::before, .shooting_star:nth-child(5)::after { -webkit-animation-delay: 5475ms; animation-delay: 5475ms; } .shooting_star:nth-child(6) { top: calc(50% - -164px * 2); left: calc(50% - 27px); -webkit-animation-delay: 9220ms; animation-delay: 9220ms; } .shooting_star:nth-child(6)::before, .shooting_star:nth-child(6)::after { -webkit-animation-delay: 9220ms; animation-delay: 9220ms; } .shooting_star:nth-child(7) { top: calc(50% - -136px * 2); left: calc(50% - 243px); -webkit-animation-delay: 7942ms; animation-delay: 7942ms; } .shooting_star:nth-child(7)::before, .shooting_star:nth-child(7)::after { -webkit-animation-delay: 7942ms; animation-delay: 7942ms; } .shooting_star:nth-child(8) { top: calc(50% - 174px * 2); left: calc(50% - 75px); -webkit-animation-delay: 8312ms; animation-delay: 8312ms; } .shooting_star:nth-child(8)::before, .shooting_star:nth-child(8)::after { -webkit-animation-delay: 8312ms; animation-delay: 8312ms; } .shooting_star:nth-child(9) { top: calc(50% - 138px * 2); left: calc(50% - 281px); -webkit-animation-delay: 6475ms; animation-delay: 6475ms; } .shooting_star:nth-child(9)::before, .shooting_star:nth-child(9)::after { -webkit-animation-delay: 6475ms; animation-delay: 6475ms; } .shooting_star:nth-child(10) { top: calc(50% - 25px * 2); left: calc(50% - 25px); -webkit-animation-delay: 7118ms; animation-delay: 7118ms; } .shooting_star:nth-child(10)::before, .shooting_star:nth-child(10)::after { -webkit-animation-delay: 7118ms; animation-delay: 7118ms; } .shooting_star:nth-child(11) { top: calc(50% - 184px * 2); left: calc(50% - 198px); -webkit-animation-delay: 8570ms; animation-delay: 8570ms; } .shooting_star:nth-child(11)::before, .shooting_star:nth-child(11)::after { -webkit-animation-delay: 8570ms; animation-delay: 8570ms; } .shooting_star:nth-child(12) { top: calc(50% - -194px * 2); left: calc(50% - 283px); -webkit-animation-delay: 1026ms; animation-delay: 1026ms; } .shooting_star:nth-child(12)::before, .shooting_star:nth-child(12)::after { -webkit-animation-delay: 1026ms; animation-delay: 1026ms; } .shooting_star:nth-child(13) { top: calc(50% - 169px * 2); left: calc(50% - 42px); -webkit-animation-delay: 4957ms; animation-delay: 4957ms; } .shooting_star:nth-child(13)::before, .shooting_star:nth-child(13)::after { -webkit-animation-delay: 4957ms; animation-delay: 4957ms; } .shooting_star:nth-child(14) { top: calc(50% - -114px * 2); left: calc(50% - 139px); -webkit-animation-delay: 5748ms; animation-delay: 5748ms; } .shooting_star:nth-child(14)::before, .shooting_star:nth-child(14)::after { -webkit-animation-delay: 5748ms; animation-delay: 5748ms; } .shooting_star:nth-child(15) { top: calc(50% - 140px * 2); left: calc(50% - 283px); -webkit-animation-delay: 2809ms; animation-delay: 2809ms; } .shooting_star:nth-child(15)::before, .shooting_star:nth-child(15)::after { -webkit-animation-delay: 2809ms; animation-delay: 2809ms; } .shooting_star:nth-child(16) { top: calc(50% - 72px * 2); left: calc(50% - 88px); -webkit-animation-delay: 8661ms; animation-delay: 8661ms; } .shooting_star:nth-child(16)::before, .shooting_star:nth-child(16)::after { -webkit-animation-delay: 8661ms; animation-delay: 8661ms; } .shooting_star:nth-child(17) { top: calc(50% - 40px * 2); left: calc(50% - 273px); -webkit-animation-delay: 8037ms; animation-delay: 8037ms; } .shooting_star:nth-child(17)::before, .shooting_star:nth-child(17)::after { -webkit-animation-delay: 8037ms; animation-delay: 8037ms; } .shooting_star:nth-child(18) { top: calc(50% - 176px * 2); left: calc(50% - 27px); -webkit-animation-delay: 826ms; animation-delay: 826ms; } .shooting_star:nth-child(18)::before, .shooting_star:nth-child(18)::after { -webkit-animation-delay: 826ms; animation-delay: 826ms; } .shooting_star:nth-child(19) { top: calc(50% - -164px * 2); left: calc(50% - 229px); -webkit-animation-delay: 1822ms; animation-delay: 1822ms; } .shooting_star:nth-child(19)::before, .shooting_star:nth-child(19)::after { -webkit-animation-delay: 1822ms; animation-delay: 1822ms; } .shooting_star:nth-child(20) { top: calc(50% - 85px * 2); left: calc(50% - 161px); -webkit-animation-delay: 5305ms; animation-delay: 5305ms; } .shooting_star:nth-child(20)::before, .shooting_star:nth-child(20)::after { -webkit-animation-delay: 5305ms; animation-delay: 5305ms; } .shooting_star:nth-child(21) { top: calc(50% - 100px * 2); left: calc(50% - 300px); -webkit-animation-delay: 4305ms; animation-delay: 4305ms; } .shooting_star:nth-child(21)::before, .shooting_star:nth-child(21)::after { -webkit-animation-delay: 4305ms; animation-delay: 4305ms; } @-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); } } .night{ position: absolute; z-index: -1; } /* 登录板块 */ html { height: 100%; } .login-box { position: absolute; top: 50%; left: 50%; width: 500px; padding: 40px; /* 登录框居中 */ transform: translate(-50%, -50%); background: rgba(0, 0, 0, .8); /* css3新特性，任何内外边距和边框都将在已设定的宽度和高度内进行绘制 */ box-sizing: border-box; /* 添加阴影 */ box-shadow: 0 15px 25px rgba(0, 0, 0, .6); /* 边框圆角 */ border-radius: 10px; } .login-box h2 { margin: 0 0 30px; padding: 0; color: #fff; text-align: center; } .login-box .user-box { position: relative; } .login-box .user-box input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } .login-box .user-box label { position: absolute; top: 0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; /* 元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素 */ pointer-events: none; transition: .5s; } .login-box .user-box input:focus~label, .login-box .user-box input:valid~label { top: -20px; left: 0; color: #03e9f4; font-size: 12px; } /* .login-box form a { position: relative; display: inline-block; padding: 10px 20px; color: #2cacb1; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing: 4px } */ .login-box a:nth-of-type(1){ position: relative; display: inline-block; padding: 10px 20px; color: #2cacb1; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing: 4px } .login-box a:nth-of-type(2){ position: relative; display: inline-block; padding: 10px 20px; color: #2cacb1; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; margin-left: 240px; letter-spacing: 4px } .button{ color: #03e9f4; background-color: #090a0f; } .button:hover { border: #03e9f4 1px solid; background: #03e9f4; color: #fff; border-radius: 5px; box-shadow: 0 0 20px #03e9f4; } /* 按钮特效 -Start */ .login-box a span { position: absolute; display: block; } .login-box a span:nth-child(1) { top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #03e9f4); animation: btn-anim1 1s linear infinite; } @keyframes btn-anim1 { 0% { left: -100%; } 50%, 100% { left: 100%; } } .login-box a span:nth-child(2) { top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, #03e9f4); animation: btn-anim2 1s linear infinite; animation-delay: .25s } @keyframes btn-anim2 { 0% { top: -100%; } 50%, 100% { top: 100%; } } .login-box a span:nth-child(3) { bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, #03e9f4); animation: btn-anim3 1s linear infinite; animation-delay: .5s } @keyframes btn-anim3 { 0% { right: -100%; } 50%, 100% { right: 100%; } } .login-box a span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, #03e9f4); animation: btn-anim4 1s linear infinite; animation-delay: .75s } @keyframes btn-anim4 { 0% { bottom: -100%; } 50%, 100% { bottom: 100%; } } /* 按钮特效End */
标签：star,流星雨,delay,nth,animation,注册,child,shooting,页面 From： https://www.cnblogs.com/ljlp/p/16826722.html