HTML
table cellpadding="0" cellspacing="0" id="demo_navi"> </table> <div class='tri'> <div class='side'> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> </div> <div class='side'> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> </div> <div class='side'> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> <div class='ring'></div> </div> </div>CSS
.tri { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, 100%); -ms-transform: translate(-50%, 100%); transform: translate(-50%, 100%); width: 50px; height: 50px; } .tri .side { width: 150px; height: 150px; position: absolute; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; } .tri .side:nth-child(1) { -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); } .tri .side:nth-child(2) { -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } .tri .side:nth-child(3) { -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); } .tri .side:nth-child(2) { -webkit-transform: translateY(-150px); -ms-transform: translateY(-150px); transform: translateY(-150px); } .tri .ring { width: 50px; height: 50px; position: absolute; background: white; -webkit-animation-name: rotate, cromatic; animation-name: rotate, cromatic; -webkit-animation-duration: 3s, 3s; animation-duration: 3s, 3s; -webkit-animation-timing-function: linear, linear; animation-timing-function: linear, linear; -webkit-animation-iteration-count: infinite, infinite; animation-iteration-count: infinite, infinite; opacity: 0.5; -webkit-box-shadow: 0 0 30px black; box-shadow: 0 0 30px black; border-radius: 20%; } .side:nth-child(1) .ring:nth-child(0) { margin: 0 0 0 0px; z-index: 0; -webkit-animation-delay: 0s; animation-delay: 0s; } .side:nth-child(1) .ring:nth-child(1) { margin: 0 0 0 6.66667px; z-index: 1; -webkit-animation-delay: 0.03333s; animation-delay: 0.03333s; } .side:nth-child(1) .ring:nth-child(2) { margin: 0 0 0 13.33333px; z-index: 2; -webkit-animation-delay: 0.06667s; animation-delay: 0.06667s; } .side:nth-child(1) .ring:nth-child(3) { margin: 0 0 0 20px; z-index: 3; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .side:nth-child(1) .ring:nth-child(4) { margin: 0 0 0 26.66667px; z-index: 4; -webkit-animation-delay: 0.13333s; animation-delay: 0.13333s; } .side:nth-child(1) .ring:nth-child(5) { margin: 0 0 0 33.33333px; z-index: 5; -webkit-animation-delay: 0.16667s; animation-delay: 0.16667s; } .side:nth-child(1) .ring:nth-child(6) { margin: 0 0 0 40px; z-index: 6; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .side:nth-child(1) .ring:nth-child(7) { margin: 0 0 0 46.66667px; z-index: 7; -webkit-animation-delay: 0.23333s; animation-delay: 0.23333s; } .side:nth-child(1) .ring:nth-child(8) { margin: 0 0 0 53.33333px; z-index: 8; -webkit-animation-delay: 0.26667s; animation-delay: 0.26667s; } .side:nth-child(1) .ring:nth-child(9) { margin: 0 0 0 60px; z-index: 9; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .side:nth-child(1) .ring:nth-child(10) { margin: 0 0 0 66.66667px; z-index: 10; -webkit-animation-delay: 0.33333s; animation-delay: 0.33333s; } .side:nth-child(1) .ring:nth-child(11) { margin: 0 0 0 73.33333px; z-index: 11; -webkit-animation-delay: 0.36667s; animation-delay: 0.36667s; } .side:nth-child(1) .ring:nth-child(12) { margin: 0 0 0 80px; z-index: 12; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .side:nth-child(1) .ring:nth-child(13) { margin: 0 0 0 86.66667px; z-index: 13; -webkit-animation-delay: 0.43333s; animation-delay: 0.43333s; } .side:nth-child(1) .ring:nth-child(14) { margin: 0 0 0 93.33333px; z-index: 14; -webkit-animation-delay: 0.46667s; animation-delay: 0.46667s; } .side:nth-child(1) .ring:nth-child(15) { margin: 0 0 0 100px; z-index: 15; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .side:nth-child(1) .ring:nth-child(16) { margin: 0 0 0 106.66667px; z-index: 16; -webkit-animation-delay: 0.53333s; animation-delay: 0.53333s; } .side:nth-child(1) .ring:nth-child(17) { margin: 0 0 0 113.33333px; z-index: 17; -webkit-animation-delay: 0.56667s; animation-delay: 0.56667s; } .side:nth-child(1) .ring:nth-child(18) { margin: 0 0 0 120px; z-index: 18; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .side:nth-child(1) .ring:nth-child(19) { margin: 0 0 0 126.66667px; z-index: 19; -webkit-animation-delay: 0.63333s; animation-delay: 0.63333s; } .side:nth-child(1) .ring:nth-child(20) { margin: 0 0 0 133.33333px; z-index: 20; -webkit-animation-delay: 0.66667s; animation-delay: 0.66667s; } .side:nth-child(1) .ring:nth-child(21) { margin: 0 0 0 140px; z-index: 21; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .side:nth-child(1) .ring:nth-child(22) { margin: 0 0 0 146.66667px; z-index: 22; -webkit-animation-delay: 0.73333s; animation-delay: 0.73333s; } .side:nth-child(1) .ring:nth-child(23) { margin: 0 0 0 153.33333px; z-index: 23; -webkit-animation-delay: 0.76667s; animation-delay: 0.76667s; } .side:nth-child(1) .ring:nth-child(24) { margin: 0 0 0 160px; z-index: 24; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .side:nth-child(1) .ring:nth-child(25) { margin: 0 0 0 166.66667px; z-index: 25; -webkit-animation-delay: 0.83333s; animation-delay: 0.83333s; } .side:nth-child(1) .ring:nth-child(26) { margin: 0 0 0 173.33333px; z-index: 26; -webkit-animation-delay: 0.86667s; animation-delay: 0.86667s; } .side:nth-child(1) .ring:nth-child(27) { margin: 0 0 0 180px; z-index: 27; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .side:nth-child(1) .ring:nth-child(28) { margin: 0 0 0 186.66667px; z-index: 28; -webkit-animation-delay: 0.93333s; animation-delay: 0.93333s; } .side:nth-child(1) .ring:nth-child(29) { margin: 0 0 0 193.33333px; z-index: 29; -webkit-animation-delay: 0.96667s; animation-delay: 0.96667s; } .side:nth-child(1) .ring:nth-child(30) { margin: 0 0 0 200px; z-index: 30; -webkit-animation-delay: 1s; animation-delay: 1s; } .side:nth-child(2) .ring:nth-child(0) { margin: 0px 0 0 0px; z-index: 30; -webkit-animation-delay: 2s; animation-delay: 2s; } .side:nth-child(2) .ring:nth-child(1) { margin: 5px 0 0 -3.33333px; z-index: 29; -webkit-animation-delay: 2.03333s; animation-delay: 2.03333s; } .side:nth-child(2) .ring:nth-child(2) { margin: 10px 0 0 -6.66667px; z-index: 28; -webkit-animation-delay: 2.06667s; animation-delay: 2.06667s; } .side:nth-child(2) .ring:nth-child(3) { margin: 15px 0 0 -10px; z-index: 27; -webkit-animation-delay: 2.1s; animation-delay: 2.1s; } .side:nth-child(2) .ring:nth-child(4) { margin: 20px 0 0 -13.33333px; z-index: 26; -webkit-animation-delay: 2.13333s; animation-delay: 2.13333s; } .side:nth-child(2) .ring:nth-child(5) { margin: 25px 0 0 -16.66667px; z-index: 25; -webkit-animation-delay: 2.16667s; animation-delay: 2.16667s; } .side:nth-child(2) .ring:nth-child(6) { margin: 30px 0 0 -20px; z-index: 24; -webkit-animation-delay: 2.2s; animation-delay: 2.2s; } .side:nth-child(2) .ring:nth-child(7) { margin: 35px 0 0 -23.33333px; z-index: 23; -webkit-animation-delay: 2.23333s; animation-delay: 2.23333s; } .side:nth-child(2) .ring:nth-child(8) { margin: 40px 0 0 -26.66667px; z-index: 22; -webkit-animation-delay: 2.26667s; animation-delay: 2.26667s; } .side:nth-child(2) .ring:nth-child(9) { margin: 45px 0 0 -30px; z-index: 21; -webkit-animation-delay: 2.3s; animation-delay: 2.3s; } .side:nth-child(2) .ring:nth-child(10) { margin: 50px 0 0 -33.33333px; z-index: 20; -webkit-animation-delay: 2.33333s; animation-delay: 2.33333s; } .side:nth-child(2) .ring:nth-child(11) { margin: 55px 0 0 -36.66667px; z-index: 19; -webkit-animation-delay: 2.36667s; animation-delay: 2.36667s; } .side:nth-child(2) .ring:nth-child(12) { margin: 60px 0 0 -40px; z-index: 18; -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } .side:nth-child(2) .ring:nth-child(13) { margin: 65px 0 0 -43.33333px; z-index: 17; -webkit-animation-delay: 2.43333s; animation-delay: 2.43333s; } .side:nth-child(2) .ring:nth-child(14) { margin: 70px 0 0 -46.66667px; z-index: 16; -webkit-animation-delay: 2.46667s; animation-delay: 2.46667s; } .side:nth-child(2) .ring:nth-child(15) { margin: 75px 0 0 -50px; z-index: 15; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .side:nth-child(2) .ring:nth-child(16) { margin: 80px 0 0 -53.33333px; z-index: 14; -webkit-animation-delay: 2.53333s; animation-delay: 2.53333s; } .side:nth-child(2) .ring:nth-child(17) { margin: 85px 0 0 -56.66667px; z-index: 13; -webkit-animation-delay: 2.56667s; animation-delay: 2.56667s; } .side:nth-child(2) .ring:nth-child(18) { margin: 90px 0 0 -60px; z-index: 12; -webkit-animation-delay: 2.6s; animation-delay: 2.6s; } .side:nth-child(2) .ring:nth-child(19) { margin: 95px 0 0 -63.33333px; z-index: 11; -webkit-animation-delay: 2.63333s; animation-delay: 2.63333s; } .side:nth-child(2) .ring:nth-child(20) { margin: 100px 0 0 -66.66667px; z-index: 10; -webkit-animation-delay: 2.66667s; animation-delay: 2.66667s; } .side:nth-child(2) .ring:nth-child(21) { margin: 105px 0 0 -70px; z-index: 9; -webkit-animation-delay: 2.7s; animation-delay: 2.7s; } .side:nth-child(2) .ring:nth-child(22) { margin: 110px 0 0 -73.33333px; z-index: 8; -webkit-animation-delay: 2.73333s; animation-delay: 2.73333s; } .side:nth-child(2) .ring:nth-child(23) { margin: 115px 0 0 -76.66667px; z-index: 7; -webkit-animation-delay: 2.76667s; animation-delay: 2.76667s; } .side:nth-child(2) .ring:nth-child(24) { margin: 120px 0 0 -80px; z-index: 6; -webkit-animation-delay: 2.8s; animation-delay: 2.8s; } .side:nth-child(2) .ring:nth-child(25) { margin: 125px 0 0 -83.33333px; z-index: 5; -webkit-animation-delay: 2.83333s; animation-delay: 2.83333s; } .side:nth-child(2) .ring:nth-child(26) { margin: 130px 0 0 -86.66667px; z-index: 4; -webkit-animation-delay: 2.86667s; animation-delay: 2.86667s; } .side:nth-child(2) .ring:nth-child(27) { margin: 135px 0 0 -90px; z-index: 3; -webkit-animation-delay: 2.9s; animation-delay: 2.9s; } .side:nth-child(2) .ring:nth-child(28) { margin: 140px 0 0 -93.33333px; z-index: 2; -webkit-animation-delay: 2.93333s; animation-delay: 2.93333s; } .side:nth-child(2) .ring:nth-child(29) { margin: 145px 0 0 -96.66667px; z-index: 1; -webkit-animation-delay: 2.96667s; animation-delay: 2.96667s; } .side:nth-child(2) .ring:nth-child(30) { margin: 150px 0 0 -100px; z-index: 0; -webkit-animation-delay: 3s; animation-delay: 3s; } .side:nth-child(3) .ring:nth-child(0) { margin: 0px 0 0 0px; z-index: 0; -webkit-animation-delay: 1s; animation-delay: 1s; } .side:nth-child(3) .ring:nth-child(1) { margin: -5px 0 0 -3.33333px; z-index: 1; -webkit-animation-delay: 1.03333s; animation-delay: 1.03333s; } .side:nth-child(3) .ring:nth-child(2) { margin: -10px 0 0 -6.66667px; z-index: 2; -webkit-animation-delay: 1.06667s; animation-delay: 1.06667s; } .side:nth-child(3) .ring:nth-child(3) { margin: -15px 0 0 -10px; z-index: 3; -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } .side:nth-child(3) .ring:nth-child(4) { margin: -20px 0 0 -13.33333px; z-index: 4; -webkit-animation-delay: 1.13333s; animation-delay: 1.13333s; } .side:nth-child(3) .ring:nth-child(5) { margin: -25px 0 0 -16.66667px; z-index: 5; -webkit-animation-delay: 1.16667s; animation-delay: 1.16667s; } .side:nth-child(3) .ring:nth-child(6) { margin: -30px 0 0 -20px; z-index: 6; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .side:nth-child(3) .ring:nth-child(7) { margin: -35px 0 0 -23.33333px; z-index: 7; -webkit-animation-delay: 1.23333s; animation-delay: 1.23333s; } .side:nth-child(3) .ring:nth-child(8) { margin: -40px 0 0 -26.66667px; z-index: 8; -webkit-animation-delay: 1.26667s; animation-delay: 1.26667s; } .side:nth-child(3) .ring:nth-child(9) { margin: -45px 0 0 -30px; z-index: 9; -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } .side:nth-child(3) .ring:nth-child(10) { margin: -50px 0 0 -33.33333px; z-index: 10; -webkit-animation-delay: 1.33333s; animation-delay: 1.33333s; } .side:nth-child(3) .ring:nth-child(11) { margin: -55px 0 0 -36.66667px; z-index: 11; -webkit-animation-delay: 1.36667s; animation-delay: 1.36667s; } .side:nth-child(3) .ring:nth-child(12) { margin: -60px 0 0 -40px; z-index: 12; -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .side:nth-child(3) .ring:nth-child(13) { margin: -65px 0 0 -43.33333px; z-index: 13; -webkit-animation-delay: 1.43333s; animation-delay: 1.43333s; } .side:nth-child(3) .ring:nth-child(14) { margin: -70px 0 0 -46.66667px; z-index: 14; -webkit-animation-delay: 1.46667s; animation-delay: 1.46667s; } .side:nth-child(3) .ring:nth-child(15) { margin: -75px 0 0 -50px; z-index: 15; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .side:nth-child(3) .ring:nth-child(16) { margin: -80px 0 0 -53.33333px; z-index: 16; -webkit-animation-delay: 1.53333s; animation-delay: 1.53333s; } .side:nth-child(3) .ring:nth-child(17) { margin: -85px 0 0 -56.66667px; z-index: 17; -webkit-animation-delay: 1.56667s; animation-delay: 1.56667s; } .side:nth-child(3) .ring:nth-child(18) { margin: -90px 0 0 -60px; z-index: 18; -webkit-animation-delay: 1.6s; animation-delay: 1.6s; } .side:nth-child(3) .ring:nth-child(19) { margin: -95px 0 0 -63.33333px; z-index: 19; -webkit-animation-delay: 1.63333s; animation-delay: 1.63333s; } .side:nth-child(3) .ring:nth-child(20) { margin: -100px 0 0 -66.66667px; z-index: 20; -webkit-animation-delay: 1.66667s; animation-delay: 1.66667s; } .side:nth-child(3) .ring:nth-child(21) { margin: -105px 0 0 -70px; z-index: 21; -webkit-animation-delay: 1.7s; animation-delay: 1.7s; } .side:nth-child(3) .ring:nth-child(22) { margin: -110px 0 0 -73.33333px; z-index: 22; -webkit-animation-delay: 1.73333s; animation-delay: 1.73333s; } .side:nth-child(3) .ring:nth-child(23) { margin: -115px 0 0 -76.66667px; z-index: 23; -webkit-animation-delay: 1.76667s; animation-delay: 1.76667s; } .side:nth-child(3) .ring:nth-child(24) { margin: -120px 0 0 -80px; z-index: 24; -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } .side:nth-child(3) .ring:nth-child(25) { margin: -125px 0 0 -83.33333px; z-index: 25; -webkit-animation-delay: 1.83333s; animation-delay: 1.83333s; } .side:nth-child(3) .ring:nth-child(26) { margin: -130px 0 0 -86.66667px; z-index: 26; -webkit-animation-delay: 1.86667s; animation-delay: 1.86667s; } .side:nth-child(3) .ring:nth-child(27) { margin: -135px 0 0 -90px; z-index: 27; -webkit-animation-delay: 1.9s; animation-delay: 1.9s; } .side:nth-child(3) .ring:nth-child(28) { margin: -140px 0 0 -93.33333px; z-index: 28; -webkit-animation-delay: 1.93333s; animation-delay: 1.93333s; } .side:nth-child(3) .ring:nth-child(29) { margin: -145px 0 0 -96.66667px; z-index: 29; -webkit-animation-delay: 1.96667s; animation-delay: 1.96667s; } .side:nth-child(3) .ring:nth-child(30) { margin: -150px 0 0 -100px; z-index: 30; -webkit-animation-delay: 2s; animation-delay: 2s; } @-webkit-keyframes rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes cromatic { 0% { background-color: yellow; } 15% { background-color: #008f59; } 30% { background-color: #2771b2; } 45% { background-color: #6e3795; } 60% { background-color: red; } 75% { background-color: #ff9201; } 100% { background-color: yellow; } } @keyframes cromatic { 0% { background-color: yellow; } 15% { background-color: #008f59; } 30% { background-color: #2771b2; } 45% { background-color: #6e3795; } 60% { background-color: red; } 75% { background-color: #ff9201; } 100% { background-color: yellow; } } В итоге получаем результат