Danh Mục Bài Viết
Ok anh em, Vậy là sắp sang năm mới 2024 rồi. Tính từ thời điểm mình viết bài viết này là 30/12/2023 là chỉ còn một ngày nữa thôi. Để tạo điều kiện cho mấy anh em coder tay ngang chúng ta Flex nhẹ với Bà con đồng nghiệp. Sau đây mình sẽ hướng dẫn anh em tạo hiệu ứng Pháo hoa cho website với Html và Css nhé!
Đầu tiên mình sẽ tạo một file index.html và có đôi dòng Css ngay trong đó như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FireWork</title>
</head>
<style>
body {
width: 100vw;
background-color: #1b2845;
background-image: linear-gradient(315deg, #1b2845 0%, #274060 74%);
}
</style>
<body>
</body>
</html>Và chúng ta có:
Nhìn khá nhàm chán đúng không? Bình tĩnh nhé!. Các bạn hãy tạo cho mình một file firework.css và cho đoạn code sau vào:
/* fire work */
@keyframes firework {
0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
50% { width: 0.5vmin; opacity: 1; }
100% { width: var(--finalSize); opacity: 0; }
}
.firework,
.firework::before,
.firework::after
{
--initialSize: 0.5vmin;
--finalSize: 45vmin;
--particleSize: 0.2vmin;
--color1: yellow;
--color2: khaki;
--color3: white;
--color4: lime;
--color5: gold;
--color6: mediumseagreen;
--y: -30vmin;
--x: -50%;
--initialY: 60vmin;
content: "";
animation: firework 2s infinite;
position: absolute;
z-index: 9999999;
top: 50%;
left: 50%;
transform: translate(-50%, var(--y));
width: var(--initialSize);
aspect-ratio: 1;
background:
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
/* bottom right */
radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
/* bottom left */
radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
/* top left */
radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
/* top right */
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%
;
background-size: var(--initialSize) var(--initialSize);
background-repeat: no-repeat;
}
.firework::before {
--x: -50%;
--y: -50%;
--initialY: -50%;
transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
}
.firework::after {
--x: -50%;
--y: -50%;
--initialY: -50%;
transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
}
.firework:nth-child(2) {
--x: 30vmin;
}
.firework:nth-child(2),
.firework:nth-child(2)::before,
.firework:nth-child(2)::after {
--color1: pink;
--color2: violet;
--color3: fuchsia;
--color4: orchid;
--color5: plum;
--color6: lavender;
--finalSize: 40vmin;
left: 30%;
top: 60%;
animation-delay: -0.25s;
}
.firework:nth-child(3) {
--x: -30vmin;
--y: -50vmin;
}
.firework:nth-child(3),
.firework:nth-child(3)::before,
.firework:nth-child(3)::after {
--color1: cyan;
--color2: lightcyan;
--color3: lightblue;
--color4: PaleTurquoise;
--color5: SkyBlue;
--color6: lavender;
--finalSize: 35vmin;
left: 70%;
top: 60%;
animation-delay: -0.4s;
}
Các bạn đừng quên link file firework.css vào file index.html nhé!. Tiếp theo bạn quay lại file index.html và thêm đoạn code sau và bên trong thẻ body:
<h1>MINACODE - HAPPY NEW YEAR</h1>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>Anh em chọn cái Font chữ xịn xò chút và thêm một số dòng Css nữa cho anh H1, và anh body
Ta được file index.html hoàn chình:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="firework.css">
<title>FireWork</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap');
body {
min-height: 100vh;
background-image: linear-gradient(315deg, #1b2845 0%, #274060 74%);
text-align: center;
align-items: center;
display: flex;
justify-content: center;
}
h1 {
background: -webkit-linear-gradient(#0B486B,#F56217);
background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'Comfortaa', sans-serif;
font-size: 70px;
font-weight: bold;
}
</style>
<body>
<h1>MINACODE - HAPPY NEW YEAR</h1>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
</body>
</html>Ok, bây giờ thì ra ngoài và xem thành quả thôi. Mình sẽ chụp màn hình của mình hiện tại cho các bạn xem nhé!
Các bạn nhớ hãy vẫn dụng và thêm vào các vị trí trong website cho phù hợp nhé!
Bài viết này cũng sẽ đánh dấu kết thúc chuỗi bài viết của minacode trong năm 2023. Kính chúc anh em coder lơ tơ mơ chúng ta học được thêm nhiều skills nữa trong năm 2024 nhé!
Cảm ơn các bạn! Happy New Year.
.png)
.png)
-min.png)
Banker To Coder
Hi All,
Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.
Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình chưa bao giờ tham gia bất cứ một trường lớp nào về lập trình. Tất cả kiến thức mình chia sẻ đều là trên tình thần tự học. Do đó:
+ MinaCode phù hợp với những tay ngang, xem lập trình như là một kỹ năng bổ trợ trong công việc hay là một kênh kiếm thêm thu nhập từ những very mini projects.
+ MinaCode không phù hợp với những bạn đang được đào tạo bài bản, chính quy.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
--Ngô Sỹ Nguyên--
.png)
