Embedded Files
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frase palindroma</title>
<style>
.container {
display: flex;
position: relative;
justify-content: center;
align-items: center;
gap: 1px; /* Spazio tra le immagini */
}
.container img {
width: 14%; /* Percentuale di occupazione dell'immagini rispetto alla larghezza del contenitore */
height: auto;
position: relative; /* Per permettere l'uso di z-index */
}
.z1 {
z-index: 1;
}
.testo-sovrapposto {
position: absolute;
top: 50%;
left: 0%;
color: red;
font-weight: bold;
font-size: 100px;
white-space: nowrap;
z-index: 2;
animation: testoOscillante 3s linear infinite alternate; /* Animazione */
}
@keyframes testoOscillante {
0% { transform: translateX(0%); } /* Inizia a sinistra */
100% { transform: translateX(20%); } /* Termina a destra */
}
</style>
</head>
<body>
<div class="container">
<span class="testo-sovrapposto">ITOPINONAVEVANONIPOTI</span>
<img src="strisce.png" alt="Immagine 1" class="z1">
<img src="strisce.png" alt="Immagine 2" class="z1">
<img src="strisce.png" alt="Immagine 3" class="z1">
<img src="strisce.png" alt="Immagine 4" class="z1">
<img src="strisce.png" alt="Immagine 5" class="z1">
<img src="strisce.png" alt="Immagine 6" class="z1">
<img src="strisce.png" alt="Immagine 7" class="z1">
</div>
</body>
</html>
Ritorna agli Esercizi
Page updated
Google Sites
Report abuse