100个hr+css组成三维长方形旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:100个hr+css组成三维长方形旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; width: 100vw; height: 100vh; background: black; -webkit-perspective: 300px; perspective: 300px; overflow: hidden; } .wrapper { position: absolute; width: 100px; height: 100px; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: rotate 60s linear infinite; animation: rotate 60s linear infinite; } .wrapper hr:nth-child(1) { position: absolute; left: 0; width: 150px; -webkit-animation: hr1 30s ease-in-out -99s infinite alternate; animation: hr1 30s ease-in-out -99s infinite alternate; } @-webkit-keyframes hr1 { 0% { border: solid 2px #33ff70; box-shadow: 0 0 5px #56d1dc, 0 0 5px #56d1dc inset; -webkit-transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(0deg); transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ae3ff3; box-shadow: 0 0 5px #36fcdb, 0 0 5px #36fcdb inset; -webkit-transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(-41deg); transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(-41deg); width: 28px; } } @keyframes hr1 { 0% { border: solid 2px #33ff70; box-shadow: 0 0 5px #56d1dc, 0 0 5px #56d1dc inset; -webkit-transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(0deg); transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ae3ff3; box-shadow: 0 0 5px #36fcdb, 0 0 5px #36fcdb inset; -webkit-transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(-41deg); transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(-41deg); width: 28px; } } .wrapper hr:nth-child(2) { position: absolute; left: 0; width: 150px; -webkit-animation: hr2 30s ease-in-out -98s infinite alternate; animation: hr2 30s ease-in-out -98s infinite alternate; } @-webkit-keyframes hr2 { 0% { border: solid 2px #6633ff; box-shadow: 0 0 5px #333aff, 0 0 5px #333aff inset; -webkit-transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(0deg); transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(0deg); height: 20px; } 100% { border: solid 2px #da33ff; box-shadow: 0 0 5px #f73b9c, 0 0 5px #f73b9c inset; -webkit-transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(-175deg); transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(-175deg); width: 24px; } } @keyframes hr2 { 0% { border: solid 2px #6633ff; box-shadow: 0 0 5px #333aff, 0 0 5px #333aff inset; -webkit-transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(0deg); transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(0deg); height: 20px; } 100% { border: solid 2px #da33ff; box-shadow: 0 0 5px #f73b9c, 0 0 5px #f73b9c inset; -webkit-transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(-175deg); transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(-175deg); width: 24px; } } .wrapper hr:nth-child(3) { position: absolute; left: 0; width: 150px; -webkit-animation: hr3 30s ease-in-out -97s infinite alternate; animation: hr3 30s ease-in-out -97s infinite alternate; } @-webkit-keyframes hr3 { 0% { border: solid 2px #33daff; box-shadow: 0 0 5px #ec46cd, 0 0 5px #ec46cd inset; -webkit-transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(0deg); transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(0deg); height: 20px; } 100% { border: solid 2px #3d33ff; box-shadow: 0 0 5px #7733ff, 0 0 5px #7733ff inset; -webkit-transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(-64deg); transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(-64deg); width: 20px; } } @keyframes hr3 { 0% { border: solid 2px #33daff; box-shadow: 0 0 5px #ec46cd, 0 0 5px #ec46cd inset; -webkit-transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(0deg); transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(0deg); height: 20px; } 100% { border: solid 2px #3d33ff; box-shadow: 0 0 5px #7733ff, 0 0 5px #7733ff inset; -webkit-transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(-64deg); transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(-64deg); width: 20px; } } .wrapper hr:nth-child(4) { position: absolute; left: 0; width: 150px; -webkit-animation: hr4 30s ease-in-out -96s infinite alternate; animation: hr4 30s ease-in-out -96s infinite alternate; } @-webkit-keyframes hr4 { 0% { border: solid 2px #5ff141; box-shadow: 0 0 5px #aa43ef, 0 0 5px #aa43ef inset; -webkit-transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(0deg); transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ab57db; box-shadow: 0 0 5px #7751e1, 0 0 5px #7751e1 inset; -webkit-transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(-37deg); transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(-37deg); width: 11px; } } @keyframes hr4 { 0% { border: solid 2px #5ff141; box-shadow: 0 0 5px #aa43ef, 0 0 5px #aa43ef inset; -webkit-transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(0deg); transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ab57db; box-shadow: 0 0 5px #7751e1, 0 0 5px #7751e1 inset; -webkit-transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(-37deg); transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(-37deg); width: 11px; } } .wrapper hr:nth-child(5) { position: absolute; left: 0; width: 150px; -webkit-animation: hr5 30s ease-in-out -95s infinite alternate; animation: hr5 30s ease-in-out -95s infinite alternate; } @-webkit-keyframes hr5 { 0% { border: solid 2px #e74b87; box-shadow: 0 0 5px #5b95d7, 0 0 5px #5b95d7 inset; -webkit-transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(0deg); transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33e0ff; box-shadow: 0 0 5px #8d52e0, 0 0 5px #8d52e0 inset; -webkit-transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(-198deg); transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(-198deg); width: 49px; } } @keyframes hr5 { 0% { border: solid 2px #e74b87; box-shadow: 0 0 5px #5b95d7, 0 0 5px #5b95d7 inset; -webkit-transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(0deg); transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33e0ff; box-shadow: 0 0 5px #8d52e0, 0 0 5px #8d52e0 inset; -webkit-transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(-198deg); transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(-198deg); width: 49px; } } .wrapper hr:nth-child(6) { position: absolute; left: 0; width: 150px; -webkit-animation: hr6 30s ease-in-out -94s infinite alternate; animation: hr6 30s ease-in-out -94s infinite alternate; } @-webkit-keyframes hr6 { 0% { border: solid 2px #bb33ff; box-shadow: 0 0 5px #e433ff, 0 0 5px #e433ff inset; -webkit-transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(0deg); transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33fff5; box-shadow: 0 0 5px #5fff33, 0 0 5px #5fff33 inset; -webkit-transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(-242deg); transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(-242deg); width: 16px; } } @keyframes hr6 { 0% { border: solid 2px #bb33ff; box-shadow: 0 0 5px #e433ff, 0 0 5px #e433ff inset; -webkit-transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(0deg); transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33fff5; box-shadow: 0 0 5px #5fff33, 0 0 5px #5fff33 inset; -webkit-transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(-242deg); transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(-242deg); width: 16px; } } .wrapper hr:nth-child(7) { position: absolute; left: 0; width: 150px; -webkit-animation: hr7 30s ease-in-out -93s infinite alternate; animation: hr7 30s ease-in-out -93s infinite alternate; } @-webkit-keyframes hr7 { 0% { border: solid 2px #8241f1; box-shadow: 0 0 5px #6dff33, 0 0 5px #6dff33 inset; -webkit-transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(0deg); transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ff63; box-shadow: 0 0 5px #3363ff, 0 0 5px #3363ff inset; -webkit-transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(-265deg); transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(-265deg); width: 31px; } } @keyframes hr7 { 0% { border: solid 2px #8241f1; box-shadow: 0 0 5px #6dff33, 0 0 5px #6dff33 inset; -webkit-transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(0deg); transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ff63; box-shadow: 0 0 5px #3363ff, 0 0 5px #3363ff inset; -webkit-transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(-265deg); transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(-265deg); width: 31px; } } .wrapper hr:nth-child(8) { position: absolute; left: 0; width: 150px; -webkit-animation: hr8 30s ease-in-out -92s infinite alternate; animation: hr8 30s ease-in-out -92s infinite alternate; } @-webkit-keyframes hr8 { 0% { border: solid 2px #33f1ff; box-shadow: 0 0 5px #cf33ff, 0 0 5px #cf33ff inset; -webkit-transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(0deg); transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(0deg); height: 20px; } 100% { border: solid 2px #52e065; box-shadow: 0 0 5px #fe3496, 0 0 5px #fe3496 inset; -webkit-transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(-225deg); transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(-225deg); width: 70px; } } @keyframes hr8 { 0% { border: solid 2px #33f1ff; box-shadow: 0 0 5px #cf33ff, 0 0 5px #cf33ff inset; -webkit-transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(0deg); transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(0deg); height: 20px; } 100% { border: solid 2px #52e065; box-shadow: 0 0 5px #fe3496, 0 0 5px #fe3496 inset; -webkit-transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(-225deg); transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(-225deg); width: 70px; } } .wrapper hr:nth-child(9) { position: absolute; left: 0; width: 150px; -webkit-animation: hr9 30s ease-in-out -91s infinite alternate; animation: hr9 30s ease-in-out -91s infinite alternate; } @-webkit-keyframes hr9 { 0% { border: solid 2px #33ffb4; box-shadow: 0 0 5px #b433ff, 0 0 5px #b433ff inset; -webkit-transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(0deg); transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(0deg); height: 20px; } 100% { border: solid 2px #56dc63; box-shadow: 0 0 5px #3a76f8, 0 0 5px #3a76f8 inset; -webkit-transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(-103deg); transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(-103deg); width: 49px; } } @keyframes hr9 { 0% { border: solid 2px #33ffb4; box-shadow: 0 0 5px #b433ff, 0 0 5px #b433ff inset; -webkit-transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(0deg); transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(0deg); height: 20px; } 100% { border: solid 2px #56dc63; box-shadow: 0 0 5px #3a76f8, 0 0 5px #3a76f8 inset; -webkit-transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(-103deg); transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(-103deg); width: 49px; } } .wrapper hr:nth-child(10) { position: absolute; left: 0; width: 150px; -webkit-animation: hr10 30s ease-in-out -90s infinite alternate; animation: hr10 30s ease-in-out -90s infinite alternate; } @-webkit-keyframes hr10 { 0% { border: solid 2px #ff33b1; box-shadow: 0 0 5px #33a0ff, 0 0 5px #33a0ff inset; -webkit-transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(0deg); transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(0deg); height: 20px; } 100% { border: solid 2px #be33ff; box-shadow: 0 0 5px #963cf6, 0 0 5px #963cf6 inset; -webkit-transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(-96deg); transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(-96deg); width: 64px; } } @keyframes hr10 { 0% { border: solid 2px #ff33b1; box-shadow: 0 0 5px #33a0ff, 0 0 5px #33a0ff inset; -webkit-transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(0deg); transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(0deg); height: 20px; } 100% { border: solid 2px #be33ff; box-shadow: 0 0 5px #963cf6, 0 0 5px #963cf6 inset; -webkit-transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(-96deg); transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(-96deg); width: 64px; } } .wrapper hr:nth-child(11) { position: absolute; left: 0; width: 150px; -webkit-animation: hr11 30s ease-in-out -89s infinite alternate; animation: hr11 30s ease-in-out -89s infinite alternate; } @-webkit-keyframes hr11 { 0% { border: solid 2px #b433ff; box-shadow: 0 0 5px #fc33ff, 0 0 5px #fc33ff inset; -webkit-transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(0deg); transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(0deg); height: 20px; } 100% { border: solid 2px #4fe36c; box-shadow: 0 0 5px #3aff33, 0 0 5px #3aff33 inset; -webkit-transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(-166deg); transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(-166deg); width: 19px; } } @keyframes hr11 { 0% { border: solid 2px #b433ff; box-shadow: 0 0 5px #fc33ff, 0 0 5px #fc33ff inset; -webkit-transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(0deg); transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(0deg); height: 20px; } 100% { border: solid 2px #4fe36c; box-shadow: 0 0 5px #3aff33, 0 0 5px #3aff33 inset; -webkit-transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(-166deg); transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(-166deg); width: 19px; } } .wrapper hr:nth-child(12) { position: absolute; left: 0; width: 150px; -webkit-animation: hr12 30s ease-in-out -88s infinite alternate; animation: hr12 30s ease-in-out -88s infinite alternate; } @-webkit-keyframes hr12 { 0% { border: solid 2px #3dff33; box-shadow: 0 0 5px #3388ff, 0 0 5px #3388ff inset; -webkit-transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(0deg); transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(0deg); height: 20px; } 100% { border: solid 2px #f833ff; box-shadow: 0 0 5px #56dc89, 0 0 5px #56dc89 inset; -webkit-transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(-162deg); transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(-162deg); width: 51px; } } @keyframes hr12 { 0% { border: solid 2px #3dff33; box-shadow: 0 0 5px #3388ff, 0 0 5px #3388ff inset; -webkit-transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(0deg); transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(0deg); height: 20px; } 100% { border: solid 2px #f833ff; box-shadow: 0 0 5px #56dc89, 0 0 5px #56dc89 inset; -webkit-transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(-162deg); transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(-162deg); width: 51px; } } .wrapper hr:nth-child(13) { position: absolute; left: 0; width: 150px; -webkit-animation: hr13 30s ease-in-out -87s infinite alternate; animation: hr13 30s ease-in-out -87s infinite alternate; } @-webkit-keyframes hr13 { 0% { border: solid 2px #33ffbb; box-shadow: 0 0 5px #3ac8f8, 0 0 5px #3ac8f8 inset; -webkit-transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(0deg); transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(0deg); height: 20px; } 100% { border: solid 2px #7237fb; box-shadow: 0 0 5px #3477fe, 0 0 5px #3477fe inset; -webkit-transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(-160deg); transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(-160deg); width: 71px; } } @keyframes hr13 { 0% { border: solid 2px #33ffbb; box-shadow: 0 0 5px #3ac8f8, 0 0 5px #3ac8f8 inset; -webkit-transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(0deg); transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(0deg); height: 20px; } 100% { border: solid 2px #7237fb; box-shadow: 0 0 5px #3477fe, 0 0 5px #3477fe inset; -webkit-transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(-160deg); transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(-160deg); width: 71px; } } .wrapper hr:nth-child(14) { position: absolute; left: 0; width: 150px; -webkit-animation: hr14 30s ease-in-out -86s infinite alternate; animation: hr14 30s ease-in-out -86s infinite alternate; } @-webkit-keyframes hr14 { 0% { border: solid 2px #33ffd6; box-shadow: 0 0 5px #33ffbe, 0 0 5px #33ffbe inset; -webkit-transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(0deg); transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ff33be; box-shadow: 0 0 5px #33ffbb, 0 0 5px #33ffbb inset; -webkit-transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(-58deg); transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(-58deg); width: 34px; } } @keyframes hr14 { 0% { border: solid 2px #33ffd6; box-shadow: 0 0 5px #33ffbe, 0 0 5px #33ffbe inset; -webkit-transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(0deg); transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ff33be; box-shadow: 0 0 5px #33ffbb, 0 0 5px #33ffbb inset; -webkit-transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(-58deg); transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(-58deg); width: 34px; } } .wrapper hr:nth-child(15) { position: absolute; left: 0; width: 150px; -webkit-animation: hr15 30s ease-in-out -85s infinite alternate; animation: hr15 30s ease-in-out -85s infinite alternate; } @-webkit-keyframes hr15 { 0% { border: solid 2px #6933ff; box-shadow: 0 0 5px #5ad8d0, 0 0 5px #5ad8d0 inset; -webkit-transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(0deg); transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(0deg); height: 20px; } 100% { border: solid 2px #37fb8f; box-shadow: 0 0 5px #3358ff, 0 0 5px #3358ff inset; -webkit-transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(-246deg); transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(-246deg); width: 65px; } } @keyframes hr15 { 0% { border: solid 2px #6933ff; box-shadow: 0 0 5px #5ad8d0, 0 0 5px #5ad8d0 inset; -webkit-transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(0deg); transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(0deg); height: 20px; } 100% { border: solid 2px #37fb8f; box-shadow: 0 0 5px #3358ff, 0 0 5px #3358ff inset; -webkit-transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(-246deg); transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(-246deg); width: 65px; } } .wrapper hr:nth-child(16) { position: absolute; left: 0; width: 150px; -webkit-animation: hr16 30s ease-in-out -84s infinite alternate; animation: hr16 30s ease-in-out -84s infinite alternate; } @-webkit-keyframes hr16 { 0% { border: solid 2px #338bff; box-shadow: 0 0 5px #9933ff, 0 0 5px #9933ff inset; -webkit-transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(0deg); transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(0deg); height: 20px; } 100% { border: solid 2px #8f33ff; box-shadow: 0 0 5px #33ff6d, 0 0 5px #33ff6d inset; -webkit-transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(-170deg); transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(-170deg); width: 75px; } } @keyframes hr16 { 0% { border: solid 2px #338bff; box-shadow: 0 0 5px #9933ff, 0 0 5px #9933ff inset; -webkit-transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(0deg); transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(0deg); height: 20px; } 100% { border: solid 2px #8f33ff; box-shadow: 0 0 5px #33ff6d, 0 0 5px #33ff6d inset; -webkit-transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(-170deg); transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(-170deg); width: 75px; } } .wrapper hr:nth-child(17) { position: absolute; left: 0; width: 150px; -webkit-animation: hr17 30s ease-in-out -83s infinite alternate; animation: hr17 30s ease-in-out -83s infinite alternate; } @-webkit-keyframes hr17 { 0% { border: solid 2px #337eff; box-shadow: 0 0 5px #5c33ff, 0 0 5px #5c33ff inset; -webkit-transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(0deg); transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33fffc; box-shadow: 0 0 5px #ff33ff, 0 0 5px #ff33ff inset; -webkit-transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(-14deg); transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(-14deg); width: 55px; } } @keyframes hr17 { 0% { border: solid 2px #337eff; box-shadow: 0 0 5px #5c33ff, 0 0 5px #5c33ff inset; -webkit-transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(0deg); transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33fffc; box-shadow: 0 0 5px #ff33ff, 0 0 5px #ff33ff inset; -webkit-transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(-14deg); transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(-14deg); width: 55px; } } .wrapper hr:nth-child(18) { position: absolute; left: 0; width: 150px; -webkit-animation: hr18 30s ease-in-out -82s infinite alternate; animation: hr18 30s ease-in-out -82s infinite alternate; } @-webkit-keyframes hr18 { 0% { border: solid 2px #5cff33; box-shadow: 0 0 5px #33ff70, 0 0 5px #33ff70 inset; -webkit-transform: rotatey(75deg) translate3d(-131px, -120px, -12px) rotate(0deg); transform: rotatey(75deg) translate3d(-131px, -120px, -12px) rotate(0deg); height: 20px; } 100% { border: solid 2px #3333ff; box-shadow: 0 0 5px #35a0fd, 0 0 5px #35a0fd inset; -webkit-transform: rotatey(75deg) translate3d(-131px, -120px, -12px) rotate(-38deg); transform: rotatey(75deg) translate3d(-131px, -120px, -12px) rotate(-38deg); width: 70px; } } @keyframes hr18 { 0% { border: solid 2px #5cff33; box-shadow: 0 0 5px #33ff70, 0 0 5px #33ff70 inset; -webkit-transform: rotatey(75deg) translate3d(-131px, -120px, -12px) rotate(0deg); transform: rotatey(75deg) translate3d(-131px, -120px, -12px) rotate(0deg); height: 20px; } 100% { border: solid 2px #3333ff; box-shadow: 0 0 5px #35a0fd, 0 0 5px #35a0fd inset; -webkit-transform: rotatey(75deg) translate3d(-131px, -120px, -12px) rotate(-38deg); transform: rotatey(75deg) translate3d(-131px, -120px, -12px) rotate(-38deg); width: 70px; } } .wrapper hr:nth-child(19) { position: absolute; left: 0; width: 150px; -webkit-animation: hr19 30s ease-in-out -81s infinite alternate; animation: hr19 30s ease-in-out -81s infinite alternate; } @-webkit-keyframes hr19 { 0% { border: solid 2px #33a7ff; box-shadow: 0 0 5px #46a4ec, 0 0 5px #46a4ec inset; -webkit-transform: rotatey(55deg) translate3d(-86px, -24px, -45px) rotate(0deg); transform: rotatey(55deg) translate3d(-86px, -24px, -45px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ee4471; box-shadow: 0 0 5px #ff3352, 0 0 5px #ff3352 inset; -webkit-transform: rotatey(55deg) translate3d(-86px, -24px, -45px) rotate(-145deg); transform: rotatey(55deg) translate3d(-86px, -24px, -45px) rotate(-145deg); width: 63px; } } @keyframes hr19 { 0% { border: solid 2px #33a7ff; box-shadow: 0 0 5px #46a4ec, 0 0 5px #46a4ec inset; -webkit-transform: rotatey(55deg) translate3d(-86px, -24px, -45px) rotate(0deg); transform: rotatey(55deg) translate3d(-86px, -24px, -45px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ee4471; box-shadow: 0 0 5px #ff3352, 0 0 5px #ff3352 inset; -webkit-transform: rotatey(55deg) translate3d(-86px, -24px, -45px) rotate(-145deg); transform: rotatey(55deg) translate3d(-86px, -24px, -45px) rotate(-145deg); width: 63px; } } .wrapper hr:nth-child(20) { position: absolute; left: 0; width: 150px; -webkit-animation: hr20 30s ease-in-out -80s infinite alternate; animation: hr20 30s ease-in-out -80s infinite alternate; } @-webkit-keyframes hr20 { 0% { border: solid 2px #33ff9c; box-shadow: 0 0 5px #406df2, 0 0 5px #406df2 inset; -webkit-transform: rotatey(22deg) translate3d(106px, 38px, 70px) rotate(0deg); transform: rotatey(22deg) translate3d(106px, 38px, 70px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ffd3; box-shadow: 0 0 5px #33ff92, 0 0 5px #33ff92 inset; -webkit-transform: rotatey(22deg) translate3d(106px, 38px, 70px) rotate(-48deg); transform: rotatey(22deg) translate3d(106px, 38px, 70px) rotate(-48deg); width: 32px; } } @keyframes hr20 { 0% { border: solid 2px #33ff9c; box-shadow: 0 0 5px #406df2, 0 0 5px #406df2 inset; -webkit-transform: rotatey(22deg) translate3d(106px, 38px, 70px) rotate(0deg); transform: rotatey(22deg) translate3d(106px, 38px, 70px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ffd3; box-shadow: 0 0 5px #33ff92, 0 0 5px #33ff92 inset; -webkit-transform: rotatey(22deg) translate3d(106px, 38px, 70px) rotate(-48deg); transform: rotatey(22deg) translate3d(106px, 38px, 70px) rotate(-48deg); width: 32px; } } .wrapper hr:nth-child(21) { position: absolute; left: 0; width: 150px; -webkit-animation: hr21 30s ease-in-out -79s infinite alternate; animation: hr21 30s ease-in-out -79s infinite alternate; } @-webkit-keyframes hr21 { 0% { border: solid 2px #ad33ff; box-shadow: 0 0 5px #4de696, 0 0 5px #4de696 inset; -webkit-transform: rotatey(81deg) translate3d(93px, -80px, 149px) rotate(0deg); transform: rotatey(81deg) translate3d(93px, -80px, 149px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ff74; box-shadow: 0 0 5px #ff3399, 0 0 5px #ff3399 inset; -webkit-transform: rotatey(81deg) translate3d(93px, -80px, 149px) rotate(-126deg); transform: rotatey(81deg) translate3d(93px, -80px, 149px) rotate(-126deg); width: 7px; } } @keyframes hr21 { 0% { border: solid 2px #ad33ff; box-shadow: 0 0 5px #4de696, 0 0 5px #4de696 inset; -webkit-transform: rotatey(81deg) translate3d(93px, -80px, 149px) rotate(0deg); transform: rotatey(81deg) translate3d(93px, -80px, 149px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ff74; box-shadow: 0 0 5px #ff3399, 0 0 5px #ff3399 inset; -webkit-transform: rotatey(81deg) translate3d(93px, -80px, 149px) rotate(-126deg); transform: rotatey(81deg) translate3d(93px, -80px, 149px) rotate(-126deg); width: 7px; } } .wrapper hr:nth-child(22) { position: absolute; left: 0; width: 150px; -webkit-animation: hr22 30s ease-in-out -78s infinite alternate; animation: hr22 30s ease-in-out -78s infinite alternate; } @-webkit-keyframes hr22 { 0% { border: solid 2px #6af83a; box-shadow: 0 0 5px #33bbff, 0 0 5px #33bbff inset; -webkit-transform: rotatey(4deg) translate3d(137px, 4px, 42px) rotate(0deg); transform: rotatey(4deg) translate3d(137px, 4px, 42px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ffe0; box-shadow: 0 0 5px #3363ff, 0 0 5px #3363ff inset; -webkit-transform: rotatey(4deg) translate3d(137px, 4px, 42px) rotate(-38deg); transform: rotatey(4deg) translate3d(137px, 4px, 42px) rotate(-38deg); width: 18px; } } @keyframes hr22 { 0% { border: solid 2px #6af83a; box-shadow: 0 0 5px #33bbff, 0 0 5px #33bbff inset; -webkit-transform: rotatey(4deg) translate3d(137px, 4px, 42px) rotate(0deg); transform: rotatey(4deg) translate3d(137px, 4px, 42px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ffe0; box-shadow: 0 0 5px #3363ff, 0 0 5px #3363ff inset; -webkit-transform: rotatey(4deg) translate3d(137px, 4px, 42px) rotate(-38deg); transform: rotatey(4deg) translate3d(137px, 4px, 42px) rotate(-38deg); width: 18px; } } .wrapper hr:nth-child(23) { position: absolute; left: 0; width: 150px; -webkit-animation: hr23 30s ease-in-out -77s infinite alternate; animation: hr23 30s ease-in-out -77s infinite alternate; } @-webkit-keyframes hr23 { 0% { border: solid 2px #338fff; box-shadow: 0 0 5px #33ebff, 0 0 5px #33ebff inset; -webkit-transform: rotatey(82deg) translate3d(83px, -149px, -121px) rotate(0deg); transform: rotatey(82deg) translate3d(83px, -149px, -121px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ff33cf; box-shadow: 0 0 5px #5a58da, 0 0 5px #5a58da inset; -webkit-transform: rotatey(82deg) translate3d(83px, -149px, -121px) rotate(-85deg); transform: rotatey(82deg) translate3d(83px, -149px, -121px) rotate(-85deg); width: 61px; } } @keyframes hr23 { 0% { border: solid 2px #338fff; box-shadow: 0 0 5px #33ebff, 0 0 5px #33ebff inset; -webkit-transform: rotatey(82deg) translate3d(83px, -149px, -121px) rotate(0deg); transform: rotatey(82deg) translate3d(83px, -149px, -121px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ff33cf; box-shadow: 0 0 5px #5a58da, 0 0 5px #5a58da inset; -webkit-transform: rotatey(82deg) translate3d(83px, -149px, -121px) rotate(-85deg); transform: rotatey(82deg) translate3d(83px, -149px, -121px) rotate(-85deg); width: 61px; } } .wrapper hr:nth-child(24) { position: absolute; left: 0; width: 150px; -webkit-animation: hr24 30s ease-in-out -76s infinite alternate; animation: hr24 30s ease-in-out -76s infinite alternate; } @-webkit-keyframes hr24 { 0% { border: solid 2px #33ff88; box-shadow: 0 0 5px #3633ff, 0 0 5px #3633ff inset; -webkit-transform: rotatey(34deg) translate3d(88px, -51px, -32px) rotate(0deg); transform: rotatey(34deg) translate3d(88px, -51px, -32px) rotate(0deg); height: 20px; } 100% { border: solid 2px #bb4be7; box-shadow: 0 0 5px #5233ff, 0 0 5px #5233ff inset; -webkit-transform: rotatey(34deg) translate3d(88px, -51px, -32px) rotate(-233deg); transform: rotatey(34deg) translate3d(88px, -51px, -32px) rotate(-233deg); width: 73px; } } @keyframes hr24 { 0% { border: solid 2px #33ff88; box-shadow: 0 0 5px #3633ff, 0 0 5px #3633ff inset; -webkit-transform: rotatey(34deg) translate3d(88px, -51px, -32px) rotate(0deg); transform: rotatey(34deg) translate3d(88px, -51px, -32px) rotate(0deg); height: 20px; } 100% { border: solid 2px #bb4be7; box-shadow: 0 0 5px #5233ff, 0 0 5px #5233ff inset; -webkit-transform: rotatey(34deg) translate3d(88px, -51px, -32px) rotate(-233deg); transform: rotatey(34deg) translate3d(88px, -51px, -32px) rotate(-233deg); width: 73px; } } .wrapper hr:nth-child(25) { position: absolute; left: 0; width: 150px; -webkit-animation: hr25 30s ease-in-out -75s infinite alternate; animation: hr25 30s ease-in-out -75s infinite alternate; } @-webkit-keyframes hr25 { 0% { border: solid 2px #e1516b; box-shadow: 0 0 5px #cf33ff, 0 0 5px #cf33ff inset; -webkit-transform: rotatey(10deg) translate3d(72px, -82px, -94px) rotate(0deg); transform: rotatey(10deg) translate3d(72px, -82px, -94px) rotate(0deg); height: 20px; } 100% { border: solid 2px #35fd64; box-shadow: 0 0 5px #66ff33, 0 0 5px #66ff33 inset; -webkit-transform: rotatey(10deg) translate3d(72px, -82px, -94px) rotate(-205deg); transform: rotatey(10deg) translate3d(72px, -82px, -94px) rotate(-205deg); width: 20px; } } @keyframes hr25 { 0% { border: solid 2px #e1516b; box-shadow: 0 0 5px #cf33ff, 0 0 5px #cf33ff inset; -webkit-transform: rotatey(10deg) translate3d(72px, -82px, -94px) rotate(0deg); transform: rotatey(10deg) translate3d(72px, -82px, -94px) rotate(0deg); height: 20px; } 100% { border: solid 2px #35fd64; box-shadow: 0 0 5px #66ff33, 0 0 5px #66ff33 inset; -webkit-transform: rotatey(10deg) translate3d(72px, -82px, -94px) rotate(-205deg); transform: rotatey(10deg) translate3d(72px, -82px, -94px) rotate(-205deg); width: 20px; } } .wrapper hr:nth-child(26) { position: absolute; left: 0; width: 150px; -webkit-animation: hr26 30s ease-in-out -74s infinite alternate; animation: hr26 30s ease-in-out -74s infinite alternate; } @-webkit-keyframes hr26 { 0% { border: solid 2px #37eefb; box-shadow: 0 0 5px #e74bb3, 0 0 5px #e74bb3 inset; -webkit-transform: rotatey(45deg) translate3d(21px, 133px, -141px) rotate(0deg); transform: rotatey(45deg) translate3d(21px, 133px, -141px) rotate(0deg); height: 20px; } 100% { border: solid 2px #fc33ff; box-shadow: 0 0 5px #665ad8, 0 0 5px #665ad8 inset; -webkit-transform: rotatey(45deg) translate3d(21px, 133px, -141px) rotate(-155deg); transform: rotatey(45deg) translate3d(21px, 133px, -141px) rotate(-155deg); width: 35px; } } @keyframes hr26 { 0% { border: solid 2px #37eefb; box-shadow: 0 0 5px #e74bb3, 0 0 5px #e74bb3 inset; -webkit-transform: rotatey(45deg) translate3d(21px, 133px, -141px) rotate(0deg); transform: rotatey(45deg) translate3d(21px, 133px, -141px) rotate(0deg); height: 20px; } 100% { border: solid 2px #fc33ff; box-shadow: 0 0 5px #665ad8, 0 0 5px #665ad8 inset; -webkit-transform: rotatey(45deg) translate3d(21px, 133px, -141px) rotate(-155deg); transform: rotatey(45deg) translate3d(21px, 133px, -141px) rotate(-155deg); width: 35px; } } .wrapper hr:nth-child(27) { position: absolute; left: 0; width: 150px; -webkit-animation: hr27 30s ease-in-out -73s infinite alternate; animation: hr27 30s ease-in-out -73s infinite alternate; } @-webkit-keyframes hr27 { 0% { border: solid 2px #4133ff; box-shadow: 0 0 5px #33ff77, 0 0 5px #33ff77 inset; -webkit-transform: rotatey(61deg) translate3d(-109px, -36px, -115px) rotate(0deg); transform: rotatey(61deg) translate3d(-109px, -36px, -115px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ff33ff; box-shadow: 0 0 5px #54c5de, 0 0 5px #54c5de inset; -webkit-transform: rotatey(61deg) translate3d(-109px, -36px, -115px) rotate(-143deg); transform: rotatey(61deg) translate3d(-109px, -36px, -115px) rotate(-143deg); width: 41px; } } @keyframes hr27 { 0% { border: solid 2px #4133ff; box-shadow: 0 0 5px #33ff77, 0 0 5px #33ff77 inset; -webkit-transform: rotatey(61deg) translate3d(-109px, -36px, -115px) rotate(0deg); transform: rotatey(61deg) translate3d(-109px, -36px, -115px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ff33ff; box-shadow: 0 0 5px #54c5de, 0 0 5px #54c5de inset; -webkit-transform: rotatey(61deg) translate3d(-109px, -36px, -115px) rotate(-143deg); transform: rotatey(61deg) translate3d(-109px, -36px, -115px) rotate(-143deg); width: 41px; } } .wrapper hr:nth-child(28) { position: absolute; left: 0; width: 150px; -webkit-animation: hr28 30s ease-in-out -72s infinite alternate; animation: hr28 30s ease-in-out -72s infinite alternate; } @-webkit-keyframes hr28 { 0% { border: solid 2px #4de6cf; box-shadow: 0 0 5px #5656dc, 0 0 5px #5656dc inset; -webkit-transform: rotatey(22deg) translate3d(145px, -142px, 58px) rotate(0deg); transform: rotatey(22deg) translate3d(145px, -142px, 58px) rotate(0deg); height: 20px; } 100% { border: solid 2px #7a33ff; box-shadow: 0 0 5px #36fcad, 0 0 5px #36fcad inset; -webkit-transform: rotatey(22deg) translate3d(145px, -142px, 58px) rotate(-193deg); transform: rotatey(22deg) translate3d(145px, -142px, 58px) rotate(-193deg); width: 41px; } } @keyframes hr28 { 0% { border: solid 2px #4de6cf; box-shadow: 0 0 5px #5656dc, 0 0 5px #5656dc inset; -webkit-transform: rotatey(22deg) translate3d(145px, -142px, 58px) rotate(0deg); transform: rotatey(22deg) translate3d(145px, -142px, 58px) rotate(0deg); height: 20px; } 100% { border: solid 2px #7a33ff; box-shadow: 0 0 5px #36fcad, 0 0 5px #36fcad inset; -webkit-transform: rotatey(22deg) translate3d(145px, -142px, 58px) rotate(-193deg); transform: rotatey(22deg) translate3d(145px, -142px, 58px) rotate(-193deg); width: 41px; } } .wrapper hr:nth-child(29) { position: absolute; left: 0; width: 150px; -webkit-animation: hr29 30s ease-in-out -71s infinite alternate; animation: hr29 30s ease-in-out -71s infinite alternate; } @-webkit-keyframes hr29 { 0% { border: solid 2px #ff33b4; box-shadow: 0 0 5px #33ffee, 0 0 5px #33ffee inset; -webkit-transform: rotatey(26deg) translate3d(-48px, -89px, -109px) rotate(0deg); transform: rotatey(26deg) translate3d(-48px, -89px, -109px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ffa7; box-shadow: 0 0 5px #3336ff, 0 0 5px #3336ff inset; -webkit-transform: rotatey(26deg) translate3d(-48px, -89px, -109px) rotate(-186deg); transform: rotatey(26deg) translate3d(-48px, -89px, -109px) rotate(-186deg); width: 71px; } } @keyframes hr29 { 0% { border: solid 2px #ff33b4; box-shadow: 0 0 5px #33ffee, 0 0 5px #33ffee inset; -webkit-transform: rotatey(26deg) translate3d(-48px, -89px, -109px) rotate(0deg); transform: rotatey(26deg) translate3d(-48px, -89px, -109px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ffa7; box-shadow: 0 0 5px #3336ff, 0 0 5px #3336ff inset; -webkit-transform: rotatey(26deg) translate3d(-48px, -89px, -109px) rotate(-186deg); transform: rotatey(26deg) translate3d(-48px, -89px, -109px) rotate(-186deg); width: 71px; } } .wrapper hr:nth-child(30) { position: absolute; left: 0; width: 150px; -webkit-animation: hr30 30s ease-in-out -70s infinite alternate; animation: hr30 30s ease-in-out -70s infinite alternate; } @-webkit-keyframes hr30 { 0% { border: solid 2px #3bb2f7; box-shadow: 0 0 5px #5a46ec, 0 0 5px #5a46ec inset; -webkit-transform: rotatey(26deg) translate3d(-59px, 9px, 69px) rotate(0deg); transform: rotatey(26deg) translate3d(-59px, 9px, 69px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ffc2; box-shadow: 0 0 5px #79ea48, 0 0 5px #79ea48 inset; -webkit-transform: rotatey(26deg) translate3d(-59px, 9px, 69px) rotate(-179deg); transform: rotatey(26deg) translate3d(-59px, 9px, 69px) rotate(-179deg); width: 51px; } } @keyframes hr30 { 0% { border: solid 2px #3bb2f7; box-shadow: 0 0 5px #5a46ec, 0 0 5px #5a46ec inset; -webkit-transform: rotatey(26deg) translate3d(-59px, 9px, 69px) rotate(0deg); transform: rotatey(26deg) translate3d(-59px, 9px, 69px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ffc2; box-shadow: 0 0 5px #79ea48, 0 0 5px #79ea48 inset; -webkit-transform: rotatey(26deg) translate3d(-59px, 9px, 69px) rotate(-179deg); transform: rotatey(26deg) translate3d(-59px, 9px, 69px) rotate(-179deg); width: 51px; } } .wrapper hr:nth-child(31) { position: absolute; left: 0; width: 150px; -webkit-animation: hr31 30s ease-in-out -69s infinite alternate; animation: hr31 30s ease-in-out -69s infinite alternate; } @-webkit-keyframes hr31 { 0% { border: solid 2px #33f5ff; box-shadow: 0 0 5px #333aff, 0 0 5px #333aff inset; -webkit-transform: rotatey(7deg) translate3d(-78px, -101px, 120px) rotate(0deg); transform: rotatey(7deg) translate3d(-78px, -101px, 120px) rotate(0deg); height: 20px; } 100% { border: solid 2px #35fd96; box-shadow: 0 0 5px #f141c8, 0 0 5px #f141c8 inset; -webkit-transform: rotatey(7deg) translate3d(-78px, -101px, 120px) rotate(-84deg); transform: rotatey(7deg) translate3d(-78px, -101px, 120px) rotate(-84deg); width: 44px; } } @keyframes hr31 { 0% { border: solid 2px #33f5ff; box-shadow: 0 0 5px #333aff, 0 0 5px #333aff inset; -webkit-transform: rotatey(7deg) translate3d(-78px, -101px, 120px) rotate(0deg); transform: rotatey(7deg) translate3d(-78px, -101px, 120px) rotate(0deg); height: 20px; } 100% { border: solid 2px #35fd96; box-shadow: 0 0 5px #f141c8, 0 0 5px #f141c8 inset; -webkit-transform: rotatey(7deg) translate3d(-78px, -101px, 120px) rotate(-84deg); transform: rotatey(7deg) translate3d(-78px, -101px, 120px) rotate(-84deg); width: 44px; } } .wrapper hr:nth-child(32) { position: absolute; left: 0; width: 150px; -webkit-animation: hr32 30s ease-in-out -68s infinite alternate; animation: hr32 30s ease-in-out -68s infinite alternate; } @-webkit-keyframes hr32 { 0% { border: solid 2px #b433ff; box-shadow: 0 0 5px #6633ff, 0 0 5px #6633ff inset; -webkit-transform: rotatey(65deg) translate3d(102px, 150px, 33px) rotate(0deg); transform: rotatey(65deg) translate3d(102px, 150px, 33px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ff52; box-shadow: 0 0 5px #7033ff, 0 0 5px #7033ff inset; -webkit-transform: rotatey(65deg) translate3d(102px, 150px, 33px) rotate(-192deg); transform: rotatey(65deg) translate3d(102px, 150px, 33px) rotate(-192deg); width: 43px; } } @keyframes hr32 { 0% { border: solid 2px #b433ff; box-shadow: 0 0 5px #6633ff, 0 0 5px #6633ff inset; -webkit-transform: rotatey(65deg) translate3d(102px, 150px, 33px) rotate(0deg); transform: rotatey(65deg) translate3d(102px, 150px, 33px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ff52; box-shadow: 0 0 5px #7033ff, 0 0 5px #7033ff inset; -webkit-transform: rotatey(65deg) translate3d(102px, 150px, 33px) rotate(-192deg); transform: rotatey(65deg) translate3d(102px, 150px, 33px) rotate(-192deg); width: 43px; } } .wrapper hr:nth-child(33) { position: absolute; left: 0; width: 150px; -webkit-animation: hr33 30s ease-in-out -67s infinite alternate; animation: hr33 30s ease-in-out -67s infinite alternate; } @-webkit-keyframes hr33 { 0% { border: solid 2px #ff33fc; box-shadow: 0 0 5px #ff3385, 0 0 5px #ff3385 inset; -webkit-transform: rotatey(81deg) translate3d(146px, -106px, 74px) rotate(0deg); transform: rotatey(81deg) translate3d(146px, -106px, 74px) rotate(0deg); height: 20px; } 100% { border: solid 2px #3341ff; box-shadow: 0 0 5px #bb33ff, 0 0 5px #bb33ff inset; -webkit-transform: rotatey(81deg) translate3d(146px, -106px, 74px) rotate(-213deg); transform: rotatey(81deg) translate3d(146px, -106px, 74px) rotate(-213deg); width: 33px; } } @keyframes hr33 { 0% { border: solid 2px #ff33fc; box-shadow: 0 0 5px #ff3385, 0 0 5px #ff3385 inset; -webkit-transform: rotatey(81deg) translate3d(146px, -106px, 74px) rotate(0deg); transform: rotatey(81deg) translate3d(146px, -106px, 74px) rotate(0deg); height: 20px; } 100% { border: solid 2px #3341ff; box-shadow: 0 0 5px #bb33ff, 0 0 5px #bb33ff inset; -webkit-transform: rotatey(81deg) translate3d(146px, -106px, 74px) rotate(-213deg); transform: rotatey(81deg) translate3d(146px, -106px, 74px) rotate(-213deg); width: 33px; } } .wrapper hr:nth-child(34) { position: absolute; left: 0; width: 150px; -webkit-animation: hr34 30s ease-in-out -66s infinite alternate; animation: hr34 30s ease-in-out -66s infinite alternate; } @-webkit-keyframes hr34 { 0% { border: solid 2px #44eea7; box-shadow: 0 0 5px #3cf667, 0 0 5px #3cf667 inset; -webkit-transform: rotatey(54deg) translate3d(-3px, -140px, 135px) rotate(0deg); transform: rotatey(54deg) translate3d(-3px, -140px, 135px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ff33a7; box-shadow: 0 0 5px #4d36fc, 0 0 5px #4d36fc inset; -webkit-transform: rotatey(54deg) translate3d(-3px, -140px, 135px) rotate(-237deg); transform: rotatey(54deg) translate3d(-3px, -140px, 135px) rotate(-237deg); width: 3px; } } @keyframes hr34 { 0% { border: solid 2px #44eea7; box-shadow: 0 0 5px #3cf667, 0 0 5px #3cf667 inset; -webkit-transform: rotatey(54deg) translate3d(-3px, -140px, 135px) rotate(0deg); transform: rotatey(54deg) translate3d(-3px, -140px, 135px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ff33a7; box-shadow: 0 0 5px #4d36fc, 0 0 5px #4d36fc inset; -webkit-transform: rotatey(54deg) translate3d(-3px, -140px, 135px) rotate(-237deg); transform: rotatey(54deg) translate3d(-3px, -140px, 135px) rotate(-237deg); width: 3px; } } .wrapper hr:nth-child(35) { position: absolute; left: 0; width: 150px; -webkit-animation: hr35 30s ease-in-out -65s infinite alternate; animation: hr35 30s ease-in-out -65s infinite alternate; } @-webkit-keyframes hr35 { 0% { border: solid 2px #63ff33; box-shadow: 0 0 5px #dd55cb, 0 0 5px #dd55cb inset; -webkit-transform: rotatey(71deg) translate3d(39px, -106px, -25px) rotate(0deg); transform: rotatey(71deg) translate3d(39px, -106px, -25px) rotate(0deg); height: 20px; } 100% { border: solid 2px #3dff33; box-shadow: 0 0 5px #33ffd3, 0 0 5px #33ffd3 inset; -webkit-transform: rotatey(71deg) translate3d(39px, -106px, -25px) rotate(-5deg); transform: rotatey(71deg) translate3d(39px, -106px, -25px) rotate(-5deg); width: 24px; } } @keyframes hr35 { 0% { border: solid 2px #63ff33; box-shadow: 0 0 5px #dd55cb, 0 0 5px #dd55cb inset; -webkit-transform: rotatey(71deg) translate3d(39px, -106px, -25px) rotate(0deg); transform: rotatey(71deg) translate3d(39px, -106px, -25px) rotate(0deg); height: 20px; } 100% { border: solid 2px #3dff33; box-shadow: 0 0 5px #33ffd3, 0 0 5px #33ffd3 inset; -webkit-transform: rotatey(71deg) translate3d(39px, -106px, -25px) rotate(-5deg); transform: rotatey(71deg) translate3d(39px, -106px, -25px) rotate(-5deg); width: 24px; } } .wrapper hr:nth-child(36) { position: absolute; left: 0; width: 150px; -webkit-animation: hr36 30s ease-in-out -64s infinite alternate; animation: hr36 30s ease-in-out -64s infinite alternate; } @-webkit-keyframes hr36 { 0% { border: solid 2px #5cf042; box-shadow: 0 0 5px #b833ff, 0 0 5px #b833ff inset; -webkit-transform: rotatey(9deg) translate3d(-53px, -59px, 85px) rotate(0deg); transform: rotatey(9deg) translate3d(-53px, -59px, 85px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ff3366; box-shadow: 0 0 5px #ff33c5, 0 0 5px #ff33c5 inset; -webkit-transform: rotatey(9deg) translate3d(-53px, -59px, 85px) rotate(-65deg); transform: rotatey(9deg) translate3d(-53px, -59px, 85px) rotate(-65deg); width: 71px; } } @keyframes hr36 { 0% { border: solid 2px #5cf042; box-shadow: 0 0 5px #b833ff, 0 0 5px #b833ff inset; -webkit-transform: rotatey(9deg) translate3d(-53px, -59px, 85px) rotate(0deg); transform: rotatey(9deg) translate3d(-53px, -59px, 85px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ff3366; box-shadow: 0 0 5px #ff33c5, 0 0 5px #ff33c5 inset; -webkit-transform: rotatey(9deg) translate3d(-53px, -59px, 85px) rotate(-65deg); transform: rotatey(9deg) translate3d(-53px, -59px, 85px) rotate(-65deg); width: 71px; } } .wrapper hr:nth-child(37) { position: absolute; left: 0; width: 150px; -webkit-animation: hr37 30s ease-in-out -63s infinite alternate; animation: hr37 30s ease-in-out -63s infinite alternate; } @-webkit-keyframes hr37 { 0% { border: solid 2px #f133ff; box-shadow: 0 0 5px #5243ef, 0 0 5px #5243ef inset; -webkit-transform: rotatey(57deg) translate3d(-66px, 105px, 95px) rotate(0deg); transform: rotatey(57deg) translate3d(-66px, 105px, 95px) rotate(0deg); height: 20px; } 100% { border: solid 2px #3355ff; box-shadow: 0 0 5px #5a43ef, 0 0 5px #5a43ef inset; -webkit-transform: rotatey(57deg) translate3d(-66px, 105px, 95px) rotate(-140deg); transform: rotatey(57deg) translate3d(-66px, 105px, 95px) rotate(-140deg); width: 45px; } } @keyframes hr37 { 0% { border: solid 2px #f133ff; box-shadow: 0 0 5px #5243ef, 0 0 5px #5243ef inset; -webkit-transform: rotatey(57deg) translate3d(-66px, 105px, 95px) rotate(0deg); transform: rotatey(57deg) translate3d(-66px, 105px, 95px) rotate(0deg); height: 20px; } 100% { border: solid 2px #3355ff; box-shadow: 0 0 5px #5a43ef, 0 0 5px #5a43ef inset; -webkit-transform: rotatey(57deg) translate3d(-66px, 105px, 95px) rotate(-140deg); transform: rotatey(57deg) translate3d(-66px, 105px, 95px) rotate(-140deg); width: 45px; } } .wrapper hr:nth-child(38) { position: absolute; left: 0; width: 150px; -webkit-animation: hr38 30s ease-in-out -62s infinite alternate; animation: hr38 30s ease-in-out -62s infinite alternate; } @-webkit-keyframes hr38 { 0% { border: solid 2px #d85ad2; box-shadow: 0 0 5px #ff33aa, 0 0 5px #ff33aa inset; -webkit-transform: rotatey(23deg) translate3d(-146px, -13px, -38px) rotate(0deg); transform: rotatey(23deg) translate3d(-146px, -13px, -38px) rotate(0deg); height: 20px; } 100% { border: solid 2px #3bf4f7; box-shadow: 0 0 5px #fa38d6, 0 0 5px #fa38d6 inset; -webkit-transform: rotatey(23deg) translate3d(-146px, -13px, -38px) rotate(-41deg); transform: rotatey(23deg) translate3d(-146px, -13px, -38px) rotate(-41deg); width: 28px; } } @keyframes hr38 { 0% { border: solid 2px #d85ad2; box-shadow: 0 0 5px #ff33aa, 0 0 5px #ff33aa inset; -webkit-transform: rotatey(23deg) translate3d(-146px, -13px, -38px) rotate(0deg); transform: rotatey(23deg) translate3d(-146px, -13px, -38px) rotate(0deg); height: 20px; } 100% { border: solid 2px #3bf4f7; box-shadow: 0 0 5px #fa38d6, 0 0 5px #fa38d6 inset; -webkit-transform: rotatey(23deg) translate3d(-146px, -13px, -38px) rotate(-41deg); transform: rotatey(23deg) translate3d(-146px, -13px, -38px) rotate(-41deg); width: 28px; } } .wrapper hr:nth-child(39) { position: absolute; left: 0; width: 150px; -webkit-animation: hr39 30s ease-in-out -61s infinite alternate; animation: hr39 30s ease-in-out -61s infinite alternate; } @-webkit-keyframes hr39 { 0% { border: solid 2px #ff33cf; box-shadow: 0 0 5px #33ffad, 0 0 5px #33ffad inset; -webkit-transform: rotatey(54deg) translate3d(95px, 45px, -51px) rotate(0deg); transform: rotatey(54deg) translate3d(95px, 45px, -51px) rotate(0deg); height: 20px; } 100% { border: solid 2px #cf33ff; box-shadow: 0 0 5px #33ff66, 0 0 5px #33ff66 inset; -webkit-transform: rotatey(54deg) translate3d(95px, 45px, -51px) rotate(-216deg); transform: rotatey(54deg) translate3d(95px, 45px, -51px) rotate(-216deg); width: 50px; } } @keyframes hr39 { 0% { border: solid 2px #ff33cf; box-shadow: 0 0 5px #33ffad, 0 0 5px #33ffad inset; -webkit-transform: rotatey(54deg) translate3d(95px, 45px, -51px) rotate(0deg); transform: rotatey(54deg) translate3d(95px, 45px, -51px) rotate(0deg); height: 20px; } 100% { border: solid 2px #cf33ff; box-shadow: 0 0 5px #33ff66, 0 0 5px #33ff66 inset; -webkit-transform: rotatey(54deg) translate3d(95px, 45px, -51px) rotate(-216deg); transform: rotatey(54deg) translate3d(95px, 45px, -51px) rotate(-216deg); width: 50px; } } .wrapper hr:nth-child(40) { position: absolute; left: 0; width: 150px; -webkit-animation: hr40 30s ease-in-out -60s infinite alternate; animation: hr40 30s ease-in-out -60s infinite alternate; } @-webkit-keyframes hr40 { 0% { border: solid 2px #335cff; box-shadow: 0 0 5px #e64db5, 0 0 5px #e64db5 inset; -webkit-transform: rotatey(41deg) translate3d(-124px, -36px, 51px) rotate(0deg); transform: rotatey(41deg) translate3d(-124px, -36px, 51px) rotate(0deg); height: 20px; } 100% { border: solid 2px #db3bf7; box-shadow: 0 0 5px #3369ff, 0 0 5px #3369ff inset; -webkit-transform: rotatey(41deg) translate3d(-124px, -36px, 51px) rotate(-15deg); transform: rotatey(41deg) translate3d(-124px, -36px, 51px) rotate(-15deg); width: 17px; } } @keyframes hr40 { 0% { border: solid 2px #335cff; box-shadow: 0 0 5px #e64db5, 0 0 5px #e64db5 inset; -webkit-transform: rotatey(41deg) translate3d(-124px, -36px, 51px) rotate(0deg); transform: rotatey(41deg) translate3d(-124px, -36px, 51px) rotate(0deg); height: 20px; } 100% { border: solid 2px #db3bf7; box-shadow: 0 0 5px #3369ff, 0 0 5px #3369ff inset; -webkit-transform: rotatey(41deg) translate3d(-124px, -36px, 51px) rotate(-15deg); transform: rotatey(41deg) translate3d(-124px, -36px, 51px) rotate(-15deg); width: 17px; } } .wrapper hr:nth-child(41) { position: absolute; left: 0; width: 150px; -webkit-animation: hr41 30s ease-in-out -59s infinite alternate; animation: hr41 30s ease-in-out -59s infinite alternate; } @-webkit-keyframes hr41 { 0% { border: solid 2px #f533ff; box-shadow: 0 0 5px #4f3cf6, 0 0 5px #4f3cf6 inset; -webkit-transform: rotatey(58deg) translate3d(-145px, 119px, -94px) rotate(0deg); transform: rotatey(58deg) translate3d(-145px, 119px, -94px) rotate(0deg); height: 20px; } 100% { border: solid 2px #4a7ae8; box-shadow: 0 0 5px #33e7ff, 0 0 5px #33e7ff inset; -webkit-transform: rotatey(58deg) translate3d(-145px, 119px, -94px) rotate(-15deg); transform: rotatey(58deg) translate3d(-145px, 119px, -94px) rotate(-15deg); width: 55px; } } @keyframes hr41 { 0% { border: solid 2px #f533ff; box-shadow: 0 0 5px #4f3cf6, 0 0 5px #4f3cf6 inset; -webkit-transform: rotatey(58deg) translate3d(-145px, 119px, -94px) rotate(0deg); transform: rotatey(58deg) translate3d(-145px, 119px, -94px) rotate(0deg); height: 20px; } 100% { border: solid 2px #4a7ae8; box-shadow: 0 0 5px #33e7ff, 0 0 5px #33e7ff inset; -webkit-transform: rotatey(58deg) translate3d(-145px, 119px, -94px) rotate(-15deg); transform: rotatey(58deg) translate3d(-145px, 119px, -94px) rotate(-15deg); width: 55px; } } .wrapper hr:nth-child(42) { position: absolute; left: 0; width: 150px; -webkit-animation: hr42 30s ease-in-out -58s infinite alternate; animation: hr42 30s ease-in-out -58s infinite alternate; } @-webkit-keyframes hr42 { 0% { border: solid 2px #33ff52; box-shadow: 0 0 5px #74ff33, 0 0 5px #74ff33 inset; -webkit-transform: rotatey(78deg) translate3d(83px, -13px, -123px) rotate(0deg); transform: rotatey(78deg) translate3d(83px, -13px, -123px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ff3358; box-shadow: 0 0 5px #33c2ff, 0 0 5px #33c2ff inset; -webkit-transform: rotatey(78deg) translate3d(83px, -13px, -123px) rotate(-194deg); transform: rotatey(78deg) translate3d(83px, -13px, -123px) rotate(-194deg); width: 67px; } } @keyframes hr42 { 0% { border: solid 2px #33ff52; box-shadow: 0 0 5px #74ff33, 0 0 5px #74ff33 inset; -webkit-transform: rotatey(78deg) translate3d(83px, -13px, -123px) rotate(0deg); transform: rotatey(78deg) translate3d(83px, -13px, -123px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ff3358; box-shadow: 0 0 5px #33c2ff, 0 0 5px #33c2ff inset; -webkit-transform: rotatey(78deg) translate3d(83px, -13px, -123px) rotate(-194deg); transform: rotatey(78deg) translate3d(83px, -13px, -123px) rotate(-194deg); width: 67px; } } .wrapper hr:nth-child(43) { position: absolute; left: 0; width: 150px; -webkit-animation: hr43 30s ease-in-out -57s infinite alternate; animation: hr43 30s ease-in-out -57s infinite alternate; } @-webkit-keyframes hr43 { 0% { border: solid 2px #c933ff; box-shadow: 0 0 5px #33ff55, 0 0 5px #33ff55 inset; -webkit-transform: rotatey(15deg) translate3d(116px, -131px, -18px) rotate(0deg); transform: rotatey(15deg) translate3d(116px, -131px, -18px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ff334b; box-shadow: 0 0 5px #3aff33, 0 0 5px #3aff33 inset; -webkit-transform: rotatey(15deg) translate3d(116px, -131px, -18px) rotate(-151deg); transform: rotatey(15deg) translate3d(116px, -131px, -18px) rotate(-151deg); width: 66px; } } @keyframes hr43 { 0% { border: solid 2px #c933ff; box-shadow: 0 0 5px #33ff55, 0 0 5px #33ff55 inset; -webkit-transform: rotatey(15deg) translate3d(116px, -131px, -18px) rotate(0deg); transform: rotatey(15deg) translate3d(116px, -131px, -18px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ff334b; box-shadow: 0 0 5px #3aff33, 0 0 5px #3aff33 inset; -webkit-transform: rotatey(15deg) translate3d(116px, -131px, -18px) rotate(-151deg); transform: rotatey(15deg) translate3d(116px, -131px, -18px) rotate(-151deg); width: 66px; } } .wrapper hr:nth-child(44) { position: absolute; left: 0; width: 150px; -webkit-animation: hr44 30s ease-in-out -56s infinite alternate; animation: hr44 30s ease-in-out -56s infinite alternate; } @-webkit-keyframes hr44 { 0% { border: solid 2px #4433ff; box-shadow: 0 0 5px #7cdc56, 0 0 5px #7cdc56 inset; -webkit-transform: rotatey(34deg) translate3d(-78px, -120px, -118px) rotate(0deg); transform: rotatey(34deg) translate3d(-78px, -120px, -118px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ffcf; box-shadow: 0 0 5px #335cff, 0 0 5px #335cff inset; -webkit-transform: rotatey(34deg) translate3d(-78px, -120px, -118px) rotate(-268deg); transform: rotatey(34deg) translate3d(-78px, -120px, -118px) rotate(-268deg); width: 27px; } } @keyframes hr44 { 0% { border: solid 2px #4433ff; box-shadow: 0 0 5px #7cdc56, 0 0 5px #7cdc56 inset; -webkit-transform: rotatey(34deg) translate3d(-78px, -120px, -118px) rotate(0deg); transform: rotatey(34deg) translate3d(-78px, -120px, -118px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ffcf; box-shadow: 0 0 5px #335cff, 0 0 5px #335cff inset; -webkit-transform: rotatey(34deg) translate3d(-78px, -120px, -118px) rotate(-268deg); transform: rotatey(34deg) translate3d(-78px, -120px, -118px) rotate(-268deg); width: 27px; } } .wrapper hr:nth-child(45) { position: absolute; left: 0; width: 150px; -webkit-animation: hr45 30s ease-in-out -55s infinite alternate; animation: hr45 30s ease-in-out -55s infinite alternate; } @-webkit-keyframes hr45 { 0% { border: solid 2px #ff33f5; box-shadow: 0 0 5px #42f63c, 0 0 5px #42f63c inset; -webkit-transform: rotatey(48deg) translate3d(-42px, -28px, 37px) rotate(0deg); transform: rotatey(48deg) translate3d(-42px, -28px, 37px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ff7e; box-shadow: 0 0 5px #34fe4c, 0 0 5px #34fe4c inset; -webkit-transform: rotatey(48deg) translate3d(-42px, -28px, 37px) rotate(-155deg); transform: rotatey(48deg) translate3d(-42px, -28px, 37px) rotate(-155deg); width: 74px; } } @keyframes hr45 { 0% { border: solid 2px #ff33f5; box-shadow: 0 0 5px #42f63c, 0 0 5px #42f63c inset; -webkit-transform: rotatey(48deg) translate3d(-42px, -28px, 37px) rotate(0deg); transform: rotatey(48deg) translate3d(-42px, -28px, 37px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ff7e; box-shadow: 0 0 5px #34fe4c, 0 0 5px #34fe4c inset; -webkit-transform: rotatey(48deg) translate3d(-42px, -28px, 37px) rotate(-155deg); transform: rotatey(48deg) translate3d(-42px, -28px, 37px) rotate(-155deg); width: 74px; } } .wrapper hr:nth-child(46) { position: absolute; left: 0; width: 150px; -webkit-animation: hr46 30s ease-in-out -54s infinite alternate; animation: hr46 30s ease-in-out -54s infinite alternate; } @-webkit-keyframes hr46 { 0% { border: solid 2px #6dff33; box-shadow: 0 0 5px #3355ff, 0 0 5px #3355ff inset; -webkit-transform: rotatey(76deg) translate3d(-76px, 23px, -133px) rotate(0deg); transform: rotatey(76deg) translate3d(-76px, 23px, -133px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ffda; box-shadow: 0 0 5px #33b8ff, 0 0 5px #33b8ff inset; -webkit-transform: rotatey(76deg) translate3d(-76px, 23px, -133px) rotate(-195deg); transform: rotatey(76deg) translate3d(-76px, 23px, -133px) rotate(-195deg); width: 30px; } } @keyframes hr46 { 0% { border: solid 2px #6dff33; box-shadow: 0 0 5px #3355ff, 0 0 5px #3355ff inset; -webkit-transform: rotatey(76deg) translate3d(-76px, 23px, -133px) rotate(0deg); transform: rotatey(76deg) translate3d(-76px, 23px, -133px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ffda; box-shadow: 0 0 5px #33b8ff, 0 0 5px #33b8ff inset; -webkit-transform: rotatey(76deg) translate3d(-76px, 23px, -133px) rotate(-195deg); transform: rotatey(76deg) translate3d(-76px, 23px, -133px) rotate(-195deg); width: 30px; } } .wrapper hr:nth-child(47) { position: absolute; left: 0; width: 150px; -webkit-animation: hr47 30s ease-in-out -53s infinite alternate; animation: hr47 30s ease-in-out -53s infinite alternate; } @-webkit-keyframes hr47 { 0% { border: solid 2px #e44eba; box-shadow: 0 0 5px #33ff81, 0 0 5px #33ff81 inset; -webkit-transform: rotatey(7deg) translate3d(136px, -126px, -136px) rotate(0deg); transform: rotatey(7deg) translate3d(136px, -126px, -136px) rotate(0deg); height: 20px; } 100% { border: solid 2px #e74b72; box-shadow: 0 0 5px #338fff, 0 0 5px #338fff inset; -webkit-transform: rotatey(7deg) translate3d(136px, -126px, -136px) rotate(-258deg); transform: rotatey(7deg) translate3d(136px, -126px, -136px) rotate(-258deg); width: 44px; } } @keyframes hr47 { 0% { border: solid 2px #e44eba; box-shadow: 0 0 5px #33ff81, 0 0 5px #33ff81 inset; -webkit-transform: rotatey(7deg) translate3d(136px, -126px, -136px) rotate(0deg); transform: rotatey(7deg) translate3d(136px, -126px, -136px) rotate(0deg); height: 20px; } 100% { border: solid 2px #e74b72; box-shadow: 0 0 5px #338fff, 0 0 5px #338fff inset; -webkit-transform: rotatey(7deg) translate3d(136px, -126px, -136px) rotate(-258deg); transform: rotatey(7deg) translate3d(136px, -126px, -136px) rotate(-258deg); width: 44px; } } .wrapper hr:nth-child(48) { position: absolute; left: 0; width: 150px; -webkit-animation: hr48 30s ease-in-out -52s infinite alternate; animation: hr48 30s ease-in-out -52s infinite alternate; } @-webkit-keyframes hr48 { 0% { border: solid 2px #33ff6d; box-shadow: 0 0 5px #4ee4a8, 0 0 5px #4ee4a8 inset; -webkit-transform: rotatey(79deg) translate3d(-14px, 148px, 135px) rotate(0deg); transform: rotatey(79deg) translate3d(-14px, 148px, 135px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ffe0; box-shadow: 0 0 5px #343efe, 0 0 5px #343efe inset; -webkit-transform: rotatey(79deg) translate3d(-14px, 148px, 135px) rotate(-58deg); transform: rotatey(79deg) translate3d(-14px, 148px, 135px) rotate(-58deg); width: 41px; } } @keyframes hr48 { 0% { border: solid 2px #33ff6d; box-shadow: 0 0 5px #4ee4a8, 0 0 5px #4ee4a8 inset; -webkit-transform: rotatey(79deg) translate3d(-14px, 148px, 135px) rotate(0deg); transform: rotatey(79deg) translate3d(-14px, 148px, 135px) rotate(0deg); height: 20px; } 100% { border: solid 2px #33ffe0; box-shadow: 0 0 5px #343efe, 0 0 5px #343efe inset; -webkit-transform: rotatey(79deg) translate3d(-14px, 148px, 135px) rotate(-58deg); transform: rotatey(79deg) translate3d(-14px, 148px, 135px) rotate(-58deg); width: 41px; } } .wrapper hr:nth-child(49) { position: absolute; left: 0; width: 150px; -webkit-animation: hr49 30s ease-in-out -51s infinite alternate; animation: hr49 30s ease-in-out -51s infinite alternate; } @-webkit-keyframes hr49 { 0% { border: solid 2px #33ffad; box-shadow: 0 0 5px #57db8a, 0 0 5px #57db8a inset; -webkit-transform: rotatey(55deg) translate3d(55px, 23px, 85px) rotate(0deg); transform: rotatey(55deg) translate3d(55px, 23px, 85px) rotate(0deg); height: 20px; } 100% { border: solid 2px #d333ff; box-shadow: 0 0 5px #46eccb, 0 0 5px #46eccb inset; -webkit-transform: rotatey(55deg) translate3d(55px, 23px, 85px) rotate(-90deg); transform: rotatey(55deg) translate3d(55px, 23px, 85px) rotate(-90deg); width: 13px; } } @keyframes hr49 { 0% { border: solid 2px #33ffad; box-shadow: 0 0 5px #57db8a, 0 0 5px #57db8a inset; -webkit-transform: rotatey(55deg) translate3d(55px, 23px, 85px) rotate(0deg); transform: rotatey(55deg) translate3d(55px, 23px, 85px) rotate(0deg); height: 20px; } 100% { border: solid 2px #d333ff; box-shadow: 0 0 5px #46eccb, 0 0 5px #46eccb inset; -webkit-transform: rotatey(55deg) translate3d(55px, 23px, 85px) rotate(-90deg); transform: rotatey(55deg) translate3d(55px, 23px, 85px) rotate(-90deg); width: 13px; } } .wrapper hr:nth-child(50) { position: absolute; left: 0; width: 150px; -webkit-animation: hr50 30s ease-in-out -50s infinite alternate; animation: hr50 30s ease-in-out -50s infinite alternate; } @-webkit-keyframes hr50 { 0% { border: solid 2px #e25074; box-shadow: 0 0 5px #57db92, 0 0 5px #57db92 inset; -webkit-transform: rotatey(63deg) translate3d(92px, 31px, -99px) rotate(0deg); transform: rotatey(63deg) translate3d(92px, 31px, -99px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ff3374; box-shadow: 0 0 5px #33ebff, 0 0 5px #33ebff inset; -webkit-transform: rotatey(63deg) translate3d(92px, 31px, -99px) rotate(-117deg); transform: rotatey(63deg) translate3d(92px, 31px, -99px) rotate(-117deg); width: 33px; } } @keyframes hr50 { 0% { border: solid 2px #e25074; box-shadow: 0 0 5px #57db92, 0 0 5px #57db92 inset; -webkit-transform: rotatey(63deg) translate3d(92px, 31px, -99px) rotate(0deg); transform: rotatey(63deg) translate3d(92px, 31px, -99px) rotate(0deg); height: 20px; } 100% { border: solid 2px #ff3374; box-shadow: 0 0 5px #33ebff, 0 0 5px #33ebff inset; -webkit-transform: rotatey(63deg) translate3d(92px, 31px, -99px) rotate(-117deg); transform: rotatey(63deg) translate3d(92px, 31px, -99px) rotate(-117deg); width: 33px; } } .wrapper hr:nth-child(51) { position: absolute; left: 0; width: 150px; -webkit-animation: hr51 30s ease-in-out -49s infinite alternate; animation: hr51 30s ease-in-out -49s infinite alternate; } @-webkit-keyframes hr51 { 0% { border: solid 2px #c233ff; box-shadow: 0 0 5px #52ff33, 0 0 5px #52ff33 inset; -webkit-transform: rotatey(10deg) translate3d(-126px, 141px, -24px) rotate(0deg); transform: rotatey(10deg) translate3d(-126px, 141px, -24px) rotate(0deg); width: 7px; height: 50px; } 100% { border: solid 2px #d85a88; box-shadow: 0 0 5px #f63c5b, 0 0 5px #f63c5b inset; -webkit-transform: rotatey(10deg) translate3d(-126px, 141px, -24px) rotate(-88deg); transform: rotatey(10deg) translate3d(-126px, 141px, -24px) rotate(-88deg); width: 40px; height: 35px; } } @keyframes hr51 { 0% { border: solid 2px #c233ff; box-shadow: 0 0 5px #52ff33, 0 0 5px #52ff33 inset; -webkit-transform: rotatey(10deg) translate3d(-126px, 141px, -24px) rotate(0deg); transform: rotatey(10deg) translate3d(-126px, 141px, -24px) rotate(0deg); width: 7px; height: 50px; } 100% { border: solid 2px #d85a88; box-shadow: 0 0 5px #f63c5b, 0 0 5px #f63c5b inset; -webkit-transform: rotatey(10deg) translate3d(-126px, 141px, -24px) rotate(-88deg); transform: rotatey(10deg) translate3d(-126px, 141px, -24px) rotate(-88deg); width: 40px; height: 35px; } } .wrapper hr:nth-child(52) { position: absolute; left: 0; width: 150px; -webkit-animation: hr52 30s ease-in-out -48s infinite alternate; animation: hr52 30s ease-in-out -48s infinite alternate; } @-webkit-keyframes hr52 { 0% { border: solid 2px #ff334b; box-shadow: 0 0 5px #33ffbe, 0 0 5px #33ffbe inset; -webkit-transform: rotatey(77deg) translate3d(46px, 104px, -27px) rotate(0deg); transform: rotatey(77deg) translate3d(46px, 104px, -27px) rotate(0deg); width: 45px; height: 50px; } 100% { border: solid 2px #a751e1; box-shadow: 0 0 5px #ff3385, 0 0 5px #ff3385 inset; -webkit-transform: rotatey(77deg) translate3d(46px, 104px, -27px) rotate(-115deg); transform: rotatey(77deg) translate3d(46px, 104px, -27px) rotate(-115deg); width: 39px; height: 75px; } } @keyframes hr52 { 0% { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0