1

我公司的名称是另外两个词的缩写。过去，我在 Flash 中创建了一个动画，其中两个单词“碰撞”产生了新单词（公司名称）。现在可以使用 CSS 和 JQuery 的某种组合来实现类似的动画吗？

一个例子：

京瓷（表面上以其打印机而闻名）通过收缩两个词来获得它的名字 -京都和陶瓷。如果这是我的公司，我希望看到Kyoto与Ceramics的碰撞，to从Kyoto 的末端掉落，麦克风从Ceramics的末端掉落，由此产生的京瓷留在屏幕上。可行吗？

提前感谢您提供的所有帮助！

4

2 回答 2

2

有淡出。可能将京都分成两个跨度“Kyo”和“to”，换句话说，为要淡出的“to”“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/

单词之间的空间将作为一个淡出的部分包含在内，以便在项目淡出时，剩余的项目一起滑动。当然，任何默认样式的边距/填充都需要调整以使最后两个部分足够接近，或者您可以在最后两个部分组合在一起时立即隐藏它们，并且完整的单词淡入。

于 2013-03-05T22:16:07.800 回答
1

添加了 CSS3 http://jsfiddle.net/wRREe/2/的效果，仅适用于现代浏览器。对于非 CSS3 的简单效果，请参见下文，

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/

没有 CSS3 的演示：http: //jsfiddle.net/wRREe/1/

您可以在 javascript 中付出一些努力来实现几乎任何效果。请参阅下面的方法，

HTML

<span class="kyoto">Kyo<span class="break_this">to</span></span>
<span class="ceramics">Cera<span class="break_this">mics</span>

CSS：

.kyoto {
    position: absolute;
    left: 10px;
    top: 10px;
}
.ceramics {
    position: absolute;
    left: 200px;
    top: 10px;
}

.break_this { position: absolute; }

JS：

$('.kyoto').animate({
    left: $('.ceramics').position().left - 27
}, 1000, function () {
    $('.break_this').animate({
        top: '+=100',
        opacity: 0
    }, 2000, function () {
        $(this).remove();
    });
});

演示：http: //jsfiddle.net/wRREe/1/

于 2013-03-05T22:34:39.903 回答