Javascript、Jquery 和 css3 振荡字母动画

Question

我是 JavaScript 新手，尤其是动画新手。我面临的挑战是让字母从侧面来回摆动最多 30 度。我上传的图片是动画的一个例子，字母将从右上角或图钉上移动，但我认为这更难。我需要一些指导，如果有人可以帮助请回复。提前致谢

因为我是新人，所以无法发布图片，所以这里是链接:/image/byzUC.png

Answer 1

嗯，这花费的时间比我愿意承认的要长得多，并且仅在(根据我自己有限的测试)Ubuntu 11.04 上的 Chromium 12+ 和 Firefox 5+ 中可靠(它不能在歌剧 11)。既然如此，我将只显示涵盖 Firefox 和 Chromium 的摘录，尽管链接的 JS Fiddle 有 vendor 前缀，至少可以尝试使用 Opera(即使失败)。使用以下标记:

<img src="/image/byzUC.png" id="envelope" />

以下 CSS 会产生一个(无限)振荡的信封，供您根据自己的喜好进行调整:

#envelope {
 -webkit-animation-name: oscillate;
 -webkit-animation-duration: 10s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: infinite;
 -moz-animation-name: oscillate;
 -moz-animation-duration: 10s;
 -moz-animation-iteration-count: 10;
 -moz-animation-direction: infinite;
}

@-webkit-keyframes oscillate {
    0% {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: 108px 23px;
    }
    33% {
    -webkit-transform: rotate(15deg);
    -webkit-transform-origin: 108px 23px;
    }
    100% {
    -webkit-transform: rotate(-20deg);
    -webkit-transform-origin: 108px 23px;
    }
}

@-moz-keyframes oscillate {
    0% {
    -moz-transform: rotate(0deg);
    -moz-transform-origin: 110px 26px;
    }
    33% {
    -moz-transform: rotate(15deg);
    -moz-transform-origin: 110px 26px;
    }
    100% {
    -moz-transform: rotate(-20deg);
    -moz-transform-origin: 110px 26px;
    }
}

JS Fiddle demo .

考虑到这种方法的失败率惊人(它在 Opera 11 中肯定行不通，我只能想象它在 IE 中一无所获......)我强烈建议使用一个动画 gif简单性和跨浏览器合规性。