铰链摆动
以左上角为支点像铰链一样摆落。
效果预览
参数调节
完整代码
/* 铰链摆动 */
@keyframes swingHinge {
0% { transform: rotate(0); }
25% { transform: rotate(70deg); }
55% { transform: rotate(50deg); }
75% { transform: rotate(65deg); }
100% { transform: rotate(0); }
}
.swing-hinge { transform-origin: top left; animation: swingHinge 1s ease-in-out both; }