Эффект расширяющегося облака на CSS
Здравствуйте! В примере ниже мы рассмотрим как сделать эффект
расширяющегося облака на CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Облако</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cloud"></div> <!-- Этот div представляет изображение облака -->
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
height: 100vh;
background: linear-gradient(to bottom, #87CEEB, #1E90FF); /* Градиент от голубого к более темному синему */
overflow: hidden;
position: relative; /* Добавим позиционирование для облаков */
}
.cloud {
position: absolute;
background-image: url('cloud5.png'); /* Замените 'cloud.png' на путь к вашему изображению облака */
width: 600px; /* Задайте ширину облака */
height: 400px; /* Задайте высоту облака */
top: 300px; /* Позиция по вертикали */
left: 1200px; /* Позиция по горизонтали */
z-index: 1; /* Установите z-index, чтобы облако было выше фона */
background-size: cover; /* Масштабирование изображения */
background-repeat: no-repeat; /* Запрет повтора изображения */
animation: expandCloud 5s linear infinite alternate; /* Анимация расширяющегося пара */
z-index: 1;
}
/* Добавьте облака в разных местах на вашей странице */
.cloud1 {
top: 200px;
left: 300px;
}
.cloud2 {
top: 50px;
left: 400px;
}
/* Продолжайте добавлять облака с разными координатами, если нужно */
@keyframes expandCloud {
0% {
transform: translateX(-50%) scale(1); /* Изначальный размер и позиция */
}
100% {
transform: translateX(-50%) scale(1.5); /* Увеличенный размер */
}
}
Источник
