Untitled
Guest 71 11th Dec, 2024
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bałwanek Tańczy</title>
<style>
body {
background-color: #87CEEB; /* Jasnoniebieskie niebo */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
flex-direction: column; /* Ustawienie elementów w kolumnie */
text-align: center;
}
/* Styl dla tekstu życzeń */
.wishes {
font-family: 'Arial', sans-serif;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px; /* Odstęp między życzeniami a bałwankiem */
animation: colorChange 2s infinite, languageChange 6s infinite; /* Animacje zmiany koloru i języka */
}
/* Animacja zmiany koloru tekstu */
@keyframes colorChange {
0% {
color: red;
}
25% {
color: green;
}
50% {
color: blue;
}
75% {
color: purple;
}
100% {
color: orange;
}
}
/* Animacja zmiany języka (zmiana treści) */
@keyframes languageChange {
0%, 100% {
content: "Wesołych Świąt i Szczęśliwego Nowego Roku!"; /* Polski */
}
50% {
content: "Merry Christmas and Happy New Year!"; /* Angielski */
}
}
svg {
width: 300px;
height: 400px;
animation: dance 1s infinite alternate ease-in-out; /* Animacja tańca */
}
/* Animacja tańca - skakanie */
@keyframes dance {
0% {
transform: translateY(0); /* Początkowa pozycja */
}
50% {
transform: translateY(-20px); /* Skok w górę */
}
100% {
transform: translateY(0); /* Powrót do pierwotnej pozycji */
}
}
</style>
</head>
<body>
<!-- Życzenia świąteczne -->
<div class="wishes" id="wishesText">
Wesołych Świąt i Szczęśliwego Nowego Roku!
</div>
<svg viewBox="0 0 100 150">
<!-- Ciało bałwana (3 kule) z największą kulą na dole -->
<circle cx="50" cy="125" r="30" fill="white" stroke="black" stroke-width="2" />
<circle cx="50" cy="85" r="25" fill="white" stroke="black" stroke-width="2" />
<circle cx="50" cy="45" r="20" fill="white" stroke="black" stroke-width="2" />
<!-- Oczy (węgielki) -->
<circle cx="43" cy="40" r="2" fill="black" />
<circle cx="57" cy="40" r="2" fill="black" />
<!-- Nos (marchewka) -->
<polygon points="50,45 52,47 50,49" fill="orange" />
<!-- Uśmiech -->
<path d="M 43 50 Q 50 55 57 50" fill="transparent" stroke="black" stroke-width="1" />
<!-- Szalik -->
<rect x="35" y="60" width="30" height="5" fill="red" />
<rect x="35" y="65" width="5" height="10" fill="red" />
<!-- Kapelusz -->
<rect x="35" y="20" width="30" height="5" fill="black" />
<rect x="40" y="15" width="20" height="10" fill="black" />
<!-- Guziki (węgielki) -->
<circle cx="50" cy="70" r="2" fill="black" />
<circle cx="50" cy="80" r="2" fill="black" />
<circle cx="50" cy="90" r="2" fill="black" />
<!-- Miotła -->
<rect x="10" y="95" width="5" height="30" fill="saddlebrown" />
<polygon points="5,125 15,125 10,140" fill="saddlebrown" />
<line x1="0" y1="125" x2="12" y2="125" stroke="saddlebrown" stroke-width="2" />
</svg>
<script>
// Skrypt do zmiany tekstu w języku
const wishesText = document.getElementById("wishesText");
setInterval(() => {
if (wishesText.innerHTML === "Wesołych Świąt i Szczęśliwego Nowego Roku!") {
wishesText.innerHTML = "Merry Christmas and Happy New Year!";
} else {
wishesText.innerHTML = "Wesołych Świąt i Szczęśliwego Nowego Roku!";
}
}, 3000); // Zmiana co 3 sekundy
</script>
</body>
</html>
To share this paste please copy this url and send to your friends
RAW Paste Data
