400 views
1.loader { 2 position: relative; 3 width: 78px; 4 height: 78px; 5 border-radius: 50%; 6 background: #fff; 7 border: 8px solid #131a1d; 8 overflow: hidden; 9 box-sizing: border-box; 10} 11 12.loader::after { 13 content: ''; 14 position: absolute; 15 left: 0; 16 top: -50%; 17 width: 100%; 18 height: 100%; 19 background: #263238; 20 z-index: 5; 21 border-bottom: 8px solid #131a1d; 22 box-sizing: border-box; 23 animation: eyeShade 3s infinite; 24} 25 26.loader::before { 27 content: ''; 28 position: absolute; 29 left: 20px; 30 bottom: 15px; 31 width: 32px; 32 z-index: 2; 33 height: 32px; 34 background: #111; 35 border-radius: 50%; 36 animation: eyeMove 3s infinite; 37} 38 39@keyframes eyeShade { 40 0% { 41 transform: translateY(0) 42 } 43 44 20% { 45 transform: translateY(5px) 46 } 47 48 40% , 50% { 49 transform: translateY(-5px) 50 } 51 52 60% { 53 transform: translateY( -8px) 54 } 55 56 75% { 57 transform: translateY( 5px) 58 } 59 60 100% { 61 transform: translateY(10px) 62 } 63} 64 65@keyframes eyeMove { 66 0% { 67 transform: translate(0 , 0) 68 } 69 70 20% { 71 transform: translate(0px , 5px) 72 } 73 74 40% , 50% { 75 transform: translate(0px , -5px) 76 } 77 78 60% { 79 transform: translate(-10px , -5px) 80 } 81 82 75% { 83 transform: translate(-20px , 5px) 84 } 85 86 100% { 87 transform: translate(0 , 10px) 88 } 89}
Shoh2008
c0der
I'm Shoxruh. I'm Tajik. I can speak Russian, Uzbek, English. I live in Uzbekistan I was finishing an IT course. Experience as a Junior, front-end developer.
MIT License