Блогер:свет судьбы Столбец:веб-разработка (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>
🍓Здесь я должен сказать, что код не сложный, если вы умеете использовать HTML, CSS и JS. Новичкам его не понять, поэтому я решил прочитать следующее содержание, чтобы не делать этого. чтобы повлиять на впечатления от просмотра новичков ( ● '◡'ا), желаю всем счастья🎉🎉
🍓Функции и функции кода объясняются построчно ниже:
1. `<!DOCTYPE html>`:Объявите тип документа какHTML,Здесь используется объявление типа документа HTML5.
2. `<html>`:означает весьHTMLКорневой элемент документа。
3. `<head>`:Содержит метаданные о документе.итаблица стилей。
4. `<title>`:настраивать Название веб-страницы。
5. `<style>`:определить внутренниетаблица стилей,Стиль, используемый для настройки веб-страниц.
6. `body`: определяет содержимое страницы.
7. `#snow-container`: элемент, используемый для хранения эффектов снега.
8. `.snowflake`: Определите стиль элемента снежинки.
9. `@keyframes Snowfall`: определите анимацию ключевого кадра с именем `snowfall`.
10. `.heart`: Определите стиль элемента сердца.
11. `.heart:before` и `.heart:after`: определите стиль псевдоэлемента сердца, используемый для рисования двух половин сердца.
12. `#timeElapsed`: элемент, отображающий течение времени.
13. `<script>`:ВстроитьJavaScriptкод,Используется для достижения интерактивных и динамических эффектов на веб-страницах.
14. `function getTimeElapsed()`: Определите функцию для получения информации о ходе времени.
15. `setInterval(getTimeElapsed, 1000);`: вызывайте функцию `getTimeElapsed` каждую секунду, чтобы обновлять отображение промежутка времени.
16. `function createSnowflake()`: Определите функцию для создания снежинок.
Стиль снежинки, включая положение, продолжительность анимации, прозрачность, размер шрифта и цвет фона.
17. `function getRandomColor()`: определите функцию для получения случайного цвета.
18. `function Snowfall()`: функция, определяющая эффект падения снежинок.
19. `snowfall();`: вызовите функцию `snowfall`, чтобы запустить эффект снега.
20. `function createSakura()`: Определите функцию для создания Сакуры.
21. `setInterval(createSakura, 200);`: вызывайте функцию `createSakura` каждые 200 миллисекунд, чтобы создать эффект цветущей сакуры.
🍓🍓Этот код реализует веб-страницу с фоновым эффектом снега и сердечками и одновременно отображает два эффекта обратного отсчета: один — время, прошедшее с указанной даты, а другой — эффект снега, обновляемый каждую секунду. Благодаря сотрудничеству CSS и JavaScript реализуются макет, стиль и динамические эффекты страницы.
Если вы это видите, значит, вы, должно быть, очень терпеливый и романтичный человек. Наконец, я желаю вам быть счастливым, счастливым и как можно скорее остаться одиноким, чтобы вам не приходилось беспокоиться о том, как поступить. выразите свою любовь ( ●'◡' ●)🤭