Beispiel:Toggle-Icons.html
Aus SELFHTML-Wiki
<!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>
<h1>Toggle-Icons mit CSS-Animation</h1>
<div>
<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>
</div>
<div>
<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>
</div>
</body>
</html>
