❤️Креативная веб-страница: очень простая и красивая китайская веб-страница с признанием в честь Дня святого Валентина в формате HTML5 (используйте ее напрямую, чтобы выразить свою любовь) HTML+CSS+JS

Shortcuts

Calendar Appointments

Invoice App Manage Accounts

User App Manage Users

Role Management Permission

Dashboard Analytics

Setting Account Settings

FAQs FAQs & Articles

Modals Useful Popups
- Notification
  8 New
- - Congratulation Lettie 🎉
    Won the monthly best seller gold badge
    
    1h ago
  - CF
    
    Charles Franklin
    Accepted your connection
    
    12hr ago
  - New Message ✉️
    You have new message from Natalie
    
    1h ago
  - Whoo! You have new order 🛒
    ACME Inc. made new order $1,154
    
    1 day ago
  - Application has been approved 🚀
    Your ABC project application has been approved.
    
    2 days ago
  - Monthly report is generated
    July monthly financial report is generated
    
    3 days ago
  - Send connection request
    Peter sent you connection request
    
    4 days ago
  - New message from Jane
    Your have new message from Jane
    
    5 days ago
  - CPU is running high
    CPU Utilization Percent is currently at 88.63%,
    
    5 days ago
- View all notifications

❤️Креативная веб-страница: очень простая и красивая китайская веб-страница с признанием в честь Дня святого Валентина в формате HTML5 (используйте ее напрямую, чтобы выразить свою любовь) HTML+CSS+JS

Блогер:свет судьбы Столбец:веб-разработка (html css js)

✨Введение:

В эпоху цифровых технологий изменились и способы выражения любви. Раньше мы могли писать любовные письма или выражать свои эмоции лично, но теперь мы можем использовать Интернет и технологии программирования, чтобы создавать уникальные и забавные способы выразить свою любовь. В этом блоге вы узнаете, как использовать HTML, CSS и JavaScript для создания удивительной веб-страницы с признанием в любви.

✨Предисловие:

Недавно шел дождь. Изначально я хотел написать веб-страницу с эффектом дождя. Я не знаю, как это написать, и начал выражать свои чувства ( ●'◡'͵ Без лишних слов, давайте просто посмотрим. при отображении эффектов на веб-странице. Хорошо, я также написал веб-страницы с эффектами дождя в колонке. Друзья, которые заинтересованы, могут это проверить.
🍓🍓Если изображение не видно четко, ниже есть видеопоказ (размер изображения превышает 5М, поэтому при передаче возникнут проблемы)

✨Видео дисплей

Любовь - свет судьбы (признание)

✨Исходный код

🍓Здесь вы можете разместить исходный код напрямую и просто скопировать и вставить то, что вам нужно. 🍓Здесь мы помещаем исходный код первым, чтобы даже друзья, которые не учились программированию, могли напрямую использовать код, не читая слишком много принципов (можно'◡'ا) 🍓Примечание: не забудьте прочитать методы исходного кода🤭

<!DOCTYPE html>
<html>
<head>
    <title>Эффект снежного фонаилюбовь</title>
    <style type="text/css">
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
			 background-color: #FCE8F8;
        }

        #snow-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }

        .snowflake {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            opacity: 0.8;
            pointer-events: none;
            animation: snowfall linear infinite;
        }

        @keyframes snowfall {
            0% {
                transform: translateY(-100%);
            }
            100% {
                transform: translateY(100vh);
            }
        }

        .heart {
            width: 200px;
            height: 200px;
            position: relative;
            animation: heartbeat 1s infinite;
            transform-origin: center center;
        }

        .heart:before,
        .heart:after {
            content: "";
            background-color: red;
            border-radius: 50px 50px 0 0;
            position: absolute;
            top: 0;
        }

        .heart:before {
            left: 100px;
            width: 100px;
            height: 160px;
            transform: rotate(-45deg);
            transform-origin: 0 100%;
        }

        .heart:after {
            left: 0;
            width: 100px;
            height: 160px;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }

        #timeElapsed {
            text-align: center;
            font-size: 24px;
            margin-top: 20px;
        }

        @keyframes heartbeat {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
            }
        }

        @keyframes falling {
            0% {
                transform: translateY(-100vh);
            }
            100% {
                transform: translateY(100vh);
            }
        }

        .sakura {
            position: absolute;
            top: -20px;
            left: -20px;
            width: 40px;
            height: 40px;
            background-image: url('https://www.unicode.org/emoji/charts/full-emoji-list.html#1f338'); /* 🌸Escape-последовательности Unicode */
            background-size: cover;
            animation: falling linear infinite;
            animation-duration: 10s;
        }
    </style>
</head>
<body>
    <div id="snow-container"></div>
    <div class="heart"></div>
    <div id="timeElapsed"></div>

    <script>
        function getTimeElapsed() {
            var startDate = new Date("2022-01-01"); // дата начала настройки заменена на фактическую дату начала
            var currentDate = new Date();
            var timeDiff = currentDate - startDate;

            var milliseconds = timeDiff % 1000;
            timeDiff = Math.floor(timeDiff / 1000);
            var seconds = timeDiff % 60;
            timeDiff = Math.floor(timeDiff / 60);
            var minutes = timeDiff % 60;
            timeDiff = Math.floor(timeDiff / 60);
            var hours = timeDiff % 24;
            timeDiff = Math.floor(timeDiff / 24);
            var days = timeDiff;

            var timeString = «Детка, мы уже вместе " + days + " небо " + hours + " Час " + minutes + " минута " + seconds + " Секунды»;

            document.getElementById("timeElapsed").textContent = timeString;
        }

        setInterval(getTimeElapsed, 1000);
    </script>

    <script>
        function createSnowflake() {
            const snowflake = document.createElement('div');
            snowflake.classList.add('snowflake');
            snowflake.style.left = Math.random() * window.innerWidth + 'px';
            snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
            snowflake.style.opacity = Math.random();
            snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';

            const randomColor = getRandomColor();
            snowflake.style.backgroundColor = randomColor;

            snowflake.innerHTML = 'свет судьбы'; // You can customize the snowflake symbol here

            return snowflake;
        }

        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        function snowfall() {
            const snowContainer = document.getElementById('snow-container');
            const numSnowflakes = 50; // Adjust the number of snowflakes here

            for (let i = 0; i < numSnowflakes; i++) {
                const snowflake = createSnowflake();
                snowContainer.appendChild(snowflake);
            }
        }

        snowfall();
    </script>

    <script>
        function createSakura() {
            var sakura = document.createElement("div");
            sakura.className = "sakura";
            sakura.style.left = Math.random() * 100 + "vw";
            sakura.style.animationDelay = Math.random() * 5 + "s";
            document.body.appendChild(sakura);

            setTimeout(function () {
                sakura.remove();
            }, 10000);
        }

        setInterval(createSakura, 200);
    </script>
</body>
</html>

✨Как использовать код (очень просто, не нужно ничего скачивать)

🍓1.Откройте блокнот.

🍓2. Скопируйте и вставьте приведенный выше исходный код в Блокнот, сохраните файл как HTML-файл и нажмите «Сохранить».

🍓3. Откройте html-файл (готово (можно'◡'ا))

✨Объяснение кода (выберите чтение, новички могут закончить его здесь, дальше читать не нужно)

🍓Здесь я должен сказать, что код не сложный, если вы умеете использовать HTML, CSS и JS. Новички не смогут его понять, поэтому я решил прочитать следующий контент, чтобы не делать этого. чтобы повлиять на впечатления от просмотра новичков ( ● '◡'ا), желаю всем счастья🎉🎉

🍓Функции и функции кода объясняются построчно ниже:

1. `<!DOCTYPE html>`：Объявите тип документа какHTML,Здесь используется объявление типа документа HTML5.

2. `<html>`：означает весьHTMLКорневой элемент документа。

3. `<head>`：Содержит метаданные о документе.итаблица стилей。

4. `<title>`：настраивать Название веб-страницы。

5. `<style>`：определить внутренниетаблица стилей,Стиль, используемый для настройки веб-страниц.

6. `body`: определяет содержимое страницы.

`display: flex;`: установите гибкий макет страницы, чтобы ее содержимое располагалось по центру по вертикали и горизонтали.
`align-items: center;`: выравнивает содержимое страницы по центру по вертикали.
`justify-content: center;`: выравнивает содержимое страницы по центру по горизонтали.
`height: 100vh;`: установите высоту страницы равной высоте окна, чтобы она заполняла весь экран.
`margin: 0;`: удалить поля страницы по умолчанию.
`overflow: Hidden;`: скрыть часть содержимого страницы, вызывающую переполнение.
`background-color: #FCE8F8;`: установите розовый цвет фона страницы.

7. `#snow-container`: элемент, используемый для хранения эффектов снега.

`position: фиксированный;`: установите для метода позиционирования элемента фиксированное позиционирование, то есть фиксированное положение относительно окна браузера.
`top: 0; left: 0;`: Поместите элемент в верхний левый угол страницы.
`width: 100%; height: 100%;`: установите ширину и высоту элемента на 100%, чтобы он заполнил весь экран.
`pointer-events: none;`: отключает события мыши элемента, чтобы он не получал взаимодействия с пользователем.
`z-index: -1;`: устанавливает порядок наложения элемента на -1, помещая его ниже остального содержимого.

8. `.snowflake`: Определите стиль элемента снежинки.

`position: Absolute;`: Установите режим позиционирования элемента на абсолютное позиционирование.
`width: 10px; height: 10px;`: установите ширину и высоту элемента на 10 пикселей.
`background-color: #fff;`: установите белый цвет фона элемента.
`border-radius: 50%;`: устанавливает радиус границы элемента на 50 %, делая его круглым.
`opacity: 0,8;`: установите прозрачность элемента на 0,8.
`pointer-events: none;`: отключить события мыши для элементов.
`animation: снегопад линейный бесконечный;`: применить эффект анимации с именем `snowfall`, установленный на линейное движение.
и играть в бесконечном цикле.

9. `@keyframes Snowfall`: определите анимацию ключевого кадра с именем `snowfall`.

`0%`: начальное состояние анимации, перемещение элемента вверх до позиции -100%.
`100%`: конечное состояние анимации, перемещение элемента вниз до высоты области просмотра (100vh).

10. `.heart`: Определите стиль элемента сердца.

`width: 200px; height: 200px;`: установите ширину и высоту элемента на 200 пикселей.
`position: относительный;`: Установите режим позиционирования элемента на относительное позиционирование.
`animation: heartbeat 1 с бесконечно;`: примените эффект анимации с именем `heartbeat` и установите его цикл на 1 секунду.
`transform-origin: center center;`: установить начало трансформации элемента в качестве центральной точки.

11. `.heart:before` и `.heart:after`: определите стиль псевдоэлемента сердца, используемый для рисования двух половин сердца.

`content: "";`: установите пустое содержимое псевдоэлемента.
`background-color: red;`: установите красный цвет фона псевдоэлемента.
`border-radius: 50px 50px 0 0;`: установите радиус границы псевдоэлемента для достижения формы сердца.
`position: Absolute;`: Установите режим позиционирования псевдоэлемента на абсолютное позиционирование.
`top: 0;`: Поместите псевдоэлемент в верхнюю позицию.

12. `#timeElapsed`: элемент, отображающий течение времени.

`text-align: center;`: центрирует текстовое содержимое по горизонтали.
`font-size: 24px;`: установите размер шрифта текста на 24 пикселя.
`margin-top: 20px;`: установите поле текста сверху на 20 пикселей.

13. `<script>`：ВстроитьJavaScriptкод,Используется для достижения интерактивных и динамических эффектов на веб-страницах.

14. `function getTimeElapsed()`: Определите функцию для получения информации о ходе времени.

`var startDate = new Date("2022-01-01");`: установите дату начала, которую можно заменить фактической датой начала.
`var currentDate = new Date();`: Получить текущую дату и время.
`var timeDiff = currentDate - startDate;`: вычислить разницу во времени между текущей датой и датой начала.
Затем,через серию вычислений,Перевести разницу во времени в небо, Час, минуты и секунды.,и объединены в строку времени.
Наконец, установите строку времени в текстовое содержимое элемента timeElapsed.

15. `setInterval(getTimeElapsed, 1000);`: вызывайте функцию `getTimeElapsed` каждую секунду, чтобы обновлять отображение промежутка времени.

16. `function createSnowflake()`: Определите функцию для создания снежинок.

Создайте`<div>`элементы в виде снежинок。
настраивать

Стиль снежинки, включая положение, продолжительность анимации, прозрачность, размер шрифта и цвет фона.

Цвет фона случайно сгенерированных снежинок.
Содержание настроек снежинки - "свет судьбы" (настраиваемый).
Возвращает созданный элемент снежинки.

17. `function getRandomColor()`: определите функцию для получения случайного цвета.

Создайте случайный шестнадцатеричный цвет.
Возвращает случайный цвет.

18. `function Snowfall()`: функция, определяющая эффект падения снежинок.

Получите элемент-контейнер снежинки.
настройки Количество генерируемых снежинок.
Циклы для создания снежинок и добавления их в контейнер снежинок.

19. `snowfall();`: вызовите функцию `snowfall`, чтобы запустить эффект снега.

20. `function createSakura()`: Определите функцию для создания Сакуры.

Создайте`<div>`Элементы как цветущая вишня。
настройки стиля цветения сакуры, включая положение и анимацию времени задержки.
Добавьте на страницу цветущую вишню.
настройка таймера,Сакура удаляется через 10 секунд.

21. `setInterval(createSakura, 200);`: вызывайте функцию `createSakura` каждые 200 миллисекунд, чтобы создать эффект цветущей сакуры.

🍓🍓Этот код реализует веб-страницу с фоновым эффектом снежного покрова и сердечками и одновременно отображает два эффекта обратного отсчета: один — это промежуток времени, рассчитанный от указанной даты, а другой — эффект снежного покрова, обновляемый каждую секунду. Благодаря сотрудничеству CSS и JavaScript реализуются макет, стиль и динамические эффекты страницы.

✨Заключение

Если вы это видите, значит, вы, должно быть, очень терпеливый и романтичный человек. Наконец, я желаю вам быть счастливым, счастливым и как можно скорее остаться одиноким, чтобы вам не приходилось беспокоиться о том, как поступить. выразите свою любовь ( ●'◡' ●)🤭

Рекомендация

Категории

функция html html5 анимация css

Новые посты

Углубленный анализ переполнения памяти CUDA: OutOfMemoryError: CUDA не хватает памяти. Попыталась выделить 3,21 Ги Б (GPU 0; всего 8,00 Ги Б).

[Решено] ошибка установки conda. Среда решения: не удалось выполнить первоначальное зависание. Повторная попытка с помощью файла (графическое руководство).

Прочитайте нейросетевую модель Трансформера в одной статье

.ART Теплые зимние предложения уже открыты

Сравнительная таблица описания кодов ошибок Amap

Уведомление о последних правилах Points Mall в декабре 2022 года.

Даже новички могут быстро приступить к работе с легким сервером приложений.

Взгляд на RSAC 2024｜Защита конфиденциальности в эпоху больших моделей

Вы используете ИИ каждый день и до сих пор не знаете, как ИИ дает обратную связь? Одна статья для понимания реализации в коде Python общих функций потерь генеративных моделей + анализ принципов расчета.

Используйте (внутренний) почтовый ящик для образовательных учреждений, чтобы использовать Microsoft Family Bucket (1T дискового пространства на одном диске и версию Office 365 для образовательных учреждений)

Руководство по началу работы с оперативным проектом (7) Практическое сочетание оперативного письма — оперативного письма на основе интеллектуальной системы вопросов и ответов службы поддержки клиентов

[docker] Версия сервера «Чтение 3» — создайте свою собственную программу чтения веб-текста

Обзор Cloud-init и этапы создания в рамках PVE

Корпоративные пользователи используют пакет регистрационных ресурсов для регистрации ICP для веб-сайта и активации оплаты WeChat H5 (с кодом платежного узла версии API V3)

Подробное объяснение таких показателей производительности с высоким уровнем параллелизма, как QPS, TPS, RT и пропускная способность.

Удачи в конкурсе Python Essay Challenge, станьте первым, кто испытает новую функцию сообщества [Запускать блоки кода онлайн] и выиграйте множество изысканных подарков!

[Техническая посадка травы] Кровавая рвота и отделка позволяют вам необычным образом ощипывать гусиные перья! Не распространяйте информацию! ! !

[Официальное ограниченное по времени мероприятие] Сейчас ноябрь, напишите и получите приз

Прочтите это в одной статье: Учебник для няни по созданию сервера Huanshou Parlu на базе CVM-сервера.

Cloud Native | Что такое CRD (настраиваемые определения ресурсов) в K8s?

Как использовать Cloudflare CDN для настройки узла (CF самостоятельно выбирает IP) Гонконг, Китай/Азия узел/сводка и рекомендации внутреннего высокоскоростного IP-сегмента