我公司的名字是另外两个单词的缩写。过去，我在Flash中创建了一个动画，其中两个单词"碰撞"产生了新的单词(公司名称)。现在可以使用CSS和JQuery的一些组合来实现类似的动画吗?
一个例子:
京瓷(表面上以他们的打印机而闻名)是由京都和陶瓷这两个词组合而成的。如果这是我的公司，我希望看到京都与陶瓷碰撞，到从京都的末端掉下来，mics从陶瓷的末端掉下来，结果京瓷留在屏幕上显示。可行的吗?
提前感谢任何和所有的帮助!
有淡出。可能会把京都分割成两个跨度"Kyo"one_answers"to"，换句话说，为"to"one_answers"mics"部分激活淡出淡出你想要淡出的部分，同时做一些类似的事情这样你就可以隐藏这些项目，剩下的项目一起滑动:
$(".con .item").click(function() {
$('.kill').hide("slow");
});
如果div之间没有空格，效果会更好，当然这些可以是一系列的图像组成你的标志:
<div class="con">
<div class="item keep">DIV 1</div><div class="item kill">DIV 2</div><div class="item kill">DIV 3</div><div class="item keep">DIV 4</div>
</div>
.item
{
width:50px;
height:50px;
margin:0;
padding:0;
display:inline-block;
position:relative;
background:lime;
cursor:pointer;
}
小提琴:http://jsfiddle.net/M8scf/31/
单词之间的空格将作为一个片段淡出，这样当条目淡出时，剩余的条目会一起滑动。当然，任何默认样式的边距/内边距都需要进行调整，以使最后两部分足够接近，或者您可以将最后两部分隐藏在一起，并使整个单词淡出。
添加了CSS3 http://jsfiddle.net/wRREe/2/的效果，只适用于现代浏览器。
JS
$('.kyoto').animate({
left: $('.ceramics').position().left - 27
}, 1000, function () {
$('.break_this').addClass('break_off');
});
CSS3:
.break_this {
position: absolute;
top: 0px;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
.break_off {
top: 50px;
opacity:0;
filter:alpha(opacity=0);
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
和CSS3演示: http://jsfiddle.net/wRREe/2/
DEMO without CSS3: http://jsfiddle.net/wRREe/1/
你可以实现几乎任何效果与一些努力在javascript。参见下面的方法