Hallo Danke für die Hilfe und den Tipp. Das habe ich nicht gewusst mit dem Compiller bei codepen. Vielen Dank und liebe Grüße
Beiträge von PaulRohr
-
-
Hallo, ich bin bei einem Code Snippet gestolpert den ich gern nutzen möchte. Leider funktioniert er nicht wie ich möchte. Nach einigen Suchen konnte ich die Lösung dazu nicht finden. Was ich rausbekommen habe ist, dass es sich dabei nicht um CSS Code handelt sondern um SASS / SCSS. Alle Versuche den Code umzuschreiben sind leider gescheitert. Vielleicht kann mir hier unter den Profis einer weiterhlefen.
Code
Alles anzeigen.glitch { font-size: 130px; line-height: 1; font-family: 'Poppins', sans-serif; font-weight: 700; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; text-decoration: none; color: #fff; &:before, &:after{ display: block; content: '17'; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: .8; } &:after { color: #f0f; z-index: -2; } &:before { color: #0ff; z-index: -1; } &:hover { &:before { animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both infinite } &:after { animation: glitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite } } } @keyframes glitch { 0% { -webkit-transform: translate(0); transform: translate(0) } 20% { -webkit-transform: translate(-5px, 5px); transform: translate(-5px, 5px) } 40% { -webkit-transform: translate(-5px, -5px); transform: translate(-5px, -5px) } 60% { -webkit-transform: translate(5px, 5px); transform: translate(5px, 5px) } 80% { -webkit-transform: translate(5px, -5px); transform: translate(5px, -5px) } to { -webkit-transform: translate(0); transform: translate(0) } } <a href="#" class="glitch">17</a>
Vielen Dank im voraus und LG Paul. Bleibt alle gesund!