Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026
in Halle (Saale)
Beispiel:Toggle-Icons.html
<!DOCTYPE html> <html lang="de">
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Toggle-Icons</title> <style> .line { fill: none; stroke: steelblue; stroke-miterlimit: 8; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; transition: all 0.25s ease; transform-origin: center; }
#transform { .line { transform-box: fill-box; }
&:hover .top, &:focus .top { transform: translateY(20px) rotate(45deg); }
&:hover .bottom, &:focus .bottom { transform: translateY(-20px) rotate(-45deg); }
&:hover .middle, &:focus .middle { opacity: 0; } }
#center { &:hover .topleft, &:focus .topleft { transform: rotate(45deg) scale(1.31, 1); transform-origin: 20px 20px; }
&:hover .topright, &:focus .topright { transform: rotate(-45deg) scale(1.31, 1); transform-origin: 80px 20px; }
&:hover .bottomleft, &:focus .bottomleft { transform: rotate(-45deg) scale(1.31, 1); transform-origin: 20px 80px; }
&:hover .bottomright, &:focus .bottomright { transform: rotate(45deg) scale(1.31, 1); transform-origin: 80px 80px; }
&:hover .middleleft { transform: scaleX(0.1) translateX(25px); opacity: 0; }
&:hover .middleright { transform: scaleX(0.1) translateX(-25px); opacity: 0; } }
#lineani { .line { transition: all 1s ease; }
.top { stroke-dasharray: 61 207; }
.middle { stroke-dasharray: 61 60; }
.bottom { stroke-dasharray: 61 207; }
&:hover .top, &:focus .top { stroke-dasharray: 90 207; stroke-dashoffset: -134; }
&:hover .middle, &:focus .middle { stroke-dasharray: 1 60; stroke-dashoffset: -30; }
&:hover .bottom, &:focus .bottom { stroke-dasharray: 90 207; stroke-dashoffset: -134; }
}
#squeeze { .carrier { transition: transform 0.35s ease; transition-delay: 0.35s; }
.move { transform-box: fill-box; transition: opacity 0s linear; transition-delay: 0.35s; }
.middle { transition: opacity 0s linear; transition-delay: 0.35s; }
.cross { transform-box: fill-box; transform-origin: center; opacity: 0; transition: transform 0.35s ease, opacity 0s linear; transition-delay: 0s, 0.35s; }
&:hover, &:focus { .carrier { transition-delay: 0s; } .top-carrier { transform: translateY(20px); } .bottom-carrier { transform: translateY(-20px); } .cross { transition-delay: 0.35s, 0.35s; } .move { opacity: 0; } .middle { opacity: 0; } .cross { opacity: 1; } .cross-top { transform: rotate(45deg); } .cross-bottom { transform: rotate(-45deg); } } }
#plusminus { &:hover .v { transform: scaleY(0); opacity: 0; } }
#arrow { .line { stroke-dasharray: 78 35; }
&:hover .line, &:focus .line { stroke-dashoffset: -35; } }
#arrow2 { .line { stroke-dasharray: 78 35; }
.icon { transition: rotate 2s ease; }
&:hover .icon, &:focus .icon { rotate: 180deg; } }
div { display: flex; justify-content: center; flex-wrap: wrap; gap: 4em;
}
button { background-color: transparent; border: none; width: 9em; aspect-ratio: 1 / 1; } </style>
</head>
<body>
Toggle-Icons mit CSS-Animation
<button id="transform" aria-label="Icon: Menü zu Kreuz (Transform)"> <svg viewBox="0 0 100 100" class="icon"> <line class="line top" x1="20" y1="30" x2="80" y2="30" /> <line class="line middle" x1="20" y1="50" x2="80" y2="50" /> <line class="line bottom" x1="20" y1="70" x2="80" y2="70" /> </svg> </button>
<button id="center" aria-label="Icon: Linien zum Kreuz (Center)"> <svg viewBox="0 0 100 100" class="icon"> <line class="line topleft" x1="20" y1="20" x2="50" y2="20" /> <line class="line topright" x1="50" y1="20" x2="80" y2="20" /> <line class="line middleleft" x1="20" y1="50" x2="50" y2="50" /> <line class="line middleright" x1="50" y1="50" x2="80" y2="50" /> <line class="line bottomleft" x1="20" y1="80" x2="50" y2="80" /> <line class="line bottomright" x1="50" y1="80" x2="80" y2="80" /> </svg> </button>
<button id="lineani" aria-label="Icon: Strich-Animation (Line Animation)"> <svg viewBox="0 0 100 100" class="icon"> <path class="line top" d="m 20,29 h 60 c 0,0 14.5,-0.2 14.5,37.7 0,11.3 -3.5,15 -9.2,15 C 79.6,81.7 75,75 75,75 L 25,25" /> <path class="line middle" d="M 20,50 H 80" /> <path class="line bottom" d="M 20,71 H 80 C 80,71 94.5,71.2 94.5,33.3 94.5,22 91,18.3 85.3,18.3 79.6,18.3 75,25 75,25 L 25,75" /> </svg> </button>
<button id="squeeze" aria-label="Icon: Squeeze zu Kreuz"> <svg viewBox="0 0 100 100" class="icon"> <g class="carrier top-carrier"> <line class="line move top-move" x1="20" y1="30" x2="80" y2="30" /> </g> <line class="line middle" x1="20" y1="50" x2="80" y2="50" /> <g class="carrier bottom-carrier"> <line class="line move bottom-move" x1="20" y1="70" x2="80" y2="70" /> </g> <line class="line cross cross-top" x1="20" y1="50" x2="80" y2="50" /> <line class="line cross cross-bottom" x1="20" y1="50" x2="80" y2="50" /> </svg> </button>
<button id="arrow" aria-label="Icon: Pfeil (Strichversatz)"> <svg viewBox="0 0 100 100" class="icon"> <path class="line" d="M25,40 l20,-15 v60 l-20,-15" /> <path class="line" d="M65,40 l-20,-15 v60 l20,-15" /> </svg> </button>
<button id="arrow2" aria-label="Icon: Pfeil rotieren"> <svg viewBox="0 0 100 100" class="icon"> <path class="line" d="M25,40 l20,-15 v60 l-20,-15"></path> <path class="line" d="M65,40 l-20,-15 v60 l20,-15"></path> </svg> </button>
<button id="plusminus" aria-label="Icon: Plus zu Minus"> <svg viewBox="0 0 100 100" class="icon"> <line class="line h" x1="20" y1="50" x2="80" y2="50" /> <line class="line v" x1="50" y1="20" x2="50" y2="80" /> </svg> </button>
</body> </html>
