简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Comment obtenir un élargissement continu des triangles CSS3

Comment obtenir un élargissement continu des triangles CSS3

醉折花枝作酒筹
醉折花枝作酒筹avant
2021-04-12 11:01:411548parcourir

Cet article vous présentera comment réaliser un élargissement continu des triangles CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Comment obtenir un élargissement continu des triangles CSS3

Effet d'agrandissement continu du triangle CSS3

Aperçu de l'image

Comment obtenir un élargissement continu des triangles CSS3

code index.html

<!DOCTYPE html><html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>CSS3三角形不断放大特效</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<p 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>
		</p>
	</body></html>

code style.css

html {
	height: 100%;}body {
	padding: 0;
	margin: 0;
	height: 100%;
	background: #642B73;
	/* fallback for old browsers */
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #C6426E, #642B73);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}.wrapper {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;}.triangle-canvas {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);}.triangle {
	fill: none;
	stroke: #fff;
	stroke-width: 15;
	-webkit-transform-origin: center center;
	transform-origin: center center;
	-webkit-animation: triangle-animation 10s linear infinite;
	animation: triangle-animation 10s linear infinite;}.triangle-1 {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;}.triangle-2 {
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5s;}.triangle-3 {
	-webkit-animation-delay: -1s;
	animation-delay: -1s;}.triangle-4 {
	-webkit-animation-delay: -1.5s;
	animation-delay: -1.5s;}.triangle-5 {
	-webkit-animation-delay: -2s;
	animation-delay: -2s;}.triangle-6 {
	-webkit-animation-delay: -2.5s;
	animation-delay: -2.5s;}.triangle-7 {
	-webkit-animation-delay: -3s;
	animation-delay: -3s;}.triangle-8 {
	-webkit-animation-delay: -3.5s;
	animation-delay: -3.5s;}.triangle-9 {
	-webkit-animation-delay: -4s;
	animation-delay: -4s;}.triangle-10 {
	-webkit-animation-delay: -4.5s;
	animation-delay: -4.5s;}.triangle-11 {
	-webkit-animation-delay: -5s;
	animation-delay: -5s;}.triangle-12 {
	-webkit-animation-delay: -5.5s;
	animation-delay: -5.5s;}.triangle-13 {
	-webkit-animation-delay: -6s;
	animation-delay: -6s;}.triangle-14 {
	-webkit-animation-delay: -6.5s;
	animation-delay: -6.5s;}.triangle-15 {
	-webkit-animation-delay: -7s;
	animation-delay: -7s;}.triangle-16 {
	-webkit-animation-delay: -7.5s;
	animation-delay: -7.5s;}.triangle-17 {
	-webkit-animation-delay: -8s;
	animation-delay: -8s;}.triangle-18 {
	-webkit-animation-delay: -8.5s;
	animation-delay: -8.5s;}.triangle-19 {
	-webkit-animation-delay: -9s;
	animation-delay: -9s;}.triangle-20 {
	-webkit-animation-delay: -9.5s;
	animation-delay: -9.5s;}@-webkit-keyframes triangle-animation {
	0% {
		-webkit-transform: scale(0) rotate(0deg);
		transform: scale(0) rotate(0deg);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(3) rotate(45deg);
		transform: scale(3) rotate(45deg);
		opacity: 0;
	}}@keyframes triangle-animation {
	0% {
		-webkit-transform: scale(0) rotate(0deg);
		transform: scale(0) rotate(0deg);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(3) rotate(45deg);
		transform: scale(3) rotate(45deg);
		opacity: 0;
	}}

Apprentissage recommandé : tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment faire apparaître un div en haut de la pageArticle suivant：Comment faire apparaître un div en haut de la page

Articles Liés

Voir plus