好的,所以我有一个项目,我正在制作一个卡通版的电唱机。我希望侧面的播放按钮使用 webkit 切换记录旋转的动画,同时启动音轨。音轨很好,但现在肯定会从按钮影响 webkit。最好的方法是什么?我宁愿避免使用 JQuery。
任何向正确方向点头都会很棒。
您可以使用 CSS 转换和 CSS 动画来实现您想要的效果。以下演示展示了如何进行旋转:
div {
/* add -webkit, moz, and o prefixes to the property below */
/* change 2s to the time you want for one revolution */
animation: spin 2s linear infinite;
}
@keyframes spin {
/* both the keyframe above and the transform properties below need prefixes */
from {
transform:rotate(0deg) ;
}
to {
transform:rotate(360deg);
}
}
现在你有一些东西在旋转,你只需要触发它。最好的方法是在div
单击按钮时向(或您正在使用的元素)添加一个类。然后将动画属性添加到具有该类的选择器中,例如:
.spin-baby-spin {
animation: spin 2s linear infinite;
}