魅力四射！点赞支持率动画效果展现#

在看似平静的新春假期里，我带来「每周一个前端动画」的第二篇文章。需要说明的是，本文中分析实现的效果仅供参考学习，作为学习素材使用。

在上周展示了球队logo的展示效果之后，本周我们将在其下方放置一个条形图，用于展示球队的支持率。这个效果展示如下…

下面是实现动画的一些思路和注意点：

1. 首先，我们将整个动画效果分解成几个小部分。包括：

   • 条形图的显示和隐藏
   • 条形图颜色的变化
   • 支持率数字的显示和更新
   • 点击条形图增加支持率

2. 接下来，我们需要编写相应的HTML结构和CSS样式。

   • HTML结构：

     <div class="container">
       <div class="team-logo">
         <!-- 球队的logo -->
       </div>
       <div class="support-bar">
         <!-- 支持率条形图 -->
       </div>
       <div class="support-text">
         <!-- 支持率数字 -->
       </div>
     </div>
     

   • CSS样式：

     .container {
       width: 300px;
       height: 200px;
       border: 1px solid #ccc;
       padding: 20px;
       margin: 20px auto;
     }
     
     .team-logo {
       width: 100px;
       height: 100px;
       float: left;
     }
     
     .support-bar {
       width: 200px;
       height: 20px;
       background-color: #ccc;
       margin-left: 20px;
       margin-top: 10px;
       border-radius: 5px;
     }
     
     .support-text {
       font-size: 16px;
       color: #000;
       margin-top: 10px;
     }
     

3. 接下来，我们需要编写JavaScript代码来控制动画效果。

   • JavaScript代码：

     // 获取元素
     const supportBar = document.querySelector('.support-bar');
     const supportText = document.querySelector('.support-text');
     
     // 设置初始支持率
     let support = 0;
     
     // 点击条形图增加支持率
     supportBar.addEventListener('click', () => {
       // 增加支持率
       support += 1;
     
       // 更新支持率数字
       supportText.innerText = support;
     
       // 更新条形图宽度
       supportBar.style.width = `${support * 2}px`;
     
       // 更新条形图颜色
       if (support >= 50) {
         supportBar.style.backgroundColor = 'green';
       } else {
         supportBar.style.backgroundColor = 'red';
       }
     });
     

最终的效果如下：

支持率展示动画效果

当然，这个只是支持率展示的一个简单效果。我们可以根据自己的需求，实现更复杂的效果。