-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfinal.html
95 lines (88 loc) · 3.18 KB
/
final.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Card</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="./style1.css" />
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: url('galaxy.jpg') no-repeat center center fixed;
background-size: cover;
text-align: center;
}
#message {
font-size: 1em;
font-weight: bold;
line-height: 1em;
}
.char {
color: #000000; /* Đổi màu chữ thành trắng */
}
</style>
</head>
<body>
<div class="card">
<div class="outside">
<div class="front">
<p></p>
<p style="font-family: 'Arial', sans-serif;">Gửi Khánh Băng</p>
<div class="cake">
<div class="top-layer"></div>
<div class="middle-layer"></div>
<div class="bottom-layer"></div>
<div class="candle"></div>
</div>
</div>
<div class="back"></div>
</div>
<div class="inside">
<div id="message"></div>
<script>
const text = `
Gửi Khánh Băng (Vợ iu Cha Eun Woo)
🌹🌹🌹
Chúc cậu mỗi ngày đều là một ngày tràn đầy niềm vui, hạnh phúc và những khoảnh khắc đáng nhớ.
Cậu giống như một bông hoa xinh đẹp giữa đời, tỏa sắc hương dịu dàng khiến ai ở gần cũng thấy nhẹ nhàng, thư thái.
Hãy luôn giữ vững nụ cười thật tươi trên môi, bởi nó không chỉ là điểm nhấn xinh đẹp mà còn là nguồn năng lượng tích cực cho mọi người xung quanh.
Chúc cậu luôn khỏe mạnh, tràn đầy năng lượng, thành công trong học tập, công việc và cả những điều nhỏ bé mà cậu trân quý.
Hãy luôn tự tin và hạnh phúc nhé!
`;
const messageElement = document.getElementById('message');
let index = 0;
function typeEffect() {
if (index < text.length) {
const char = text[index];
if (char === '\n') {
const br = document.createElement('br');
messageElement.appendChild(br);
} else {
const span = document.createElement('span');
span.textContent = char;
span.className = 'char';
messageElement.appendChild(span);
}
index++;
setTimeout(typeEffect, 50);
}
}
typeEffect();
</script>
<h1>🎁</h1>
</div>
</div>
</div>
</body>
</html>