style="margin-left: 1em; margin-right: 1em;"
>
data-original-height="609"
data-original-width="1083"
height="360"
src="https://blogger.googleusercontent.com/img/a/AVvXsEith29rU3Sse86fsv8fzVJq9usVUPEEK-DXd38FzTe3jSCCDxyJQ4EuzE6Tc3VafNQ-nLEuD_yZj2esTFD0atS1aIJwHNvrEOgJheLr6EP-bdYNFbJcTun1xWy6LCp6ChQafdXU5EfAV5FuHO9etkPcsXMNH_qHP20E4269WNrObRIiSkyef1bg4-8eGsQ=w640-h360"
title="Cách làm hiệu ứng border đẹp mắt bằng HTML và CSS"
width="640"
/>
Chào mọi người!
Hôm nay, chúng ta sẽ bắt đầu một cuộc hành trình thú vị vào thế giới của
HTML và CSS để tạo ra một hiệu ứng viền hoạt hình (animated border effect)
độc đáo. Đây là một cách tuyệt vời để làm cho các phần tử trên trang web của
bạn trở nên sống động và nổi bật. Bạn có thể sử dụng hiệu ứng này để làm nổi
bật các phần tử như hình ảnh, nút, hoặc tiêu đề.
Chúng ta sẽ sử dụng ngôn ngữ lập trình HTML để xây dựng cấu trúc của trang
web và sử dụng CSS để thêm hiệu ứng viền hoạt hình cho các phần tử của chúng
ta. Không cần kiến thức lập trình chuyên sâu, bạn có thể theo dõi và thực
hiện theo từng bước một.
Hãy bắt đầu cuộc hành trình và khám phá cách tạo ra hiệu ứng viền hoạt hình
đẹp mắt bằng HTML và CSS!
Các bài viết liên quan:
target="_blank"
>Input Validator đơn giản bằng HTML, CSS và Javascript >
target="_blank"
>Animated Login Form đơn giản bằng HTML và CSS >
target="_blank"
>Sticky Header On Scroll đơn giản bằng HTML, CSS và
Javascript >
target="_blank"
>Password Strength Checker đơn giản bằng HTML, CSS và
Javascript >
target="_blank"
>Làm máy tính bỏ túi đơn giản bằng HTML, CSS và Javascript >
target="_blank"
>Làm đồng hồ treo tường đơn giản bằng HTML, CSS và
Javascript >
Bước 1: Thêm HTML
>
><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Border Animation Effect</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="content"></div>
</div>
</body>
</html>
Bước 2: Thêm CSS
>
>* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #242424;
}
.container {
position: relative;
height: 400px;
width: 400px;
padding: 4px;
background-color: #222;
border-radius: 16px;
overflow: hidden;
}
.container .content {
position: relative;
width: 100%;
height: 100%;
background-color: #222;
border-radius: 16px;
z-index: 10;
}
.container span {
position: absolute;
inset: -100px;
z-index: 5;
}
.container span:nth-child(1) {
background: conic-gradient(transparent,
transparent, transparent, #0079FF);
filter: blur(8px);
animation: rotation 4s linear infinite;
}
.container span:nth-child(2) {
background: conic-gradient(transparent,
transparent, transparent, #00DFA2);
filter: blur(8px);
animation: rotation 4s linear infinite;
animation-delay: -1s;
}
.container span:nth-child(3) {
background: conic-gradient(transparent,
transparent, transparent, #F6FA70);
filter: blur(8px);
animation: rotation 4s linear infinite;
animation-delay: -2s;
}
.container span:nth-child(4) {
background: conic-gradient(transparent,
transparent, transparent, #FF0060);
filter: blur(8px);
animation: rotation 4s linear infinite;
animation-delay: -3s;
}
@keyframes rotation {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
Full tutorial:
class="BLOG_video_class"
height="327"
src="https://www.youtube.com/embed/hwUDDt9Z6xs"
width="570"
youtube-src-id="hwUDDt9Z6xs"
>
Hoàn thành
Cuối cùng, chúng ta đã hoàn thành hướng dẫn về cách tạo hiệu ứng viền hoạt
hình bằng HTML và CSS. Điều quan trọng là thực hành và tùy chỉnh hiệu ứng
này để phù hợp với ý tưởng của bạn và phong cách thiết kế trang web của
bạn.
Nếu bạn đã theo dõi từng bước trong hướng dẫn này, bạn sẽ hiểu cách sử
dụng các thuộc tính CSS như @keyframes, animation, và border
để tạo ra hiệu ứng động ấn tượng. Hãy thử nghiệm và tạo ra những hiệu ứng
độc đáo của riêng bạn để làm cho trang web của bạn trở nên thú vị hơn.
Nhớ rằng, việc học và phát triển kỹ năng trong lĩnh vực phát triển web là
một quá trình liên tục. Đừng ngần ngại thử nghiệm, khám phá và tạo ra
những dự án thú vị mới. Chúc bạn thành công và hy vọng bạn tận hưởng việc
sáng tạo trong thế giới của HTML và CSS!
Cảm ơn bạn đã tham gia cùng chúng tôi trong hướng dẫn này. Nếu bạn có bất
kỳ câu hỏi hoặc muốn chia sẻ kết quả của bạn, xin vui lòng để lại bình
luận. Chúng tôi luôn sẵn sàng giúp đỡ. Chúc mọi người một ngày tốt lành và
hẹn gặp lại trong những hướng dẫn khác!