css 通知气泡+左右跳动效果

今天在做个人中心的时候用到了通知并使用了css动画+气泡效果，记录下。先上效果图

通知图标+通知数量（html）

<transition name="slide-fade">
   <i class="iconfont icon-notice" @click="showNotice=!showNotice"></i> <--通知图标 !-->
</transition>
<transition name="slide-fade">
    <span class="notice-box" v-if="noticeList.length>0" @click="showNotice=!showNotice">{{noticeList.length}}</span> <--通知数量 !-->
</transition>

通知列表（html）

<div class="notice" v-show="showNotice" v-for="(item,index) in noticeList" :key="index">
<ul v-if="noticeList.length>0">
  <li>
    <p><span>{{index+1}}.</span> {{item.title}}</p>
    <p> {{item.detail}}</p>
    <p> {{item.from}}<span class="f-r">{{item.add_time|getDateTime}}</span></p>
  </li>
</ul>
<ul v-else>
  <li>
    <p> 没有新的通知</p>
  </li>
</ul>
</div>

//通知图标用的阿里云iconfont这个需要自己去做
.icon-round::before{content: '';width: 5px;height: 5px;display: inline-block;background-color: red;border-radius: 50%;} //通知数量图标
.notice{position: absolute;right: 64px;width: 190px;background-color: rgb(255, 255, 255);font-size: 12px;top: 27px;padding: 10px;max-height: calc(100vh - 80px);box-shadow: 0px 0px 9px #46d5ff;z-index: 99;border-radius: 6px;animation: move 0.5s 0s;}
.notice:after{content: "";width: 0;height: 0;border-width: 0 7px 15px;border-style: solid;border-color: transparent transparent #fff;position: absolute;top: -6px;right: -6px;transform: rotate(45deg);} //右上角指向标
.notice li{padding-bottom: 6px;margin-bottom: 6px;border-bottom: 1px solid #eee;}
.notice li p{position: relative;padding-left: 18px;}
.notice li p:first-child {font-size: 14px;color: #03b8ee;}
.notice li p:first-child span{position: absolute;left: 0;line-height: 24px;color: #03b8ee;font-size: 16px;width: 18px;;text-align: left;}
.notice li p:nth-child(2) {font-size: 10px;color:  #03b8ee;margin: 6px 0;line-height: 16px;}
.notice li p:nth-child(3) {font-size: 10px;color:  #ddd;}

@keyframes move{ //左右跳动动画
25%{transform:translateX(4px);}
50%{transform:translateX(-4px);}
}