HTML нужно сделать код в котором будет текст и двигающиеся объекты по образцу

Дополнен

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Летающий ангел</title>
<style>
body {
font-family: Arial, sans-serif;
background-image: url(' https://i.pinimg.com/originals/07/9d/25/079d2526f85d4460809a733a6b784f50.jpg '); /* Замените на URL вашего фонового изображения */
background-size: cover;
background-position: center;
color: white;
text-align: center;
margin: 0;
padding: 0;
}
h1 {
margin-top: 20px;
}
.angel, .earth {
position: absolute;
}
@keyframes moveHorizontally {
0% { left: 0; }
50% { left: 80%; }
100% { left: 0; }
}
@keyframes moveVertically {
0% { top: 0; }
50% { top: 80%; }
100% { top: 0; }
}
.angel {
width: 100px;
animation: moveHorizontally 5s linear infinite;
}
.earth {
width: 100px;
animation: moveVertically 5s linear infinite;
}
.content {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="content">
<h1>Летающий ангел</h1>
<p>Используя возможности HTML-языка можно заставить летать ангела по странице.<br>И не только ангела...</p>
<img src="" alt="Ангел" class="angel"> 
<img src="" alt="Земля" class="earth"> 
</div>
</body>
</html>

По дате

По рейтингу

chromatic_scale

Искусственный Интеллект

1г

Вот пример HTML-документа на русском языке с использованием HTML и CSS-анимации, чтобы объекты двигались, как в вашем примере:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758

 <!DOCTYPE html> 
<html lang="ru"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Летающий ангел</title> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            background-image: url('https://example_com/background.jpg'); /* Замените на URL вашего фонового изображения */ 
            background-size: cover; 
            background-position: center; 
            color: white; 
            text-align: center; 
            margin: 0; 
            padding: 0; 
        } 
        h1 { 
            margin-top: 20px; 
        } 
        .angel, .earth { 
            position: absolute; 
        } 
        @keyframes moveHorizontally { 
            0% { left: 0; } 
            50% { left: 80%; } 
            100% { left: 0; } 
        } 
        @keyframes moveVertically { 
            0% { top: 0; } 
            50% { top: 80%; } 
            100% { top: 0; } 
        } 
        .angel { 
            width: 100px; 
            animation: moveHorizontally 5s linear infinite; 
        } 
        .earth { 
            width: 100px; 
            animation: moveVertically 5s linear infinite; 
        } 
        .content { 
            position: relative; 
            top: 50%; 
            transform: translateY(-50%); 
        } 
    </style> 
</head> 
<body> 
    <div class="content"> 
        <h1>Летающий ангел</h1> 
        <p>Используя возможности HTML-языка можно заставить летать ангела по странице.
И не только ангела...</p> 
        <img src="https://example_com/angel.png" width="-1" height="-1" alt = "false|false"/> <!-- Замените на URL вашего изображения ангела --> 
        <img src="https://example_com/earth.png" width="-1" height="-1" alt = "false|false"/> <!-- Замените на URL вашего изображения Земли --> 
    </div> 
</body> 
</html>

### Объяснение:
1. **HTML Структура**: Документ включает заголовок, текст и два изображения.
2. **CSS Стили**:
- Стили `body` задают фоновое изображение, шрифт и выравнивание текста.
- Стили для `h1` добавляют отступ сверху.
- Классы `.angel` и `.earth` используют для абсолютного позиционирования изображений.
- `@keyframes` определяют анимацию для горизонтального (`moveHorizontally`) и вертикального (`moveVertically`) перемещения.
- Класс `.angel` использует горизонтальную анимацию, а класс `.earth` — вертикальную.
3. **Изображения**: Замените URL в атрибутах `src` тега `img` на URL ваших изображений.

Сохраните этот код в файл с расширением `.html` и откройте его в браузере, чтобы увидеть анимацию.