Привет, ребята, сегодняшний урок посвящен водному сайту.

Первое, что мы создадим:
1- index.html
2- стиль.css
3- script.js

Описание изображения

В HTML-файле:

мы создадим базовую структуру. если вы в VS Code выбираете из предложений по сравнению с кодом «html: 5» или «!» сделать это:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Войти в полноэкранный режим

Выйти из полноэкранного режима

теперь мы свяжем файл CSS с файлом html в

<link rel="stylesheet" href="
Войти в полноэкранный режим

Выйти из полноэкранного режима

мы будем использовать это изображение для фона:

Описание изображения

В файле CSS:

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
Войти в полноэкранный режим

Выйти из полноэкранного режима

  • отредактируйте тело и добавьте для него фоновое изображение
body {
    background-image: url(./background.png);
    background-size: cover;
    background-position: center;
    height: 100vh;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

В файле HTML мы добавим

дадим ему класс «контейнер» и добавим в него h1 в него добавим «Под водой» и отредактируем CSS того

<div class="container">
    <h1>Under Water</h1>
</div>

перед началом редактирования CSS контейнера нам нужно добавить шрифт

<link rel="preconnect" href="
<link rel="preconnect" href=" crossorigin>
<link href=" rel="stylesheet">

В файле CSS:

  • сначала мы хотим центрировать «.container» и сделать отступы слева
.container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 20px;
}

тогда. нам нужно отредактировать h1 CSS

.container h1 {
    color: white;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 3px;
    font-size: 48px;
}

на данный момент результат такой:

Описание изображения

Затем мы создадим пузыри:

для HTML:
мы добавим, что:

<div class="bubbles"></div>

для CSS мы отредактируем «.bubble» и сделаем анимацию

.bubbles .bubble {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 46% 54% 40% 60% / 46% 41% 59% 54% ;
    box-shadow: 0 0 10px white inset;
    transform: translateY(-100%);
    animation-name: getDown;
    animation-iteration-count: infinite;
}

@keyframes getDown {
    0%{
        transform: translateY(-100%);
    } 100% {
        transform: translateY( calc(100vh + 100%) );
    }
}

для Javascript:

Сначала нам нужно связать javascript с HTML:

<script src="

затем (в файле Javascript) мы получим «.bubble» в переменной

let bubbles = document.querySelector('.bubbles')

затем нам нужен цикл, чтобы сделать все пузыри, которые нам нужны. мы создадим случайное число для позиции X, времени анимации и продолжительности. в конце концов

for (let i = 0; i < 30; i++) {
    let bubble = document.createElement('div')
    let posX = Math.random() * 100
    let daley = Math.random() * -10
    let duration = (Math.random() * 10) + 3

    bubble.className="bubble"
    bubble.style.left = posX + '%'
    bubble.style.animationDelay = daley + 's'
    bubble.style.animationDuration = duration + 's'


    bubbles.appendChild(bubble)
}

результат:

Описание изображения