CSS3は三角形の連続拡大効果を実現します

1. CSS3の三角形は特殊効果でズームし続けます

11.1 画像プレビュー

ここに画像の説明を挿入

11.2 index.html コード

<!DOCTYPE html>
<html lang="ja">
	<ヘッド>
		<メタ文字セット="UTF-8">
		<title>CSS3 三角形ズーム効果</title>
		<link rel="スタイルシート" href="css/style.css">
	</head>
	<本文>
		<div class="wrapper">
			<svg class="triangle-canvas" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
				<polygon class="triangle triangle-1" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-2" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-3" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-4" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-5" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-6" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-7" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-8" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-9" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-10" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-11" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-12" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-13" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-14" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-15" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-16" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-17" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-18" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-19" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-20" points="500,200 759,650 241,650" />
			</svg>
		</div>
	</本文>
</html>

11.3 style.css コード

html{
	高さ: 100%;
}

体 {
	パディング: 0;
	マージン: 0;
	高さ: 100%;
	背景: #642B73;
	/* 古いブラウザ用のフォールバック */
	/* Chrome 10-25、Safari 5.1-6 */
	背景: 線形グラデーション(左、#C6426E、#642B73);
	/* W3C、IE 10+/ Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+ */
}

.ラッパー{
	オーバーフロー: 非表示;
	位置: 絶対;
	上: 0;
	左: 0;
	幅: 100%;
	高さ: 100%;
}

.三角形キャンバス {
	位置: 絶対;
	左: 50%;
	上位: 50%;
	幅: 100%;
	高さ: 100%;
	-webkit-transform: translate(-50%, -50%);
	変換: translate(-50%, -50%);
}

.三角形 {
	塗りつぶし: なし;
	ストローク: #fff;
	ストローク幅: 15;
	-webkit-transform-origin: 中心 中心;
	変換の原点: 中心 中心;
	-webkit-animation: triangle-animation 10s linear infinite;
	アニメーション: triangle-animation 10s linear infinite;
}

.三角形-1 {
	-webkit-アニメーション遅延: 0秒;
	アニメーション遅延: 0秒;
}

.三角形-2 {
	-webkit アニメーション遅延: -0.5 秒;
	アニメーション遅延: -0.5秒;
}

.三角形-3 {
	-webkit アニメーション遅延: -1 秒;
	アニメーション遅延: -1秒;
}

.三角形-4 {
	-webkit アニメーション遅延: -1.5 秒;
	アニメーション遅延: -1.5秒;
}

.三角形-5 {
	-webkit アニメーション遅延: -2 秒;
	アニメーション遅延: -2秒;
}

.三角形-6 {
	-webkit アニメーション遅延: -2.5 秒;
	アニメーション遅延: -2.5秒;
}

.三角形-7 {
	-webkit アニメーション遅延: -3 秒;
	アニメーション遅延: -3秒;
}

.三角形-8 {
	-webkit アニメーション遅延: -3.5 秒;
	アニメーション遅延: -3.5秒;
}

.三角形-9 {
	-webkit アニメーション遅延: -4 秒;
	アニメーション遅延: -4秒;
}

.三角形-10 {
	-webkit アニメーション遅延: -4.5 秒;
	アニメーション遅延: -4.5秒;
}

.三角形-11 {
	-webkit アニメーション遅延: -5 秒;
	アニメーション遅延: -5秒;
}

.三角形-12 {
	-webkit アニメーション遅延: -5.5 秒;
	アニメーション遅延: -5.5秒;
}

.三角形-13 {
	-webkit アニメーション遅延: -6 秒;
	アニメーション遅延: -6秒;
}

.三角形-14 {
	-webkit アニメーション遅延: -6.5 秒;
	アニメーション遅延: -6.5秒;
}

.三角形-15 {
	-webkit アニメーション遅延: -7 秒;
	アニメーション遅延: -7秒;
}

.三角形-16 {
	-webkit アニメーション遅延: -7.5 秒;
	アニメーション遅延: -7.5秒;
}

.三角形-17 {
	-webkit アニメーション遅延: -8 秒;
	アニメーション遅延: -8秒;
}

.三角形-18 {
	-webkit アニメーション遅延: -8.5 秒;
	アニメーション遅延: -8.5秒;
}

.三角形-19 {
	-webkit アニメーション遅延: -9 秒;
	アニメーション遅延: -9秒;
}

.三角形-20 {
	-webkit アニメーション遅延: -9.5 秒;
	アニメーション遅延: -9.5秒;
}

@-webkit-keyframes 三角形アニメーション {
	0% {
		-webkit-transform: スケール(0) 回転(0度);
		変換: スケール(0) 回転(0度);
		不透明度: 1;
	}

	100% {
		-webkit-transform: スケール(3) 回転(45度);
		変換: スケール(3) 回転(45度);
		不透明度: 0;
	}
}

@keyframes 三角形アニメーション {
	0% {
		-webkit-transform: スケール(0) 回転(0度);
		変換: スケール(0) 回転(0度);
		不透明度: 1;
	}

	100% {
		-webkit-transform: スケール(3) 回転(45度);
		変換: スケール(3) 回転(45度);
		不透明度: 0;
	}
}

CSS3 で三角形のズーム効果を実現する方法についての記事はこれで終わりです。CSS 三角形のズーム効果に関するその他の関連記事については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Dockerカスタムネットワーク実装

>>: MySQL のインデックスの原理とクエリの最適化の詳細な説明