Trong thiết kế giao diện web, việc kết hợp các thuộc tính CSS cơ bản như border-radius, box-shadow và transform có thể tạo ra những hiệu ứng hình ảnh phức tạp và bắt mắt. Bài viết này sẽ hướng dẫn cách xây dựng các hiệu ứng cánh hoa xoay và phát sáng thông qua CSS Animation.
1. Tạo hình cánh hoa cơ bản
Bằng cách tận dụng thuộc tính border-radius, chúng ta có thể biến một khối hình vuông thành hình cánh hoa. Ví dụ, với một phần tử có kích thước 100x100px, việc thiết lập border-radius: 0 100% 0 100%; sẽ làm bo tròn hai góc đối diện, tạo ra hình dáng lá hoặc cánh hoa đơn giản.
Khi kết hợp bốn cánh hoa này lại và áp dụng hoạt ảnh xoay, chúng ta sẽ có một bông hoa bốn cánh hoàn chỉnh. Dưới đây là cách triển khai:
<!DOCTYPE html>
<html>
<head>
<style>
.canvas {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 40px auto;
width: 350px;
height: 350px;
background: #ececec;
border: 5px solid #ff4d4d;
border-radius: 15px;
overflow: hidden;
}
.flower-box {
width: 160px;
height: 160px;
display: flex;
flex-wrap: wrap;
animation: spin-around 3s linear infinite;
}
.leaf {
width: 80px;
height: 80px;
background-color: #e60000;
}
.leaf:nth-child(1), .leaf:nth-child(4) {
border-radius: 0 100% 0 100%;
}
.leaf:nth-child(2), .leaf:nth-child(3) {
border-radius: 100% 0 100% 0;
}
@keyframes spin-around {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="canvas">
<div class="flower-box">
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
</div>
</div>
</body>
</html>
2. Xây dựng hoa nhiều cánh bằng định vị tuyệt đối
Để tạo ra các bông hoa có cấu trúc phức tạp hơn (như 5 hoặc 6 cánh), phương pháp sử dụng float hoặc flex sẽ không còn tối ưu. Thay vào đó, chúng ta sử dụng position: absolute kết hợp với transform-origin để xoay các cánh hoa quanh một tâm cố định.
<style>
.stage {
position: relative;
width: 300px;
height: 300px;
margin: auto;
background: #f0f0f0;
}
.pentagon-flower {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
animation: rotate-main 4s linear infinite;
}
.single-petal {
position: absolute;
width: 80px;
height: 80px;
background: #ff5e5e;
border-radius: 0 100% 0 100%;
transform-origin: bottom right;
bottom: 0;
right: 0;
}
/* Xoay mỗi cánh hoa một góc 72 độ (360/5) */
.single-petal:nth-child(2) { transform: rotate(72deg); }
.single-petal:nth-child(3) { transform: rotate(144deg); }
.single-petal:nth-child(4) { transform: rotate(216deg); }
.single-petal:nth-child(5) { transform: rotate(288deg); }
@keyframes rotate-main {
100% { transform: rotate(360deg); }
}
</style>
3. Hiệu ứng cánh hoa phát sáng (Neon Glow)
Bằng cách sử dụng box-shadow, chúng ta có thể tạo ra hiệu ứng ánh sáng neon bao quanh cánh hoa. Kết hợp với biến CSS (CSS Variables), việc quản lý vị trí và thời gian trễ (delay) của từng cánh hoa trở nên linh hoạt hơn.
<!DOCTYPE html>
<html>
<head>
<style>
.neon-container {
position: relative;
margin: 60px auto;
width: 400px;
height: 400px;
background: #2c3e50;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
}
.glow-flower {
position: relative;
width: 200px;
height: 200px;
animation: global-spin 5s linear infinite;
}
.glow-petal {
position: absolute;
height: 70px;
width: 25px;
background-color: #fff;
border-radius: 0 150px 0 150px;
/* Hiệu ứng bóng đổ tạo độ phát sáng */
box-shadow: inset 0 0 5px #00fbff, 0 0 15px #00fbff;
top: var(--y);
left: var(--x);
transform: rotate(var(--rot));
animation: pulse-light 1.5s var(--dly) infinite;
}
@keyframes pulse-light {
0%, 100% { opacity: 1; }
50% {
box-shadow: inset 0 0 5px #ff00de, 0 0 20px #ff00de;
}
}
@keyframes global-spin {
to { transform: rotate(-360deg); }
}
</style>
</head>
<body>
<div class="neon-container">
<div class="glow-flower">
<div class="glow-petal" style="--x: 85px; --y: 10px; --rot: 0deg; --dly: 0s;"></div>
<div class="glow-petal" style="--x: 140px; --y: 35px; --rot: 45deg; --dly: 0.2s;"></div>
<div class="glow-petal" style="--x: 160px; --y: 90px; --rot: 90deg; --dly: 0.4s;"></div>
<div class="glow-petal" style="--x: 140px; --y: 145px; --rot: 135deg; --dly: 0.6s;"></div>
<div class="glow-petal" style="--x: 85px; --y: 165px; --rot: 180deg; --dly: 0.8s;"></div>
<div class="glow-petal" style="--x: 30px; --y: 145px; --rot: 225deg; --dly: 1.0s;"></div>
<div class="glow-petal" style="--x: 10px; --y: 90px; --rot: 270deg; --dly: 1.2s;"></div>
<div class="glow-petal" style="--x: 30px; --y: 35px; --rot: 315deg; --dly: 1.4s;"></div>
</div>
</div>
</body>
</html>
Kỹ thuật này cho phép tạo ra các thành phần giao diện động mà không cần dùng đến hình ảnh hay JavaScript phức tạp. Việc thay đổi màu sắc trong box-shadow hoặc điều chỉnh animation-duration sẽ giúp bạn tùy biến bông hoa theo nhiều phong cách khác nhau.