CSS3 realisiert den Effekt der kontinuierlichen Dreiecksvergrößerung

1. CSS3-Dreieck vergrößert weiterhin Spezialeffekte

11.1 Bildvorschau

Bildbeschreibung hier einfügen

11.2 index.html-Code

<!DOCTYPE html>
<html lang="de">
	<Kopf>
		<meta charset="UTF-8">
		<title>CSS3-Dreieck-Zoomeffekt</title>
		<link rel="stylesheet" href="css/style.css">
	</Kopf>
	<Text>
		<div Klasse="Wrapper">
			<svg class="triangle-canvas" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
				<polygon Klasse="dreieck dreieck-1" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-2" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-3" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-4" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-5" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-6" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-7" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-8" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-9" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-10" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-11" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-12" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-13" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-14" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-15" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-16" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-17" Punkte="500,200 759,650 241,650" />
				<polygon class="triangle triangle-18" Punkte="500,200 759,650 241,650" />
				<polygon Klasse="dreieck dreieck-19" Punkte="500,200 759,650 241,650" />
				<polygon class="triangle triangle-20" Punkte="500,200 759,650 241,650" />
			</svg>
		</div>
	</body>
</html>

11.3 style.css-Code

html {
	Höhe: 100%;
}

Körper {
	Polsterung: 0;
	Rand: 0;
	Höhe: 100%;
	Hintergrund: #642B73;
	/* Fallback für alte Browser */
	/* Chrome 10-25, Safari 5.1-6 */
	Hintergrund: linearer Farbverlauf (nach links, #C6426E, #642B73);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.wrapper {
	Überlauf: versteckt;
	Position: absolut;
	oben: 0;
	links: 0;
	Breite: 100 %;
	Höhe: 100%;
}

.dreieck-leinwand {
	Position: absolut;
	links: 50%;
	oben: 50 %;
	Breite: 100 %;
	Höhe: 100%;
	-webkit-transform: übersetzen(-50 %, -50 %);
	transformieren: übersetzen(-50 %, -50 %);
}

.Dreieck {
	Füllung: keine;
	Schlaganfall: #fff;
	Strichstärke: 15;
	-webkit-transform-origin: Mitte Mitte;
	Transform-Origin: Mitte Mitte;
	-Webkit-Animation: Dreiecksanimation 10 s linear unendlich;
	Animation: Dreieckanimation 10s linear unendlich;
}

.dreieck-1 {
	-Webkit-Animationsverzögerung: 0 s;
	Animationsverzögerung: 0 s;
}

.dreieck-2 {
	-Webkit-Animationsverzögerung: -0,5 s;
	Animationsverzögerung: -0,5 s;
}

.dreieck-3 {
	-Webkit-Animationsverzögerung: -1 s;
	Animationsverzögerung: -1s;
}

.dreieck-4 {
	-Webkit-Animationsverzögerung: -1,5 s;
	Animationsverzögerung: -1,5 s;
}

.dreieck-5 {
	-Webkit-Animationsverzögerung: -2 s;
	Animationsverzögerung: -2s;
}

.dreieck-6 {
	-Webkit-Animationsverzögerung: -2,5 s;
	Animationsverzögerung: -2,5 s;
}

.dreieck-7 {
	-Webkit-Animationsverzögerung: -3 s;
	Animationsverzögerung: -3s;
}

.dreieck-8 {
	-Webkit-Animationsverzögerung: -3,5 s;
	Animationsverzögerung: -3,5 s;
}

.dreieck-9 {
	-Webkit-Animationsverzögerung: -4 s;
	Animationsverzögerung: -4s;
}

.dreieck-10 {
	-Webkit-Animationsverzögerung: -4,5 s;
	Animationsverzögerung: -4,5 s;
}

.dreieck-11 {
	-Webkit-Animationsverzögerung: -5 s;
	Animationsverzögerung: -5s;
}

.dreieck-12 {
	-Webkit-Animationsverzögerung: -5,5 s;
	Animationsverzögerung: -5,5 s;
}

.dreieck-13 {
	-Webkit-Animationsverzögerung: -6 s;
	Animationsverzögerung: -6s;
}

.dreieck-14 {
	-Webkit-Animationsverzögerung: -6,5 s;
	Animationsverzögerung: -6,5 s;
}

.dreieck-15 {
	-Webkit-Animationsverzögerung: -7 s;
	Animationsverzögerung: -7s;
}

.dreieck-16 {
	-Webkit-Animationsverzögerung: -7,5 s;
	Animationsverzögerung: -7,5 s;
}

.dreieck-17 {
	-Webkit-Animationsverzögerung: -8 s;
	Animationsverzögerung: -8s;
}

.dreieck-18 {
	-Webkit-Animationsverzögerung: -8,5 s;
	Animationsverzögerung: -8,5 s;
}

.dreieck-19 {
	-Webkit-Animationsverzögerung: -9 s;
	Animationsverzögerung: -9s;
}

.dreieck-20 {
	-Webkit-Animationsverzögerung: -9,5 s;
	Animationsverzögerung: -9,5 s;
}

@-webkit-keyframes Dreieck-Animation {
	0% {
		-webkit-transform: Skalierung (0) Drehung (0 Grad);
		transformieren: skalieren (0) drehen (0 Grad);
		Deckkraft: 1;
	}

	100 % {
		-webkit-transform: Skalierung (3) Drehen (45 Grad);
		transformieren: skalieren (3) drehen (45 Grad);
		Deckkraft: 0;
	}
}

@keyframes Dreieck-Animation {
	0% {
		-webkit-transform: Skalierung (0) Drehung (0 Grad);
		transformieren: skalieren (0) drehen (0 Grad);
		Deckkraft: 1;
	}

	100 % {
		-webkit-transform: Skalierung (3) Drehen (45 Grad);
		transformieren: skalieren (3) drehen (45 Grad);
		Deckkraft: 0;
	}
}

Dies ist das Ende dieses Artikels darüber, wie Sie mit CSS3 den Dreieckszoomeffekt erzielen. Weitere verwandte CSS-Dreieckszoomeffekte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Benutzerdefinierte Docker-Netzwerkimplementierung

>>: Detaillierte Erläuterung des MySQL-Indexprinzips und der Abfrageoptimierung