常见CSS点赞动画效果

CSS3实现动画效果

用法

• 首先先定义一个动画样式
• 然后定义一个类名 把定义的动画赋值上去
• 需要的时候可以给节点添加类名

注意 ： 以上是针对，对动画有基础的同学，如果没有基础，也不用担心哦~
可以参考菜鸟教程的教学课程自行学习哦~

示例一：点击放大缩小

***~~~~html~~~~***  

 <div onclick="thumpDown" class="{{ClickStatus?'animate':''}}"></div>
 
 ***~~样式动画效果~~*** 
 .animate {
        animation: scaleDraw 1s ease-in-out;
    }
  /* 点赞动画效果 */
  @keyframes scaleDraw{
    0% {
           transform: scale(1);  /*开始为原始大小*/
    }
    25% {
          transform: scale(1.1); /*放大1.1倍*/
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.1);
    }
   
  }

示例二：点击冒泡浮动

*****动画效果*********

@keyframes Clickfd {
    0% {
        top:0px; 
    }
    10% {
        top:-3px; 
    }
    20% {
        top:-6px; 
    }
    30% {
        top:-9px; 
    }
    40% {
        top:-12px; 
        transform: rotate(6deg);
    }
    50% {
        top:-15px; 
        transform: rotate(12deg);
    }
    60% {
        top:-18px; 
        transform: rotate(6deg);
    }
    70% {
        top:-21px;
        transform: rotate(0deg);
    }
    80% {
        top:-24px;
        transform: rotate(-6deg);
    }
    90% {
        top:-27px;
        transform: rotate(-12deg);
    }
    100% {
        top:-30px;
        transform: rotate(-6deg);
    }
}

留言：
以上就是简单的两个比较简单的动画效果，后续有好的动画效果会持续更新~