CSS3 realisiert den Effekt der kontinuierlichen Dreiecksvergrößerung

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

Artikel empfehlen

Detaillierte Erläuterung des CentOS 6.6-Quellcodes und der Installation des MySQL 5.7.18-Tutorials

1. Benutzer und Gruppen hinzufügen 1. MySQL-Benut...

So lösen Sie das Problem ERROR 2003 (HY000) beim Starten von MySQL

1. Problembeschreibung Beim Starten von MySQL tri...

Vue realisiert den Gleitkreuzeffekt des Balles

In diesem Artikelbeispiel wird der spezifische Co...

Zusammenfassung mehrerer Methoden zur Implementierung der vertikalen Zentrierung mit CSS

Im Front-End-Layoutprozess ist es relativ einfach...

Grafisches Tutorial zur Installation und Konfiguration von CentOS 7

In diesem Artikel wird das ausführliche Installat...

Vue-Elternkomponente ruft Funktionsimplementierung der Unterkomponente auf

Die übergeordnete Vue-Komponente ruft die Funktio...

Verwenden Sie Visual Studio Code, um eine Verbindung zur MySql-Datenbank herzustellen und Abfragen durchzuführen

Visual Studio Code ist ein leistungsstarker Texte...

jQuery-Plugin zur Implementierung des Minesweeper-Spiels (3)

In diesem Artikel wird der dritte Artikel zur Ver...

So öffnen Sie Ports zur Außenwelt in Alibaba Cloud Centos7.X

Kurz gesagt: Wenn Sie einen Cloud-Server eines be...

Kompatibilitätsprobleme mit CSS3-Farbverlaufshintergründen

Wenn wir eine Hintergrundfarbe mit Farbverlauf er...

Verwenden Sie reines CSS, um einen Switch-Effekt zu erzielen

Zuerst ist die Idee Um diesen Effekt zu erzielen,...

So führen Sie Linux-Shell-Befehle in Docker aus

Um einen Shell-Befehl in Docker auszuführen, müss...

Beispiel für die Implementierung einer farbigen Fortschrittsbalkenanimation mit CSS3

Kurzes Tutorial Dies ist ein CSS3-Farbfortschritt...

Einführung in den visuellen Ausdruck des Kerninhalts von Webseiten (Bild und Text)

Der erste Schritt beim Design ist immer die Optimi...

Diagramm des Prozesses von der Deinstallation bis zur Installation von MySQL 5.7.18 yum unter Linux

Nach viel Mühe habe ich endlich den Yum-Installat...