gpt4 book ai didi

jquery - 同时平滑地重新排序并在悬停时出现新的词段

转载 作者:太空宇宙 更新时间:2023-11-04 09:53:13 25 4
gpt4 key购买 nike

我想在页面上方放置一个标题(假设):DUKE YAHA
悬停时,我希望文本平滑过渡(实际上使用 CSS3 过渡,而不是立即更改)到:ARCHDUKEMAN AYHATON

所以,在DUKE前后添加的是ARCH和MAN;而在YAHA中,Y和A切换位置,后面加了TON。所以有两件事:

  1. 添加单词;
  2. 字母互换

我想要实现的是DUKE向左移动,为周围的ARCH和MAN腾出空间;并且您看到 YAHA 中的字母 Y 和 A 实际上交换了位置。

我并不是要找人帮我把它全部写出来,因为工作量很大,但如果有人能给我指出正确的方向,那就太棒了!

例如,要实现这一点,我应该看看 jQuery 而不是 CSS3(我一直在尝试,但没有成功)?除了 CSS3 转换之外,我是否应该使用 CSS3 动画来实现这一点?

最佳答案

你能试试这个吗:

$( ".top" ).hover(function() {
$( this ).find('.letters').addClass( "active" );
});
.letters{
-moz-transition: all 1.5s ease-in-out;
-webkit-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
float: left;
position:relative ;
}
.first , .third,.seven{
opacity: 0;
}
.top{
left: 55%;
position: absolute;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
width: 400px;
}
.first, .third,.seven{
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1s;
}
.second{
-webkit-transform: translate3d(35px,0px,0px);
-moz-transform: translate3d(35px,0px,0px);
-o-transform: translate3d(35px,0px,0px);
-ms-transform: translate3d(35px,0px,0px);
transform: translate3d(35px,0px,0px);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;

}

.fourth{
transform: translate3d(11px,0px,0px);
-webkit-transform: translate3d(11px,0px,0px);
-moz-transform: translate3d(11px,0px,0px);
-o-transform: translate3d(11px,0px,0px);
-ms-transform: translate3d(11px,0px,0px);
-webkit-transition-delay: 2s;
-moz-transition-delay: 2s;
-o-transition-delay: 2s;
-ms-transition-delay: 2s;
transition-delay: 2s;

}
.fivth{
transform: translate3d(-10px,0px,0px);
-webkit-transform: translate3d(-10px,0px,0px);
-moz-transform: translate3d(-10px,0px,0px);
-o-transform: translate3d(-10px,0px,0px);
-ms-transform: translate3d(-10px,0px,0px);
-webkit-transition-delay: 1s;
-moz-transition-delay: 2s;
-o-transition-delay: 2s;
-ms-transition-delay: 2s;
transition-delay: 2s;
}

.active{
opacity: 1;
-webkit-transform: translate3d(0px,0px,0px);
-moz-transform: translate3d(0px,0px,0px);
-o-transform: translate3d(0px,0px,0px);
-ms-transform: translate3d(0px,0px,0px);
transform: translate3d(0px,0px,0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top">
<span class="letters first">ARCH </span>
<span class="letters second"> DUKE </span>
<span class="letters third"> MAN </span>
<span class="letters">&nbsp;</span>
<span class="letters fourth">A</span>
<span class="letters fivth">Y</span>
<span class="letters six">HA</span>
<span class="letters seven">TON</span>
</div>

关于jquery - 同时平滑地重新排序并在悬停时出现新的词段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38943664/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com