background-color: #004e58; } .container { height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } @import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700"); @font-face { font-family: "Dusseldot"; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/108082/Dusseldot-variable-web.woff2") format("woff2 supports variations"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/108082/Dusseldot-variable-web.woff2") format("woff2-variations"); font-display: swap; font-weight: 50 250; } span { font-size: 55px; font-family: "Dusseldot"; text-shadow: -5px 6px 13px rgba(150, 150, 150, 1); height: 250px; position: absolute; width: 80px; // left: 800px; top: 50px; color: #f67d7e; transform-origin: bottom center; text-align: center; font-weight: 250; } @for $i from 1 through 100 { @keyframes spin#{$i} { 0% { transform: rotate(($i * 17) + deg); font-variation-settings: "wdth" 50; } 20% { font-variation-settings: "wdth" 145; } 30% { font-variation-settings: "wdth" 155; } 50% { font-variation-settings: "wdth" 250; } 70% { font-variation-settings: "wdth" 155; } 80% { font-variation-settings: "wdth" 145; } 100% { transform: rotate((($i * 17) + 360) + deg); font-variation-settings: "wdth" 50; } } .ch#{$i} { transform: rotate(($i * 17) + deg); animation: spin#{$i} 10s linear infinite; } }

See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me See me Hear me

background-attachment