Для начала создания открытки нужно выбрать картинку-фон. Вы можете выбрать свою картинку. К примеру:
Далее это изображение нужно положить (скачать) в папку с проектом, рядом с файлами index.html и style.css. Имя данного файла home.jpg.
Затем нужно скачать в ту же папку проекта три графических файла снежинок, которые мы заставим падать в файле style.css. В темном блоке ниже три картинки снежинок, их надо скачать в папку проекта (правой кнопкой мыши кликнуть по картинке, а затем в появившемся контекстном меню - "сохранить изображение как" и указать путь сохранения в папку с проектом, где уже есть файлы index.html, style.css, home.jpg (или ваш файл с вашим именем).
В итоге, HTML-код будет выглядеть следующим образом:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Новогодняя открытка</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--подключаем свой стиль CSS-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!--контейнер открытки-->
<div class="ny">
<div id="snow-container">
</div>
</div>
<p>Здесь мы можем продолжить свою страницу другим кодом и блоками.</p>
</body>
</html>А код в файле style.css будет выглядеть так:
.ny {
background: url(home.jpg) no-repeat;
background-size: cover;
height: 1000px;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
#snow-container {
background-image: url(snowflake.png), url(snowflake3.png), url(snowflake2.png);
height: 100%;
animation: snow 20s linear infinite;
}Обратите внимание на имена файлов картинок (открытка, снежинки) в коде CSS - они с маленькой буквы и прописаны точно по имени файлов.