写一个hbuilderx的动态爱心代码

在HBuilderX中创建一个动态爱心图标通常涉及到使用Vite或Vue相关的语法。以下是一个简单的示例，展示了如何使用Vue.js和`<template>`、`<style>`以及`<script>`部分来创建一个可以改变颜色的爱心动画：

<!-- HBuilderX页面 -->
<template>
  <div class="dynamic-heart" :style="{ color: heartColor }">
    <svg width="50" height="50">
      <path d="M40,6V24l-8,-8L40,14l8,-8V6" fill="#FF0000"></path>
      <path d="M22,22v-8l8,8 8,-8v8" fill="#00FF00"></path>
    </svg>
  </div>
</template>

<style scoped>
.dynamic-heart {
  position: relative;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
</style>

<script>
export default {
  data() {
    return {
      heartColor: 'red', // 可以通过props传递改变颜色
    };
  },
};
</script>

这个代码首先定义了一个SVG路径表示爱心形状，并设置了两个路径分别填充红色和绿色。然后通过`:style`绑定数据属性`heartColor`来控制爱心的颜色。`pulse`动画使得爱心看起来像是有节奏地跳动。

你可以将此代码复制到HBuilderX项目的一个`.vue`文件中，然后通过父组件传入`heartColor`值或者在适当的时候改变它，来创建动态效果。