style(CourseDetailPage): 为收藏按钮添加动画效果和过渡样式

为收藏按钮添加了动画效果和过渡样式，提升用户体验。动画在用户点击收藏时触发，按钮会有一个缩放效果，同时添加了过渡样式使变化更加平滑。

@@ -219,10 +219,10 @@
             </svg>
             </svg>
             分享
             分享
           </button> -->
           </button> -->
-          <button class="flex flex-col items-center text-gray-500 text-xs" @click="toggleFavorite">
+          <button class="flex flex-col items-center text-gray-500 text-xs transition-transform duration-300" @click="toggleFavorite" :class="{ 'animate-favorite': isFavorite }">
             <svg
             <svg
               xmlns="http://www.w3.org/2000/svg"
               xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
+              class="h-6 w-6 transition-transform duration-300"
               :fill="isFavorite ? 'red' : 'none'"
               :fill="isFavorite ? 'red' : 'none'"
               viewBox="0 0 24 24"
               viewBox="0 0 24 24"
               :stroke="isFavorite ? 'red' : 'currentColor'"
               :stroke="isFavorite ? 'red' : 'currentColor'"
@@ -345,3 +345,21 @@ onMounted(() => {
   }
   }
 })
 })
 </script>
 </script>
+
+<style scoped>
+.animate-favorite {
+  animation: favorite-animation 0.5s ease;
+}
+
+@keyframes favorite-animation {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.3);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>