抖动动画是一种常见的动画效果,通过快速连续地改变元素的位置或属性,使其产生抖动的效果。下面是制作抖动动画的一种常见方法:
@keyframes shake {
0% { transform: translateX(0); }
10% { transform: translateX(-10px) rotate(-5deg); }
20% { transform: translateX(10px) rotate(5deg); }
30% { transform: translateX(-10px) rotate(-5deg); }
40% { transform: translateX(10px) rotate(5deg); }
50% { transform: translateX(-10px) rotate(-5deg); }
60% { transform: translateX(10px) rotate(5deg); }
70% { transform: translateX(-10px) rotate(-5deg); }
80% { transform: translateX(10px) rotate(5deg); }
90% { transform: translateX(-10px) rotate(-5deg); }
100% { transform: translateX(0); }
}
在上面的代码中,我们定义了一个名为"shake"的动画,通过改变元素的transform属性来实现抖动效果。关键帧的百分比表示动画的进度,0%表示动画开始时的样式,100%表示动画结束时的样式。
.element {
animation: shake 0.5s infinite;
}
在上面的代码中,我们将名为"shake"的动画应用到类名为"element"的元素上。通过animation属性,我们指定了动画的名称、持续时间和循环次数(这里使用infinite表示无限循环)。
@keyframes shake {
0% { transform: translateX(0); }
10% { transform: translateX(-20px) rotate(-10deg); }
20% { transform: translateX(20px) rotate(10deg); }
30% { transform: translateX(-20px) rotate(-10deg); }
40% { transform: translateX(20px) rotate(10deg); }
50% { transform: translateX(-20px) rotate(-10deg); }
60% { transform: translateX(20px) rotate(10deg); }
70% { transform: translateX(-20px) rotate(-10deg); }
80% { transform: translateX(20px) rotate(10deg); }
90% { transform: translateX(-20px) rotate(-10deg); }
100% { transform: translateX(0); }
}
.element {
animation: shake 1s infinite;
}
在上面的代码中,我们增加了translateX的位移和rotate的旋转,使抖动效果更加明显,并将动画的持续时间延长到1秒。
推荐的腾讯云相关产品和产品介绍链接地址:
请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求和情况进行。
视频云直播活动
技术创作101训练营
企业创新在线学堂
腾讯云GAME-TECH游戏开发者技术沙龙
腾讯技术创作特训营第二季第2期
云+社区技术沙龙[第8期]
腾讯云GAME-TECH游戏开发者技术沙龙
GAME-TECH
Hello Serverless 来了
腾讯云GAME-TECH沙龙
技术创作101训练营
领取专属 10元无门槛券
手把手带您无忧上云