A. Transiciones 1

Salida


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport"
8	content="width=device-width">
9	<title>Transiciones 1</title>
10
11	<style>
12	menu {
13	display: flex;
14	/* Centra verticalmente el
15	* contenido cuando solo tiene
16	* 1 renglón. */
17	align-items: center;
18	flex-wrap: wrap;
19	align-content: center;
20	/* Centra horizontalmente el
21	* contenido cuando hay varios
22	* renglones. */
23	justify-content: center;
24	list-style-type: none;
25	/* Espacio vertical y horizontal
26	* entre elementos. */
27	gap: 0.5rem;
28	padding: 0;
29	margin: 0;
30	}
31
32	#sonrisa {
33	/* Aumenta el tamaño de letra a
34	* 5 renglones de texto normal.
35	*/
36	font-size: 5rem;
37	/* El ancho es el mínimo
38	* necesario para mostrar el
39	* contenido. */
40	width: fit-content;
41	margin: 1rem auto;
42	/* El cursor del ratón es una
43	* mano apuntando. */
44	cursor: pointer;
45	/* Este elemento cambia
46	* lentamente cuando se cambia
47	* la propiedad transform. */
48	transition-property: transform;
49	/* El cambia dura 0.5s. */
50	transition-duration: 0.5s;
51	}
52
53	/* La sonrisa gira media vuelta
54	* cuando se cliquea. */
55	#sonrisa:active {
56	transform: rotate(0.5turn);
57	}
58
59	/* La sonrisa gira 80% de vuelta
60	* cuando tiene la clase gira. */
61	#sonrisa.gira {
62	transform: rotate(0.8turn);
63	}
64	</style>
65
66	</head>
67
68	<body>
69
70	<menu>
71	<li>
72	<h1>Transiciones 1</h1>
73	</li>
74	<li>
75	<!-- Botón que agrega la clase
76	gira a la sonrise. -->
77	<button type="button"
78	onclick="sonrisa.classList
79	.add('gira')">
80	Gira
81	</button>
82	</li>
83	<li>
84	<!-- Botón que quita la clase
85	gira a la sonrise. -->
86	<button type="button"
87	onclick="sonrisa.classList
88	.remove('gira')">
89	Regresa
90	</button>
91	</li>
92	</menu>
93
94	<figure id="sonrisa">😁</figure>
95
96	</body>
97
98	</html>

skip_previous skip_next