#212121
1.scrolldown { 2 --color: white; 3 --sizeX: 30px; 4 --sizeY: 50px; 5 position: relative; 6 width: var(--sizeX); 7 height: var(--sizeY); 8 margin-left: var(sizeX / 2); 9 border: calc(var(--sizeX) / 10) solid var(--color); 10 border-radius: 50px; 11 box-sizing: border-box; 12 margin-bottom: 16px; 13 cursor: pointer; 14} 15 16.scrolldown::before { 17 content: ""; 18 position: absolute; 19 bottom: 30px; 20 left: 50%; 21 width: 6px; 22 height: 6px; 23 margin-left: -3px; 24 background-color: var(--color); 25 border-radius: 100%; 26 animation: scrolldown-anim 2s infinite; 27 box-sizing: border-box; 28 box-shadow: 0px -5px 3px 1px #2a547066; 29} 30 31@keyframes scrolldown-anim { 32 0% { 33 opacity: 0; 34 height: 6px; 35 } 36 37 40% { 38 opacity: 1; 39 height: 10px; 40 } 41 42 80% { 43 transform: translate(0, 20px); 44 height: 10px; 45 opacity: 0; 46 } 47 48 100% { 49 height: 3px; 50 opacity: 0; 51 } 52} 53 54.chevrons { 55 padding: 6px 0 0 0; 56 margin-left: -3px; 57 margin-top: 48px; 58 width: 30px; 59 display: flex; 60 flex-direction: column; 61 align-items: center; 62} 63 64.chevrondown { 65 margin-top: -6px; 66 position: relative; 67 border: solid var(--color); 68 border-width: 0 3px 3px 0; 69 display: inline-block; 70 width: 10px; 71 height: 10px; 72 transform: rotate(45deg); 73} 74 75.chevrondown:nth-child(odd) { 76 animation: pulse54012 500ms ease infinite alternate; 77} 78 79.chevrondown:nth-child(even) { 80 animation: pulse54012 500ms ease infinite alternate 250ms; 81} 82 83@keyframes pulse54012 { 84 from { 85 opacity: 0; 86 } 87 88 to { 89 opacity: 0.5; 90 } 91}
16K views
16K views
Comments
MIT License