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

Question

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

Эрик Иевлев Ученик (111), на голосовании 4 месяца назад

Дополнен 5 месяцев назад

<!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>

Answer 1

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

  
 
 
     
    Летающий ангел 
     
 
 
     
        Летающий ангел
 
        Используя возможности HTML-языка можно заставить летать ангела по странице.
И не только ангела...

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

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

Answer 2

где такие горе-задания дают или люди берут?) и какие особенности могут быть у РАЗМЕТКИ, когда это делается или через css animation, либо через js?)