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);
}
}
留言:
以上就是简单的两个比较简单的动画效果,后续有好的动画效果会持续更新~