如何让页面居中固定的WhatsApp按钮在交互前闪烁？

步骤1：调整按钮为居中固定定位 #

原插件的position参数仅支持left/right，需通过自定义CSS覆盖默认定位样式，同时保留插件原有交互功能：

#WAButton .floating-wpp {
  position: fixed;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
}

步骤2：添加闪烁脉冲动画样式 #

实现参考示例的闪烁效果，通过CSS动画完成：

/* 定义脉冲闪烁动画 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    transform: translate(-50%, 50%) scale(1);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
    transform: translate(-50%, 50%) scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    transform: translate(-50%, 50%) scale(1);
  }
}

/* 初始状态绑定动画 */
#WAButton .floating-wpp {
  animation: pulse 2s infinite;
}

/* hover或点击时停止动画 */
#WAButton .floating-wpp:hover,
#WAButton .floating-wpp.active {
  animation: none;
}

步骤3：整合完整代码 #

调整JS配置并将所有代码整合，确保功能正常：

<!-- Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Floating WhatsApp css -->
<link rel="stylesheet" href="https://rawcdn.githack.com/rafaelbotazini/floating-whatsapp/3d18b26d5c7d430a1ab0b664f8ca6b69014aed68/floating-wpp.min.css">
<!-- 自定义样式 -->
<style>
#WAButton .floating-wpp {
  position: fixed;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    transform: translate(-50%, 50%) scale(1);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
    transform: translate(-50%, 50%) scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    transform: translate(-50%, 50%) scale(1);
  }
}

#WAButton .floating-wpp {
  animation: pulse 2s infinite;
}

#WAButton .floating-wpp:hover,
#WAButton .floating-wpp.active {
  animation: none;
}
</style>
<!-- Floating WhatsApp javascript -->
<script type="text/javascript" src="https://rawcdn.githack.com/rafaelbotazini/floating-whatsapp/3d18b26d5c7d430a1ab0b664f8ca6b69014aed68/floating-wpp.min.js"></script>

<body>
<!-- WhatsApp按钮渲染容器 -->
<div id="WAButton"></div>

<script>
$(function() {
  $('#WAButton').floatingWhatsApp({
    phone: '1231231231', // WhatsApp Business国际格式号码
    headerTitle: '通过WhatsApp联系我们！', // 弹窗标题
    popupMessage: '您好，请问有什么可以帮您的？', // 弹窗消息
    showPopup: true, // 是否显示弹窗
    buttonImage: '<img src="https://rawcdn.githack.com/rafaelbotazini/floating-whatsapp/3d18b26d5c7d430a1ab0b664f8ca6b69014aed68/whatsapp.svg" />', // 按钮图标
    position: "right" // 插件默认定位，后续会被自定义CSS覆盖
  });
});
</script>
</body>

效果说明 #

• 按钮默认处于屏幕居中位置，持续播放脉冲闪烁动画
• 用户hover或点击按钮时，动画自动停止，避免干扰交互
• 保留原插件的弹窗、聊天等所有功能

内容的提问来源于stack exchange，提问作者sai sai