406 views
1.wave-menu { 2 border: 4px solid #545FE5; 3 border-radius: 50px; 4 width: 200px; 5 height: 45px; 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 padding: 0; 10 margin: 0; 11 cursor: pointer; 12 transition: ease 0.2s; 13 position: relative; 14 background: #fff; 15} 16 17.wave-menu li { 18 list-style: none; 19 height: 30px; 20 width: 4px; 21 border-radius: 10px; 22 background: #545FE5; 23 margin: 0 6px; 24 padding: 0; 25 animation-name: wave1; 26 animation-duration: 0.3s; 27 animation-iteration-count: infinite; 28 animation-direction: alternate; 29 transition: ease 0.2s; 30} 31 32.wave-menu:hover > li { 33 background: #fff; 34} 35 36.wave-menu:hover { 37 background: #545FE5; 38} 39 40.wave-menu li:nth-child(2) { 41 animation-name: wave2; 42 animation-delay: 0.2s; 43} 44 45.wave-menu li:nth-child(3) { 46 animation-name: wave3; 47 animation-delay: 0.23s; 48 animation-duration: 0.4s; 49} 50 51.wave-menu li:nth-child(4) { 52 animation-name: wave4; 53 animation-delay: 0.1s; 54 animation-duration: 0.3s; 55} 56 57.wave-menu li:nth-child(5) { 58 animation-delay: 0.5s; 59} 60 61.wave-menu li:nth-child(6) { 62 animation-name: wave2; 63 animation-duration: 0.5s; 64} 65 66.wave-menu li:nth-child(8) { 67 animation-name: wave4; 68 animation-delay: 0.4s; 69 animation-duration: 0.25s; 70} 71 72.wave-menu li:nth-child(9) { 73 animation-name: wave3; 74 animation-delay: 0.15s; 75} 76 77@keyframes wave1 { 78 from { 79 transform: scaleY(1); 80 } 81 82 to { 83 transform: scaleY(0.5); 84 } 85} 86 87@keyframes wave2 { 88 from { 89 transform: scaleY(0.3); 90 } 91 92 to { 93 transform: scaleY(0.6); 94 } 95} 96 97@keyframes wave3 { 98 from { 99 transform: scaleY(0.6); 100 } 101 102 to { 103 transform: scaleY(0.8); 104 } 105} 106 107@keyframes wave4 { 108 from { 109 transform: scaleY(0.2); 110 } 111 112 to { 113 transform: scaleY(0.5); 114 } 115} 116
JkHuger
JkHuger
MIT License