常见CSS点赞动画效果

常见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); } }

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