Cách Thêm Hiệu Ứng Click Chuột Cho Website Astro Và Blogger Bằng CSS JavaScript#

Giới thiệu#

Hiệu ứng click chuột là một cách đơn giản để cải thiện trải nghiệm người dùng và làm website trở nên sinh động hơn. Với Astro và Blogger, bạn có thể dễ dàng thêm các hiệu ứng tương tác bằng CSS và JavaScript mà không cần sử dụng thư viện phức tạp.

Bài viết này hướng dẫn cách tạo hiệu ứng click chuột, hiệu ứng con trỏ và tùy chỉnh animation cho blog cá nhân hoặc website công nghệ.

Tạo hiệu ứng click chuột là một trong những cách đơn giản nhưng hiệu quả để tăng cường tính tương tác cho website. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo hiệu ứng click chuột cho website xây dựng trên Astro hoặc Blogger.

Chuẩn Bị Trước Khi Tạo Hiệu Ứng#

Trước khi bắt đầu, bạn cần đảm bảo rằng website của bạn đã được thiết lập đầy đủ. Đảm bảo rằng bạn đã sử dụng Astro hoặc Blogger và có thể chỉnh sửa mã HTML hoặc CSS của trang.

Xác Định Loại Hiệu Ứng Bạn Muốn#

Có rất nhiều loại hiệu ứng click chuột mà bạn có thể tạo, từ những hiệu ứng đơn giản như thay đổi màu sắc cho đến các hiệu ứng phức tạp hơn như tạo hiệu ứng bùng nổ. Bạn cần xác định rõ loại hiệu ứng mà bạn muốn áp dụng trước khi đi vào chi tiết.

Cách Tạo Hiệu Ứng Click Đơn Giản Cho Astro#

Để tạo hiệu ứng click chuột đơn giản cho website Astro, bạn có thể sử dụng một đoạn mã CSS hoặc JavaScript. Ví dụ dưới đây sẽ thay đổi màu nền của một phần tử khi người dùng click vào nó.

Trong Astro, khái niệm Layout rất quan trọng. Bất kể bạn thiết kế Layout như thế nào, nói chung đều sẽ sử dụng <slot /> để chèn nội dung, và thông thường toàn bộ giao diện cuối cùng sẽ được bao bọc trong <BaseLayout />.

Do đó, nếu bạn muốn thêm một số hiệu ứng toàn cục, bạn có thể chỉnh sửa tệp src/layouts/BaseLayout.astro.

Đối với hiệu ứng con trỏ, bạn có thể thêm vào:

1
...
2
  <body class='flex justify-center bg-background'>
3
    <style define:vars={{ highlightColor }}>
4
      ...
5

6
      /* Kiểu hiệu ứng hạt khi nhấp chuột */
7
      :global(.click-particle) {
8
        position: fixed;
9
        pointer-events: none;
10
        width: 14px;
11
        height: 14px;
12
        border-radius: 50%;
13
        z-index: 9999;
14
        animation: particle-explosion 1.1s ease-out forwards;
15
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
16
      }
17

18
      /* Hiệu ứng hạt trong chủ đề tối */
19
      :global(.dark .click-particle) {
20
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
21
      }
22

23
      @keyframes particle-explosion {
24
        0% {
25
          opacity: 1;
26
          transform: scale(0.4) translate(0, 0);
27
        }
28
        15% {
29
          opacity: 1;
30
          transform: scale(1.3) translate(var(--dx), var(--dy));
31
        }
32
        60% {
33
          opacity: 0.8;
34
          transform: scale(1) translate(calc(var(--dx) * 2.5), calc(var(--dy) * 2.5));
35
        }
36
        100% {
37
          opacity: 0;
38
          transform: scale(0.3) translate(calc(var(--dx) * 3.5), calc(var(--dy) * 3.5));
39
        }
40
      }
41

42
      /* Màu hạt cho chủ đề sáng */
43
      :global(.click-particle.color-1) {
44
        background: #ffc1cc;
45
        background: radial-gradient(circle, #ffb3ba 0%, #ffc1cc 100%);
46
      }
47

48
      :global(.click-particle.color-2) {
49
        background: #bde4ff;
50
        background: radial-gradient(circle, #a8d8ff 0%, #bde4ff 100%);
51
      }
52

53
      :global(.click-particle.color-3) {
54
        background: #fff2a8;
55
        background: radial-gradient(circle, #ffe66d 0%, #fff2a8 100%);
56
      }
57

58
      :global(.click-particle.color-4) {
59
        background: #e6ccff;
60
        background: radial-gradient(circle, #d4a5ff 0%, #e6ccff 100%);
61
      }
62

63
      :global(.click-particle.color-5) {
64
        background: #c1ffc1;
65
        background: radial-gradient(circle, #a8e6a8 0%, #c1ffc1 100%);
66
      }
67

68
      :global(.click-particle.color-6) {
69
        background: #ffd4a3;
70
        background: radial-gradient(circle, #ffcc99 0%, #ffd4a3 100%);
71
      }
72

73
      :global(.click-particle.color-7) {
74
        background: #c4e8ff;
75
        background: radial-gradient(circle, #b3deff 0%, #c4e8ff 100%);
76
      }
77

78
      :global(.click-particle.color-8) {
79
        background: #f8d7da;
80
        background: radial-gradient(circle, #f5c2c7 0%, #f8d7da 100%);
81
      }
82

83
      :global(.click-particle.color-9) {
84
        background: #d1f2d1;
85
        background: radial-gradient(circle, #c3e6c3 0%, #d1f2d1 100%);
86
      }
87

88
      :global(.click-particle.color-10) {
89
        background: #fff0d4;
90
        background: radial-gradient(circle, #ffe8b3 0%, #fff0d4 100%);
91
      }
92

93
      /* Màu hạt cho chủ đề tối - đậm và rực rỡ hơn */
94
      :global(.dark .click-particle.color-1) {
95
        background: #ff6b8a;
96
        background: radial-gradient(circle, #ff4757 0%, #ff6b8a 100%);
97
      }
98

99
      :global(.dark .click-particle.color-2) {
100
        background: #4fc3f7;
101
        background: radial-gradient(circle, #29b6f6 0%, #4fc3f7 100%);
102
      }
103

104
      :global(.dark .click-particle.color-3) {
105
        background: #ffd54f;
106
        background: radial-gradient(circle, #ffca28 0%, #ffd54f 100%);
107
      }
108

109
      :global(.dark .click-particle.color-4) {
110
        background: #ba68c8;
111
        background: radial-gradient(circle, #ab47bc 0%, #ba68c8 100%);
112
      }
113

114
      :global(.dark .click-particle.color-5) {
115
        background: #81c784;
116
        background: radial-gradient(circle, #66bb6a 0%, #81c784 100%);
117
      }
118

119
      :global(.dark .click-particle.color-6) {
120
        background: #ffb74d;
121
        background: radial-gradient(circle, #ffa726 0%, #ffb74d 100%);
122
      }
123

124
      :global(.dark .click-particle.color-7) {
125
        background: #64b5f6;
126
        background: radial-gradient(circle, #42a5f5 0%, #64b5f6 100%);
127
      }
128

129
      :global(.dark .click-particle.color-8) {
130
        background: #f48fb1;
131
        background: radial-gradient(circle, #f06292 0%, #f48fb1 100%);
132
      }
133

134
      :global(.dark .click-particle.color-9) {
135
        background: #a5d6a7;
136
        background: radial-gradient(circle, #81c784 0%, #a5d6a7 100%);
137
      }
138

139
      :global(.dark .click-particle.color-10) {
140
        background: #ffe082;
141
        background: radial-gradient(circle, #ffd54f 0%, #ffe082 100%);
142
      }
143
    </style>
144

145
    ...
146
    <script>
147
      document.addEventListener('DOMContentLoaded', () => {
148
        function createParticle(
149
          x: number,
150
          y: number,
151
          angle: number,
152
          distance: number,
153
          colorIndex: number
154
        ) {
155
          const particle = document.createElement('div')
156
          particle.className = `click-particle color-${colorIndex}`
157
          const dx = Math.cos(angle) * distance
158
          const dy = Math.sin(angle) * distance
159
          particle.style.setProperty('--dx', dx + 'px')
160
          particle.style.setProperty('--dy', dy + 'px')
161
          particle.style.left = x + 'px'
162
          particle.style.top = y + 'px'
163
          const size = Math.random() * 6 + 8
164
          particle.style.width = size + 'px'
165
          particle.style.height = size + 'px'
166
          document.body.appendChild(particle)
167
          setTimeout(() => {
168
            if (particle.parentNode) {
169
              particle.parentNode.removeChild(particle)
170
            }
171
          }, 1100)
172
        }
173
        document.addEventListener('click', (e) => {
174
          const particleCount = 10
175
          const baseDistance = 18
176
          for (let i = 0; i < particleCount; i++) {
177
            const angle = ((Math.PI * 2) / particleCount) * i
178
            const distance = baseDistance + Math.random() * 8
179
            const colorIndex = (i % 10) + 1
180
            setTimeout(() => {
181
              createParticle(e.clientX, e.clientY, angle, distance, colorIndex)
182
            }, i * 12)
183
          }
184
          for (let i = 0; i < 4; i++) {
185
            const randomAngle = Math.random() * Math.PI * 2
186
            const randomDistance = baseDistance + Math.random() * 10
187
            const colorIndex = Math.floor(Math.random() * 10) + 1
188
            setTimeout(
189
              () => {
190
                createParticle(e.clientX, e.clientY, randomAngle, randomDistance, colorIndex)
191
              },
192
              (particleCount + i) * 12
193
            )
194
          }
195
        })
196
      })
197
    </script>
198
  </body>
199
</html>

Tạo Hiệu Ứng Click Cho Blogger#

Blogger cũng hỗ trợ việc thêm mã JavaScript để tạo hiệu ứng tương tác. Đoạn mã dưới đây giúp thay đổi màu nền của một phần tử khi người dùng click vào đó.

Vào giao diện Blogger Blogger > Bố cục > Thêm widget HTML/Javascript (hoặc chỉnh sửa widget có sẵn)
Copy code thêm vào widget

1
<!-- -->

1
<style>
2
.click-particle {
3
  position: fixed;
4
  pointer-events: none;
5
  width: 14px;
6
  height: 14px;
7
  border-radius: 50%;
8
  z-index: 9999;
9
  animation: particle-explosion 1.1s ease-out forwards;
10
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
11
}
12

13
.dark .click-particle {
14
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
15
}
16

17
@keyframes particle-explosion {
18
  0% {
19
    opacity: 1;
20
    transform: scale(0.4) translate(0, 0);
21
  }
22
  15% {
23
    opacity: 1;
24
    transform: scale(1.3) translate(var(--dx), var(--dy));
25
  }
26
  60% {
27
    opacity: 0.8;
28
    transform: scale(1) translate(calc(var(--dx) * 2.5), calc(var(--dy) * 2.5));
29
  }
30
  100% {
31
    opacity: 0;
32
    transform: scale(0.3) translate(calc(var(--dx) * 3.5), calc(var(--dy) * 3.5));
33
  }
34
}
35

36
.click-particle.color-1 {
37
  background: #ffc1cc;
38
  background: radial-gradient(circle, #ffb3ba 0%, #ffc1cc 100%);
39
}
40

41
.click-particle.color-2 {
42
  background: #bde4ff;
43
  background: radial-gradient(circle, #a8d8ff 0%, #bde4ff 100%);
44
}
45

46
.click-particle.color-3 {
47
  background: #fff2a8;
48
  background: radial-gradient(circle, #ffe66d 0%, #fff2a8 100%);
49
}
50

51
.click-particle.color-4 {
52
  background: #e6ccff;
53
  background: radial-gradient(circle, #d4a5ff 0%, #e6ccff 100%);
54
}
55

56
.click-particle.color-5 {
57
  background: #c1ffc1;
58
  background: radial-gradient(circle, #a8e6a8 0%, #c1ffc1 100%);
59
}
60

61
.click-particle.color-6 {
62
  background: #ffd4a3;
63
  background: radial-gradient(circle, #ffcc99 0%, #ffd4a3 100%);
64
}
65

66
.click-particle.color-7 {
67
  background: #c4e8ff;
68
  background: radial-gradient(circle, #b3deff 0%, #c4e8ff 100%);
69
}
70

71
.click-particle.color-8 {
72
  background: #f8d7da;
73
  background: radial-gradient(circle, #f5c2c7 0%, #f8d7da 100%);
74
}
75

76
.click-particle.color-9 {
77
  background: #d1f2d1;
78
  background: radial-gradient(circle, #c3e6c3 0%, #d1f2d1 100%);
79
}
80

81
.click-particle.color-10 {
82
  background: #fff0d4;
83
  background: radial-gradient(circle, #ffe8b3 0%, #fff0d4 100%);
84
}
85

86
.dark .click-particle.color-1 {
87
  background: #ff6b8a;
88
  background: radial-gradient(circle, #ff4757 0%, #ff6b8a 100%);
89
}
90

91
.dark .click-particle.color-2 {
92
  background: #4fc3f7;
93
  background: radial-gradient(circle, #29b6f6 0%, #4fc3f7 100%);
94
}
95

96
.dark .click-particle.color-3 {
97
  background: #ffd54f;
98
  background: radial-gradient(circle, #ffca28 0%, #ffd54f 100%);
99
}
100

101
.dark .click-particle.color-4 {
102
  background: #ba68c8;
103
  background: radial-gradient(circle, #ab47bc 0%, #ba68c8 100%);
104
}
105

106
.dark .click-particle.color-5 {
107
  background: #81c784;
108
  background: radial-gradient(circle, #66bb6a 0%, #81c784 100%);
109
}
110

111
.dark .click-particle.color-6 {
112
  background: #ffb74d;
113
  background: radial-gradient(circle, #ffa726 0%, #ffb74d 100%);
114
}
115

116
.dark .click-particle.color-7 {
117
  background: #64b5f6;
118
  background: radial-gradient(circle, #42a5f5 0%, #64b5f6 100%);
119
}
120

121
.dark .click-particle.color-8 {
122
  background: #f48fb1;
123
  background: radial-gradient(circle, #f06292 0%, #f48fb1 100%);
124
}
125

126
.dark .click-particle.color-9 {
127
  background: #a5d6a7;
128
  background: radial-gradient(circle, #81c784 0%, #a5d6a7 100%);
129
}
130

131
.dark .click-particle.color-10 {
132
  background: #ffe082;
133
  background: radial-gradient(circle, #ffd54f 0%, #ffe082 100%);
134
}
135
</style>
136

137
<script>//<![CDATA[
138
document.addEventListener('DOMContentLoaded', () => {
139
  function createParticle(
140
    x,
141
    y,
142
    angle,
143
    distance,
144
    colorIndex
145
  ) {
146
    const particle = document.createElement('div')
147
    particle.className = `click-particle color-${colorIndex}`
148
    const dx = Math.cos(angle) * distance
149
    const dy = Math.sin(angle) * distance
150

151
    particle.style.setProperty('--dx', dx + 'px')
152
    particle.style.setProperty('--dy', dy + 'px')
153

154
    particle.style.left = x + 'px'
155
    particle.style.top = y + 'px'
156

157
    const size = Math.random() * 6 + 8
158
    particle.style.width = size + 'px'
159
    particle.style.height = size + 'px'
160

161
    document.body.appendChild(particle)
162

163
    setTimeout(() => {
164
      if (particle.parentNode) {
165
        particle.parentNode.removeChild(particle)
166
      }
167
    }, 1100)
168
  }
169

170
  document.addEventListener('click', (e) => {
171
    const particleCount = 10
172
    const baseDistance = 18
173
    for (let i = 0; i < particleCount; i++) {
174
      const angle = ((Math.PI * 2) / particleCount) * i
175
      const distance = baseDistance + Math.random() * 8
176
      const colorIndex = (i % 10) + 1
177
      setTimeout(() => {
178
        createParticle(e.clientX, e.clientY, angle, distance, colorIndex)
179
      }, i * 12)
180
    }
181

182
    for (let i = 0; i < 4; i++) {
183
      const randomAngle = Math.random() * Math.PI * 2
184
      const randomDistance = baseDistance + Math.random() * 10
185
      const colorIndex = Math.floor(Math.random() * 10) + 1
186
      setTimeout(
187
        () => {
188
          createParticle(e.clientX, e.clientY, randomAngle, randomDistance, colorIndex)
189
        },
190
        (particleCount + i) * 12
191
      )
192
    }
193
  })
194
})
195
//]]></script>

Tối Ưu Hóa Hiệu Ứng Click#

Để đảm bảo rằng hiệu ứng click của bạn không gây phiền toái cho người dùng, hãy đảm bảo rằng bạn chỉ sử dụng hiệu ứng này cho những phần tử quan trọng và có tính tương tác cao, chẳng hạn như các nút bấm, liên kết, hoặc các phần tử được nhấn mạnh.

Tăng/giảm particleCount để nhiều hạt hơn
Đổi màu trong phần .color-X
Giảm thời gian để hiệu ứng nhanh hơn

Câu hỏi thường gặp về hiệu ứng click chuột cho website#

Có thể thêm hiệu ứng click chuột cho Astro không?#

Có. Astro cho phép thêm hiệu ứng toàn cục thông qua Layout, CSS và JavaScript.

Blogger có hỗ trợ hiệu ứng click chuột không?#

Có. Bạn có thể chèn CSS và JavaScript trực tiếp vào giao diện Blogger để tạo hiệu ứng.

Hiệu ứng click chuột có làm chậm website không?#

Nếu sử dụng mã JavaScript và CSS tối ưu, hiệu ứng có thể hoạt động nhẹ và không ảnh hưởng đáng kể đến hiệu suất.

Kết Luận#

Tạo hiệu ứng click chuột cho website Astro hoặc Blogger là một cách tuyệt vời để làm nổi bật các yếu tố quan trọng và cải thiện trải nghiệm người dùng. Hãy thử áp dụng các đoạn mã trên và tùy chỉnh để tạo ra các hiệu ứng thú vị cho website của bạn.

Nhạc