Đoạn mã trái tim của Thủ Khoa Lý, xuất hiện trong phim Chiếc bật lửa và váy công chúa, đã trở thành hiện tượng trên mạng xã hội. Không chỉ thu hút người làm IT, mà còn chinh phục trái tim của nhiều người muốn thử sức với lập trình. Dưới đây Công Ty Quảng Cáo Marketing Online Limoseo sẽ chỉ bạn những cách code trái tim của thủ khoa lý một cách dễ dàng.
MỤC LỤC
1. Cách code trái tim của thủ khoa lý có chèn hình ảnh
Ngoài việc sử dụng mã trái tim thông thường hoặc chèn chữ bên trong, bạn cũng có thể tạo code trái tim của thủ khoa lý bằng cách chèn hình ảnh. Hãy tưởng tượng, bạn chèn ảnh của bạn và người yêu vào trái tim và nó sẽ đập đều và phát sáng xung quanh. Dưới đây là cách bạn có thể thực hiện điều này một cách chi tiết.
- Bước 1: Trước hết, hãy truy cập đường link dưới để tải xuống thư mục chứa mã trái tim đập với chức năng chèn hình ảnh vào máy của bạn. Sau khi tải xuống, giải nén tệp tin.
- Bước 2: Tiếp theo, di chuyển tệp hình ảnh bạn muốn chèn vào cùng với thư mục chứa mã trái tim. Bằng cách này, bạn có thể chèn hình ảnh mới vào trái tim.
- Bước 3: Tiếp theo, sao chép tên của hình ảnh và xem định dạng của nó để sử dụng trong mã.
- Bước 4: Nhấp chuột phải vào tệp index.html > Chọn “Notepad” để mở tệp hoặc sử dụng công cụ đọc tệp HTML bạn đã cài đặt trên máy tính (nếu có).
- Bước 5: Bây giờ, bạn có thể bắt đầu chỉnh sửa mã theo ý muốn. Trong mục “EDIT Here”, bạn có thể điều chỉnh nội dung hiển thị trong trái tim. Tại dòng STARDUST1, bạn có thể thay đổi năm theo mong muốn.
- Trong phần STARDUST2, hãy điền tên của bạn cùng với tên của người yêu. Tại dòng STARDUST3, bạn có thể tự do điều chỉnh “Love You” thành bất kỳ ký tự nào bạn muốn.
- Ở phần “img”, hãy nhập tên và định dạng của hình ảnh bạn muốn chèn vào.
- Bước 6: Cuối cùng, nhấp vào “File” > Chọn “Lưu” để lưu lại công trình của bạn.
Tiếp theo, mở tệp HTML như bình thường để xem thành quả của bạn. Bạn đã hoàn thành!
2. Cách code trái tim thủ khoa lý có chữ hiển thị
Để code trái tim thủ khoa lý có chữ hiển thị, bạn có thể sử dụng đoạn mã dưới đây. Bạn có thể điều chỉnh nội dung theo ý muốn của mình:
“`html
<!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>Heartbeat</title>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
background: #000;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
#pinkboard {
position: relative;
margin: auto;
height: 500px;
width: 500px;
animation: animate 1.3s infinite;
}
#pinkboard:before, #pinkboard:after {
content: “”;
position: absolute;
background: #FF5CA4;
width: 100px;
height: 160px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
#pinkboard:before {
left: 100px;
transform: rotate(-45deg);
transform-origin: 0 100%;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
#pinkboard:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes animate {
0% {
transform: scale(1);
}
30% {
transform: scale(.8);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.center-text {
background-color: rgb(0, 0, 0);
width: 100%;
color: rgb(225, 12, 168);
height: 100%;
font-size: 31px;
font-style: italic;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class=”box”>
<canvas id=”pinkboard”></canvas>
</div>
<div class=”center-text”>Anh Yêu Em</div>
<script>
/* (Các đoạn mã JavaScript và CSS đã được giữ nguyên) */
</script>
</body>
</html>
“`
Trong đoạn mã này, bạn thấy đoạn chữ “Anh Yêu Em” đã được chèn vào giữa trái tim đang đập. Bạn có thể thay đổi nội dung của chữ này hoặc điều chỉnh các thuộc tính khác trong mã HTML và CSS để tùy chỉnh trang web của mình.
3. Cách code trái tim của thủ khoa lý không hiển thị tên
“`html
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> Trang Mới </TITLE>
<META NAME=”Generator” CONTENT=”EditPlus”>
<META NAME=”Author” CONTENT=””>
<META NAME=”Keywords” CONTENT=””>
<META NAME=”Description” CONTENT=””>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
background: #000;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</HEAD>
<BODY>
<canvas id=”pinkboard”></canvas>
<script>
/* (Các đoạn mã JavaScript và CSS đã được giữ nguyên) */
</script>
</BODY>
</HTML>
“`
Trong phiên bản này, mã đã được điều chỉnh để tạo ra một trái tim cơ bản mà không chứa tên hoặc chữ bên trong. Bạn có thể sử dụng mã này để tạo ra trang web của mình một cách dễ dàng và nhanh chóng.
4. Trend code trái tim bắt nguồn từ đâu?
Bạn bao giờ tự hỏi trend làm code trái tim bắt nguồn từ đâu không? Sự phổ biến của trend này thực sự bắt nguồn từ bộ phim Trung Quốc đang khiến lòng giới trẻ đổ gục, “Chiếc bật lửa và váy công chúa”. Cụ thể, tại tập 5 của bộ phim, nhân vật Lý Tuân, hay còn được biết đến như Thủ Khoa Lý, được Trần Phi Vũ thủ vai, đã sử dụng code để vẽ một trái tim màu hồng đặc biệt để tặng cho người anh yêu, Chu Vận (Trương Tịnh Nghi thủ vai).
Khung cảnh ngọt ngào này ngay lập tức thu hút sự chú ý của cộng đồng mạng Trung Quốc, khiến cho việc tạo ra các đoạn clip hoặc biến tấu về code trái tim trở nên phổ biến. Sự lan truyền này đã nhanh chóng lan ra cả Việt Nam, khiến cho trend này trở thành hiện tượng trên các nền tảng mạng xã hội như Facebook và TikTok.
Dưới sức nóng của trend này, ngoài phiên bản gốc, còn xuất hiện nhiều phiên bản độc đáo và ấn tượng, được sáng tạo bởi cộng đồng mạng, bao gồm cả code trái tim màu đỏ hay code trái tim có chữ được thêm vào…
Hy vọng những cách code trái tim của thủ khoa lý đơn giản ở trên sẽ giúp bạn hiểu thêm về cách thể hiện tình cảm đặc biệt này đối với người bạn đang thích. Đừng quên theo dõi trang Công Ty Quảng Cáo Marketing Online Limoseo để cập nhật mọi thông tin về công nghệ mới nhất hiện nay. Chúng tôi rất biết ơn mọi người đã dành thời gian để đọc bài viết này của chúng tôi.
