Background Anime
Ciel
Oiseaux
Soleil
Css Animation
Javascript
Html Css Js
Nature
Animation
Effets Visuels
Snippet
Landing Page
Fond animé de ciel avec oiseaux en vol et soleil en CSS et JavaScript. Ambiance aérienne légère et naturelle pour sites créatifs, portfolios et landing pages.
<!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 Jour Animate HTML CSS JS 2026 05070005 | AngularForAll</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(180deg, #5b9bd5 0%, #a2d6f9 40%, #c9e9ff 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, #7ec8f8 0%, #b7e1fa 40%, #d4ecfa 85%, #e2f3d4 100%);
border-radius: 60px;
box-shadow: 0 20px 40px rgba(0, 50, 100, 0.4), inset 0 0 60px rgba(255, 255, 240, 0.5);
overflow: hidden;
}
/* Soleil */
.sun {
position: absolute;
top: 30px;
right: 70px;
width: 100px;
height: 100px;
background: radial-gradient(circle at 35% 35%, #fff9c4, #ffb703);
border-radius: 50%;
box-shadow: 0 0 70px #ffb703, 0 0 120px #ffaa00, 0 0 30px #ffdd55;
z-index: 3;
animation: sunPulse 3s infinite alternate ease-in-out;
}
@keyframes sunPulse {
0% { box-shadow: 0 0 50px #ffb703, 0 0 100px #ffaa00, 0 0 25px #ffdd55; }
100% { box-shadow: 0 0 80px #ffb703, 0 0 140px #ffaa00, 0 0 45px #ffdd55; }
}
.sun-rays {
position: absolute;
top: 10px;
right: 50px;
width: 140px;
height: 140px;
background: radial-gradient(circle, transparent 38%, rgba(255,240,120,0.25) 48%, transparent 52%);
border-radius: 50%;
z-index: 2;
animation: rotateRays 22s linear infinite;
}
@keyframes rotateRays {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Nuages */
.cloud {
position: absolute;
background: rgba(255, 255, 255, 0.92);
border-radius: 60% 40% 70% 30% / 60% 45% 55% 40%;
box-shadow: 10px 10px 25px rgba(255, 255, 250, 0.8), inset 0 -8px 15px rgba(180, 210, 240, 0.7);
backdrop-filter: blur(3px);
z-index: 5;
}
.cloud1 {
width: 200px;
height: 85px;
top: 35px;
left: 5%;
background: #fffffffa;
}
.cloud2 {
width: 240px;
height: 95px;
top: 70px;
right: 5%;
background: #f6fcff;
}
.cloud3 {
width: 170px;
height: 75px;
top: 15px;
left: 45%;
background: #fffffffb;
}
.cloud4 {
width: 150px;
height: 65px;
top: 110px;
left: 25%;
background: #fafeff;
}
.cloud5 {
width: 130px;
height: 60px;
top: 95px;
right: 28%;
background: #ffffff;
}
.cloud6 {
width: 180px;
height: 70px;
top: 140px;
left: 60%;
background: #f2f9ff;
}
/* Oiseaux */
.bird {
position: absolute;
z-index: 15;
font-size: 28px;
filter: drop-shadow(0 4px 5px rgba(0,0,0,0.25));
user-select: none;
pointer-events: none;
transition: transform 0.1s linear;
}
@media (max-width: 700px) {
.sky-container {
height: 450px;
}
.bird {
font-size: 20px;
}
.sun {
width: 70px;
height: 70px;
top: 20px;
right: 30px;
}
}
</style>
</head>
<body>
<div class="sky-container">
<!-- Soleil -->
<div class="sun"></div>
<div class="sun-rays"></div>
<!-- Nuages -->
<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>
<!-- Les oiseaux seront ajoutés par JavaScript -->
</div>
<script>
(function() {
const skyContainer = document.querySelector('.sky-container');
// Définition des oiseaux avec position initiale
const birdsData = [
{ emoji: '🐦', left: 10, top: 12 },
{ emoji: '🐦', left: 28, top: 6 },
{ emoji: '🐦', left: 52, top: 10 },
{ emoji: '🐦', left: 70, top: 16 },
{ emoji: '🐦', left: 85, top: 8 },
{ emoji: '🐦', left: 38, top: 18 },
{ emoji: '🐦', left: 62, top: 5 }
];
const birdsElements = [];
// Création des éléments oiseaux
birdsData.forEach((birdInfo, index) => {
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 = (22 + Math.floor(Math.random() * 16)) + 'px';
skyContainer.appendChild(birdSpan);
birdsElements.push({
el: birdSpan,
left: birdInfo.left,
top: birdInfo.top,
speedX: 0.08 + Math.random() * 0.18,
speedY: 0.02 + Math.random() * 0.05,
directionX: Math.random() > 0.5 ? 1 : -1,
directionY: Math.random() > 0.5 ? 0.4 : -0.4,
minLeft: 2,
maxLeft: 96,
minTop: 3,
maxTop: 24
});
});
// 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;
// Rebonds horizontaux
if (newLeft >= b.maxLeft) {
newLeft = b.maxLeft;
b.directionX = -1;
} else if (newLeft <= b.minLeft) {
newLeft = b.minLeft;
b.directionX = 1;
}
// Rebonds verticaux
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 + '%';
// Inclinaison selon la direction
const rotation = b.directionX > 0 ? 6 : -6;
b.el.style.transform = `rotate(${rotation}deg)`;
});
requestAnimationFrame(animateBirds);
}
// Démarrage de l'animation
animateBirds();
console.log('☁️🌤️ Ciel nuageux avec oiseaux et soleil illuminé !');
})();
</script>
</body>
</html>Télécharger le fichier source