Background Anime
Ciel Nuit
Etoiles
Lune
Css Animation
Javascript
Html Css Js
Nuit
Animation
Effets Visuels
Snippet
Design Premium
Fond animé de ciel nocturne avec étoiles, lune et oiseaux de nuit en CSS et JavaScript. Atmosphère mystérieuse et élégante pour sites premium et portfolios.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippet Bg Nuit Animate HTML CSS JS 2026 05070001.html | AngularForAll</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(180deg, #0a0e27 0%, #1a1f3a 40%, #0d1230 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Segoe UI', system-ui, sans-serif;
padding: 20px;
margin: 0;
overflow: hidden;
}
.sky-container {
position: relative;
width: 100%;
max-width: 1000px;
height: 600px;
background: linear-gradient(180deg, #0b1026 0%, #141c3a 30%, #1c2541 60%, #1a1f3a 100%);
border-radius: 60px;
box-shadow: 0 20px 40px rgba(0, 0, 20, 0.6), inset 0 0 80px rgba(20, 30, 80, 0.5);
overflow: hidden;
}
/* Étoiles scintillantes */
.stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.star {
position: absolute;
background: white;
border-radius: 50%;
animation: twinkle 3s infinite alternate ease-in-out;
box-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 200, 0.5);
}
@keyframes twinkle {
0% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
100% { opacity: 0.4; transform: scale(0.9); }
}
/* Lune */
.moon {
position: absolute;
top: 35px;
right: 80px;
width: 90px;
height: 90px;
background: radial-gradient(circle at 38% 38%, #fcf6d6, #e6d98a);
border-radius: 50%;
box-shadow: 0 0 50px #f5eeb0, 0 0 100px #e6d670, 0 0 20px #fffde7,
inset -8px -4px 15px rgba(180, 160, 80, 0.6);
z-index: 3;
animation: moonGlow 4s infinite alternate ease-in-out;
}
@keyframes moonGlow {
0% { box-shadow: 0 0 40px #f5eeb0, 0 0 90px #e6d670, 0 0 20px #fffde7; }
100% { box-shadow: 0 0 65px #f5eeb0, 0 0 130px #e6d670, 0 0 35px #fffde7; }
}
.moon-crater {
position: absolute;
background: rgba(200, 180, 110, 0.25);
border-radius: 50%;
}
.crater1 {
width: 22px;
height: 22px;
top: 22px;
left: 28px;
}
.crater2 {
width: 14px;
height: 14px;
top: 52px;
left: 40px;
}
.crater3 {
width: 10px;
height: 10px;
top: 30px;
left: 58px;
}
/* Nuages nocturnes */
.cloud {
position: absolute;
background: rgba(30, 35, 70, 0.7);
border-radius: 60% 40% 70% 30% / 60% 45% 55% 40%;
box-shadow: 8px 8px 20px rgba(0, 0, 40, 0.5), inset 0 -6px 12px rgba(20, 25, 60, 0.8);
backdrop-filter: blur(5px);
z-index: 4;
}
.cloud1 {
width: 200px;
height: 85px;
top: 30px;
left: 3%;
background: rgba(25, 30, 60, 0.75);
}
.cloud2 {
width: 220px;
height: 90px;
top: 65px;
right: 4%;
background: rgba(20, 28, 55, 0.8);
}
.cloud3 {
width: 160px;
height: 70px;
top: 12px;
left: 42%;
background: rgba(28, 33, 58, 0.75);
}
.cloud4 {
width: 140px;
height: 60px;
top: 105px;
left: 22%;
background: rgba(22, 30, 52, 0.8);
}
.cloud5 {
width: 120px;
height: 55px;
top: 90px;
right: 25%;
background: rgba(30, 35, 55, 0.75);
}
.cloud6 {
width: 170px;
height: 65px;
top: 135px;
left: 58%;
background: rgba(18, 24, 48, 0.8);
}
/* Oiseaux nocturnes */
.bird {
position: absolute;
z-index: 10;
font-size: 26px;
filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
user-select: none;
pointer-events: none;
transition: transform 0.1s linear;
}
@media (max-width: 700px) {
.sky-container {
height: 450px;
}
.bird {
font-size: 20px;
}
.moon {
width: 65px;
height: 65px;
top: 25px;
right: 40px;
}
}
</style>
</head>
<body>
<div class="sky-container">
<!-- Étoiles générées dynamiquement -->
<div class="stars" id="starsContainer"></div>
<!-- Lune avec cratères -->
<div class="moon">
<div class="moon-crater crater1"></div>
<div class="moon-crater crater2"></div>
<div class="moon-crater crater3"></div>
</div>
<!-- Nuages nocturnes -->
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
<div class="cloud cloud3"></div>
<div class="cloud cloud4"></div>
<div class="cloud cloud5"></div>
<div class="cloud cloud6"></div>
<!-- Oiseaux ajoutés par JavaScript -->
</div>
<script>
(function() {
const skyContainer = document.querySelector('.sky-container');
const starsContainer = document.getElementById('starsContainer');
// --- Génération des étoiles ---
function createStars() {
const starCount = 90;
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.className = 'star';
// Position aléatoire
const left = Math.random() * 98;
const top = Math.random() * 70;
star.style.left = left + '%';
star.style.top = top + '%';
// Taille aléatoire
const size = 1.2 + Math.random() * 3.2;
star.style.width = size + 'px';
star.style.height = size + 'px';
// Délai d'animation aléatoire
star.style.animationDelay = Math.random() * 4 + 's';
star.style.animationDuration = (2 + Math.random() * 4) + 's';
// Certaines étoiles plus brillantes
if (Math.random() > 0.7) {
star.style.boxShadow = '0 0 8px rgba(255,255,255,0.9), 0 0 16px rgba(255,255,200,0.7)';
}
starsContainer.appendChild(star);
}
}
createStars();
// --- Création des oiseaux nocturnes ---
const birdsData = [
{ emoji: '🦉', left: 8, top: 14 },
{ emoji: '🦉', left: 25, top: 7 },
{ emoji: '🦉', left: 48, top: 11 },
{ emoji: '🦉', left: 68, top: 15 },
{ emoji: '🦉', left: 82, top: 9 },
{ emoji: '🦉', left: 35, top: 19 },
{ emoji: '🦉', left: 58, top: 6 }
];
const birdsElements = [];
birdsData.forEach((birdInfo) => {
const birdSpan = document.createElement('span');
birdSpan.className = 'bird';
birdSpan.textContent = birdInfo.emoji;
birdSpan.style.left = birdInfo.left + '%';
birdSpan.style.top = birdInfo.top + '%';
birdSpan.style.fontSize = (20 + Math.floor(Math.random() * 14)) + 'px';
skyContainer.appendChild(birdSpan);
birdsElements.push({
el: birdSpan,
left: birdInfo.left,
top: birdInfo.top,
speedX: 0.06 + Math.random() * 0.14,
speedY: 0.01 + Math.random() * 0.04,
directionX: Math.random() > 0.5 ? 1 : -1,
directionY: Math.random() > 0.5 ? 0.3 : -0.3,
minLeft: 2,
maxLeft: 96,
minTop: 3,
maxTop: 22
});
});
// --- Animation des oiseaux ---
function animateBirds() {
birdsElements.forEach(b => {
let currentLeft = parseFloat(b.el.style.left) || b.left;
let currentTop = parseFloat(b.el.style.top) || b.top;
let newLeft = currentLeft + b.speedX * b.directionX;
let newTop = currentTop + b.speedY * b.directionY;
if (newLeft >= b.maxLeft) {
newLeft = b.maxLeft;
b.directionX = -1;
} else if (newLeft <= b.minLeft) {
newLeft = b.minLeft;
b.directionX = 1;
}
if (newTop >= b.maxTop || newTop <= b.minTop) {
b.directionY *= -1;
newTop = Math.min(b.maxTop, Math.max(b.minTop, newTop));
}
b.el.style.left = newLeft + '%';
b.el.style.top = newTop + '%';
const rotation = b.directionX > 0 ? 5 : -5;
b.el.style.transform = `rotate(${rotation}deg)`;
});
requestAnimationFrame(animateBirds);
}
animateBirds();
console.log('🌙🦉 Ciel nocturne animé avec lune, étoiles et oiseaux de nuit !');
})();
</script>
</body>
</html>Télécharger le fichier source