• 确认报表统计方案
  • 统计维度
  • 数据收集
  • 数据展示
  • 复杂SQL的编写，Echarts报表的使用

报表统计方案

  • 统计维度：
    • 统计数值：总阅读数，总点赞数，今日阅读数，今日点赞数，今日预计阅读数，今日预计阅读增长
    • 统计报表：30天阅读/点赞趋势图、文档阅读量排名（热门文章）、文档点赞量排名（优质文章）
  • 业务表统计：所有报表数据都是从业务表直接获取的
    • 优点：实时性好（数据准确）、工作量
    • 缺点：对业务表性能有影响，有些统计无法实现（比如上面的今日阅读数，点赞数就没法统计）
  • 中间表统计：定时将业务表数据汇总到中间表，报表数据从中间表获取
    • 优点：性能好，可实现多功能统计
    • 缺点：工作量大，步骤多容易出错

电子书快照表设计

  • 概念：快照
  • 电子书快照表：一天存储一次快照

因为我们这个需要每天的统计数据，所以我们的快照是一天一次，也就是说每天要存储一次（条）当时的电子书的信息，我们下面就是电子书快照表的设计sql：

  1. drop table if exists `ebook_snapshot`;
  2. create table `ebook_snapshot` (
  3.     `id` bigint auto_increment not null comment 'id',
  4.     `ebook_id` bigint not null default 0 comment '电子书id',
  5.     `date` date not null comment '快照日期',
  6.     `view_count` int not null default 0 comment '阅读数',
  7.     `vote_count` int not null default 0 comment '点赞数',
  8.     `view_increase` int not null default 0 comment '阅读增长',
  9.     `vote_increase` int not null default 0 comment '点赞增长',
  10.     primary key (`id`),
  11.     unique key `ebook_id_date_unique` (`ebook_id`,`date`)
  12. ) engine=innodb default charset=utf8mb4 comment='电子书快照表'

这样的设计保证了每一天每一门电子书应该有一条数据，同时使用ebook_id和date作为唯一键，然后去gennerator-config.xml当中去最后添加下面的代码，并执行mybatis-gennerator生成持久层代码：

  1. <table tableName="ebook_snapshot"/>

电子书快照收集脚本编写

  • 从业务表收集数据的SQL尽量简单，不要影响业务表性能
  • 快照分成两个部分
    • 总量：总阅读数，总点赞数（总量简单，只需要从业务表直接把当前最新的数据把它放进来就可以了）
    • 增量：今日阅读数，今日点赞数（稍微复杂一些，把今天的总量减去昨天的总量，就是今天的增量）

我们的收集策略也不能简单的就是在23:59:59这个时间点去收集，而是应该每个小时收集一次，然后每天的第一次收集向表当中插入数据，后续的都来更新这条数据的值即可。所以我们应该先写insert，然后再update，需要更新的字段其中view_count和vote_count只需要从业务表当中取最新的数据即可，而view_increase和vote_increase需要一点计算，需要获取到昨天的view_count、vote_count和今天的view_count、vote_count，然后做差值。

下面我们来书写一下跑批的sql的四个步骤：

  • 第一步，为所有电子书生成一条今天的记录，如果还没有
  • 第二步，把今天的阅读数、点赞数全部更新进来
  • 第三步，根据今天和昨天的总数据来计算出这个阅读的增长

对应的sql如下：

  1. # 插入记录（如果今天没有数据的话）
  2. insert into ebook_snapshot(ebook_id, `date`, view_count, vote_count, view_increase, vote_increase)
  3. select t1.id, curdate(), 0, 0, 0, 0
  4. from ebook t1
  5. where not exists(select 1
  6.                  from ebook_snapshot t2
  7.                  where t1.id = t2.ebook_id
  8.                    and t2.`date` = curdate());
  10. # 更新view_count和vote_count
  11. update ebook_snapshot t1, ebook t2
  12. set t1.view_count = t2.view_count,t1.vote_count = t2.vote_count
  13. where t1.`date`=curdate()
  14. and t1.ebook_id = t2.id;
  16. #获取昨天的数据,两者做差
  17. update ebook_snapshot t1 left join (select ebook_id, view_count, vote_count from ebook_snapshot
  18. where `date` = date_sub(curdate(), interval 1 day)) t2
  19. on t1.ebook_id=t2.ebook_id
  20. set t1.view_increase = (t1.view_count-ifnull(t2.view_count, 0)),
  21.     t1.vote_increase = (t1.vote_count-ifnull(t2.vote_count, 0))
  22. where t1.`date` = curdate();

完成电子书快照任务

首先如果我们要在mybatis当中执行多个sql的话，我们需要在数据库的配置当中添加allowMultiQueries=true这样的参数，如下：

  2. # 增加数据库连接
  3. spring.datasource.url=jdbc:mysql://rm-hp3f05153598ck3e5vo.mysql.huhehaote.rds.aliyuncs.com/wikidev?characterEncoding=UTF8&autoReconnect=true&serverTimezone=Asia/Shanghai&allowMultiQueries=true

然后我们就开始倒着展示代码：

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
  3. <mapper namespace="com.taopoppy.wiki.mapper.EbookSnapshotMapperCust" >
  4.     <!--
  5.     # 方案一（ID不连续）：
  6.     #   删除今天的数据
  7.     #   为所有的电子书生成一条今天的记录
  8.     #   更新总阅读数、总点赞数
  9.     #   更新今日阅读数、今日点赞数
  10.     # 方案二（ID连续）：
  11.     #   为所有的电子书生成一条今天的记录，如果还没有
  12.     #   更新总阅读数、总点赞数
  13.     #   更新今日阅读数、今日点赞数
  14.     -->
  15.     <update id="genSnapshot">
  16.         insert into ebook_snapshot(ebook_id, `date`, view_count, vote_count, view_increase, vote_increase)
  17.         select t1.id, curdate(), 0, 0, 0, 0
  18.         from ebook t1
  19.         where not exists(select 1
  20.                          from ebook_snapshot t2
  21.                          where t1.id = t2.ebook_id
  22.                            and t2.`date` = curdate());
  24.         update ebook_snapshot t1, ebook t2
  25.         set t1.view_count = t2.view_count,
  26.             t1.vote_count = t2.vote_count
  27.         where t1.`date` = curdate()
  28.           and t1.ebook_id = t2.id;
  30.         update ebook_snapshot t1 left join (select ebook_id, view_count, vote_count
  31.                                             from ebook_snapshot
  32.                                             where `date` = date_sub(curdate(), interval 1 day)) t2
  33.             on t1.ebook_id = t2.ebook_id
  34.         set t1.view_increase = (t1.view_count - ifnull(t2.view_count, 0)),
  35.             t1.vote_increase = (t1.vote_count - ifnull(t2.vote_count, 0))
  36.         where t1.`date` = curdate();
  37.     </update>
  38. </mapper>
  1. package com.taopoppy.wiki.mapper;
  3. public interface EbookSnapshotMapperCust {
  4.     public void genSnapshot();
  5. }
  1. package com.taopoppy.wiki.service;
  3. import com.taopoppy.wiki.mapper.EbookSnapshotMapperCust;
  4. import org.springframework.stereotype.Service;
  6. import javax.annotation.Resource;
  8. @Service
  9. public class EbookSnapshotService {
  11.     @Resource
  12.     private EbookSnapshotMapperCust ebookSnapshotMapperCust;
  14.     public void genSnapshot() {
  15.         ebookSnapshotMapperCust.genSnapshot();
  16.     }
  18. }

最后我们在定时器当中去执行快照的程序：

  1. package com.taopoppy.wiki.job;
  3. import com.taopoppy.wiki.service.EbookSnapshotService;
  4. import com.taopoppy.wiki.util.SnowFlake;
  5. import org.slf4j.Logger;
  6. import org.slf4j.LoggerFactory;
  7. import org.slf4j.MDC;
  8. import org.springframework.scheduling.annotation.Scheduled;
  9. import org.springframework.stereotype.Component;
  11. import javax.annotation.Resource;
  13. @Component
  14. public class EbookSnapshotJob {
  16.     private static final Logger LOG = LoggerFactory.getLogger(EbookSnapshotJob.class);
  18.     @Resource
  19.     private EbookSnapshotService ebookSnapshotService;
  21.     @Resource
  22.     private SnowFlake snowFlake;
  24.     /**
  25.      * 自定义cron表达式跑批
  26.      * 只有等上一次执行完成，下一次才会在下一个时间点执行，错过就错过
  27.      */
  28.     @Scheduled(cron = "0 0/1 * * * ?")
  29.     public void doSnapshot() {
  30.         // 增加日志流水号
  31.         MDC.put("LOG_ID", String.valueOf(snowFlake.nextId()));
  32.         LOG.info("生成今日电子书快照开始");
  33.         Long start = System.currentTimeMillis();
  34.         ebookSnapshotService.genSnapshot();
  35.         LOG.info("生成今日电子书快照结束，耗时：{}毫秒", System.currentTimeMillis() - start);
  36.     }
  38. }

首页统计功能

1. 后端代码

首页包含数值统计和30天趋势图，所以我们从controller开始看看后端代码：

  1. @RestController
  2. @RequestMapping("/ebook-snapshot")
  3. public class EbookSnapshotController {
  5.     @Resource
  6.     private EbookSnapshotService ebookSnapshotService;
  8.     @GetMapping("/get-statistic")
  9.     public CommonResp getStatistic() {
  10.         List<StatisticResp> statisticResp = ebookSnapshotService.getStatistic();
  11.         CommonResp<List<StatisticResp>> commonResp = new CommonResp<>();
  12.         commonResp.setContent(statisticResp);
  13.         return commonResp;
  14.     }
  16.     @GetMapping("/get-30-statistic")
  17.     public CommonResp get30Statistic() {
  18.         List<StatisticResp> statisticResp = ebookSnapshotService.get30Statistic();
  19.         CommonResp<List<StatisticResp>> commonResp = new CommonResp<>();
  20.         commonResp.setContent(statisticResp);
  21.         return commonResp;
  22.     }
  24. }
  1. @Service
  2. public class EbookSnapshotService {
  4.     @Resource
  5.     private EbookSnapshotMapperCust ebookSnapshotMapperCust;
  7.     public void genSnapshot() {
  8.         ebookSnapshotMapperCust.genSnapshot();
  9.     }
  11.     /**
  12.      * 获取首页数值数据：总阅读数、总点赞数、今日阅读数、今日点赞数、今日预计阅读数、今日预计阅读增长
  13.      */
  14.     public List<StatisticResp> getStatistic() {
  15.         return ebookSnapshotMapperCust.getStatistic();
  16.     }
  18.     /**
  19.      * 30天数值统计
  20.      */
  21.     public List<StatisticResp> get30Statistic() {
  22.         return ebookSnapshotMapperCust.get30Statistic();
  23.     }
  25. }
  1. public interface EbookSnapshotMapperCust {
  3.     public void genSnapshot();
  5.     List<StatisticResp> getStatistic();
  7.     List<StatisticResp> get30Statistic();
  8. }
  1. package com.taopoppy.wiki.resp;
  3. import com.fasterxml.jackson.annotation.JsonFormat;
  5. import java.util.Date;
  7. public class StatisticResp {
  9.     @JsonFormat(pattern="MM-dd", timezone = "GMT+8")
  10.     private Date date;
  12.     private int viewCount;
  14.     private int voteCount;
  16.     private int viewIncrease;
  18.     private int voteIncrease;
  20.     public Date getDate() {
  21.         return date;
  22.     }
  24.     public void setDate(Date date) {
  25.         this.date = date;
  26.     }
  28.     public int getViewCount() {
  29.         return viewCount;
  30.     }
  32.     public void setViewCount(int viewCount) {
  33.         this.viewCount = viewCount;
  34.     }
  36.     public int getVoteCount() {
  37.         return voteCount;
  38.     }
  40.     public void setVoteCount(int voteCount) {
  41.         this.voteCount = voteCount;
  42.     }
  44.     public int getViewIncrease() {
  45.         return viewIncrease;
  46.     }
  48.     public void setViewIncrease(int viewIncrease) {
  49.         this.viewIncrease = viewIncrease;
  50.     }
  52.     public int getVoteIncrease() {
  53.         return voteIncrease;
  54.     }
  56.     public void setVoteIncrease(int voteIncrease) {
  57.         this.voteIncrease = voteIncrease;
  58.     }
  60.     @Override
  61.     public String toString() {
  62.         return "StatisticResp{" +
  63.                 "date=" + date +
  64.                 ", viewCount=" + viewCount +
  65.                 ", voteCount=" + voteCount +
  66.                 ", viewIncrease=" + viewIncrease +
  67.                 ", voteIncrease=" + voteIncrease +
  68.                 '}';
  69.     }
  70. }
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
  3. <mapper namespace="com.taopoppy.wiki.mapper.EbookSnapshotMapperCust" >
  4.     <!-- 获取首页数值数据：总阅读数、总点赞数、今日阅读数、今日点赞数、今日预计阅读数、今日预计阅读增长 -->
  5.     <select id="getStatistic" resultType="com.taopoppy.wiki.resp.StatisticResp">
  6.         select
  7.             t1.`date` as `date`,
  8.             sum(t1.view_count) as viewCount,
  9.             sum(t1.vote_count) as voteCount,
  10.             sum(t1.view_increase) as viewIncrease,
  11.             sum(t1.vote_increase) as voteIncrease
  12.         from
  13.             ebook_snapshot t1
  14.         where
  15.             t1.`date` >= date_sub(curdate(), interval 1 day)
  16.         group by
  17.             t1.`date`
  18.         order by
  19.             t1.`date` asc;
  20.     </select>
  22.     <select id="get30Statistic" resultType="com.taopoppy.wiki.resp.StatisticResp">
  23.         select
  24.             t1.`date` as `date`,
  25.             sum(t1.view_increase) as viewIncrease,
  26.             sum(t1.vote_increase) as voteIncrease
  27.         from
  28.             ebook_snapshot t1
  29.         where
  30.             t1.`date` between date_sub(curdate(), interval 30 day) and date_sub(curdate(), interval 1 day)
  31.         group by
  32.             t1.`date`
  33.         order by
  34.             t1.`date` asc;
  35.     </select>
  37. </mapper>

2. 前端代码

前端是需要去使用echarts的，所以我们可以将echarts.min.js直接拷到项目当中去，然后在index.html去引入即可，具体的统计页面我们写在了the-welcome.vue当中，代码如下：

  1. <template>
  2.   <div>
  3.     <div class="tip">
  4.       <div><b>示例网站说明（网站实现的功能课程都有手把手教）：</b></div>
  5.       <div>1. 统计数据是真实的，一分钟左右延时，<b>用到了定时器、复杂SQL统计、echarts</b></div>
  6.       <div>2. 有文档被别人点赞，你也会收到实时通知哦！<b>用到了websocket、异步化、RocketMQ、防重设计</b></div>
  7.       <div>3. 文档树可无限级扩展，支持文字、图片、视频。<b>用到了无限级树设计知识</b></div>
  8.       <div>4. 登录后可看到更多菜单。<b>用到了单点登录、前后端登录拦截、安全性设计</b></div>
  9.       <div>课程技术栈思维导图，
  10.         <a href="http://www.jiawablog.com/detail?id=152412053087326208" target="_blank">
  11.           点击查看：SpringBoot+Vue3
  12.         </a>
  13.       </div>
  14.       <div>你也想有个WIKI知识库吗？，<b>配套视频课程</b>：
  15.         <a href="https://coding.imooc.com/class/474.html" target="_blank">
  16.         《SpringBoot知识体系+Vue3全家桶 前后端分离 实战WIKI知识库系统》
  17.         </a>
  18.       </div>
  19.     </div>
  21.     <a-row>
  22.       <a-col :span="24">
  23.         <a-card>
  24.           <a-row>
  25.             <a-col :span="8">
  26.               <a-statistic title="总阅读量" :value="statistic.viewCount">
  27.                 <template #suffix>
  28.                   <UserOutlined />
  29.                 </template>
  30.               </a-statistic>
  31.             </a-col>
  32.             <a-col :span="8">
  33.               <a-statistic title="总点赞量" :value="statistic.voteCount">
  34.                 <template #suffix>
  35.                   <like-outlined />
  36.                 </template>
  37.               </a-statistic>
  38.             </a-col>
  39.             <a-col :span="8">
  40.               <a-statistic title="点赞率" :value="statistic.voteCount / statistic.viewCount * 100"
  41.                            :precision="2"
  42.                            suffix="%"
  43.                            :value-style="{ color: '#cf1322' }">
  44.                 <template #suffix>
  45.                   <like-outlined />
  46.                 </template>
  47.               </a-statistic>
  48.             </a-col>
  49.           </a-row>
  50.         </a-card>
  51.       </a-col>
  52.     </a-row>
  53.     <br>
  54.     <a-row :gutter="16">
  55.       <a-col :span="12">
  56.         <a-card>
  57.           <a-row>
  58.             <a-col :span="12">
  59.               <a-statistic title="今日阅读" :value="statistic.todayViewCount" style="margin-right: 50px">
  60.                 <template #suffix>
  61.                   <UserOutlined />
  62.                 </template>
  63.               </a-statistic>
  64.             </a-col>
  65.             <a-col :span="12">
  66.               <a-statistic title="今日点赞" :value="statistic.todayVoteCount">
  67.                 <template #suffix>
  68.                   <like-outlined />
  69.                 </template>
  70.               </a-statistic>
  71.             </a-col>
  72.           </a-row>
  73.         </a-card>
  74.       </a-col>
  75.       <a-col :span="12">
  76.         <a-card>
  77.           <a-row>
  78.             <a-col :span="12">
  79.               <a-statistic
  80.                 title="预计今日阅读"
  81.                 :value="statistic.todayViewIncrease"
  82.                 :value-style="{ color: '#0000ff' }"
  83.               >
  84.                 <template #suffix>
  85.                   <UserOutlined />
  86.                 </template>
  87.               </a-statistic>
  88.             </a-col>
  89.             <a-col :span="12">
  90.               <a-statistic
  91.                 title="预计今日阅读增长"
  92.                 :value="statistic.todayViewIncreaseRateAbs"
  93.                 :precision="2"
  94.                 suffix="%"
  95.                 class="demo-class"
  96.                 :value-style="statistic.todayViewIncreaseRate < 0 ? { color: '#3f8600' } : { color: '#cf1322' }"
  97.               >
  98.                 <template #prefix>
  99.                   <arrow-down-outlined v-if="statistic.todayViewIncreaseRate < 0"/>
  100.                   <arrow-up-outlined v-if="statistic.todayViewIncreaseRate >= 0"/>
  101.                 </template>
  102.               </a-statistic>
  103.             </a-col>
  104.           </a-row>
  105.         </a-card>
  106.       </a-col>
  107.     </a-row>
  108.     <br>
  109.     <a-row>
  110.       <a-col :span="24" id="main-col">
  111.         <div id="main" style="width: 100%;height:300px;"></div>
  112.       </a-col>
  113.     </a-row>
  114.   </div>
  115. </template>
  117. <script lang="ts">
  118.   import { defineComponent, ref, onMounted } from 'vue'
  119.   import axios from 'axios';
  121.   declare let echarts: any;
  123.   export default defineComponent({
  124.     name: 'the-welcome',
  125.     setup () {
  126.       const statistic = ref();
  127.       statistic.value = {};
  128.       const getStatistic = () => {
  129.         axios.get('/ebook-snapshot/get-statistic').then((response) => {
  130.           const data = response.data;
  131.           if (data.success) {
  132.             const statisticResp = data.content;
  133.             statistic.value.viewCount = statisticResp[1].viewCount;
  134.             statistic.value.voteCount = statisticResp[1].voteCount;
  135.             statistic.value.todayViewCount = statisticResp[1].viewIncrease;
  136.             statistic.value.todayVoteCount = statisticResp[1].voteIncrease;
  138.             // 按分钟计算当前时间点，占一天的百分比
  139.             const now = new Date();
  140.             const nowRate = (now.getHours() * 60 + now.getMinutes()) / (60 * 24);
  141.             // console.log(nowRate)
  142.             statistic.value.todayViewIncrease = parseInt(String(statisticResp[1].viewIncrease / nowRate));
  143.             // todayViewIncreaseRate：今日预计增长率
  144.             statistic.value.todayViewIncreaseRate = (statistic.value.todayViewIncrease - statisticResp[0].viewIncrease) / statisticResp[0].viewIncrease * 100;
  145.             statistic.value.todayViewIncreaseRateAbs = Math.abs(statistic.value.todayViewIncreaseRate);
  146.           }
  147.         });
  148.       };
  150.       const init30DayEcharts = (list: any) => {
  151.         // 发布生产后出现问题：切到别的页面，再切回首页，报表显示不出来
  152.         // 解决方法：把原来的id=main的区域清空，重新初始化
  153.         const mainDom = document.getElementById('main-col');
  154.         if (mainDom) {
  155.           mainDom.innerHTML = '<div id="main" style="width: 100%;height:300px;"></div>';
  156.         }
  157.         // 基于准备好的dom，初始化echarts实例
  158.         const myChart = echarts.init(document.getElementById('main'));
  160.         const xAxis = [];
  161.         const seriesView = [];
  162.         const seriesVote = [];
  163.         for (let i = 0; i < list.length; i++) {
  164.           const record = list[i];
  165.           xAxis.push(record.date);
  166.           seriesView.push(record.viewIncrease);
  167.           seriesVote.push(record.voteIncrease);
  168.         }
  170.         // 指定图表的配置项和数据
  171.         const option = {
  172.           title: {
  173.             text: '30天趋势图'
  174.           },
  175.           tooltip: {
  176.             trigger: 'axis'
  177.           },
  178.           legend: {
  179.             data: ['总阅读量', '总点赞量']
  180.           },
  181.           grid: {
  182.             left: '1%',
  183.             right: '3%',
  184.             bottom: '3%',
  185.             containLabel: true
  186.           },
  187.           toolbox: {
  188.             feature: {
  189.               saveAsImage: {}
  190.             }
  191.           },
  192.           xAxis: {
  193.             type: 'category',
  194.             boundaryGap: false,
  195.             data: xAxis
  196.           },
  197.           yAxis: {
  198.             type: 'value'
  199.           },
  200.           series: [
  201.             {
  202.               name: '总阅读量',
  203.               type: 'line',
  204.               // stack: '总量', 不堆叠
  205.               data: seriesView,
  206.               smooth: true
  207.             },
  208.             {
  209.               name: '总点赞量',
  210.               type: 'line',
  211.               // stack: '总量', 不堆叠
  212.               data: seriesVote,
  213.               smooth: true
  214.             }
  215.           ]
  216.         };
  218.         // 使用刚指定的配置项和数据显示图表。
  219.         myChart.setOption(option);
  220.       };
  222.       const get30DayStatistic = () => {
  223.         axios.get('/ebook-snapshot/get-30-statistic').then((response) => {
  224.           const data = response.data;
  225.           if (data.success) {
  226.             const statisticList = data.content;
  228.             init30DayEcharts(statisticList)
  229.           }
  230.         });
  231.       };
  233.       const testEcharts = () => {
  234.         // 基于准备好的dom，初始化echarts实例
  235.         const myChart = echarts.init(document.getElementById('main'));
  237.         // 指定图表的配置项和数据
  238.         const option = {
  239.           title: {
  240.             text: 'ECharts 入门示例'
  241.           },
  242.           tooltip: {},
  243.           legend: {
  244.             data:['销量']
  245.           },
  246.           xAxis: {
  247.             data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  248.           },
  249.           yAxis: {},
  250.           series: [{
  251.             name: '销量',
  252.             type: 'bar',
  253.             data: [5, 20, 36, 10, 10, 20]
  254.           }]
  255.         };
  257.         // 使用刚指定的配置项和数据显示图表。
  258.         myChart.setOption(option);
  259.       };
  261.       onMounted(() => {
  262.         getStatistic();
  263.         // testEcharts();
  264.         get30DayStatistic();
  265.       });
  267.       return {
  268.         statistic
  269.       }
  270.     }
  271.   });
  272. </script>
  273. <style scoped>
  274.   .tip {
  275.     padding: 10px 5px;
  276.     margin-bottom: 20px;
  277.     border: 1px solid transparent;
  278.     background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0/.6em .6em;
  279.     animation:ants 12s linear infinite;
  280.   }
  281.   .tip b{
  282.     color: red;
  283.   }
  284. </style>