Question

HTML

<a href="#">
        <div class="contact-button">
            <div class="contact-button-text">
                Linkedin
            </div>
           <div class="block-1b">L</div>
           <div class="block-2b">I</div>
           <div class="block-3b">N</div>
           <div class="block-4b">K</div>
           <div class="block-5b">E</div>
           <div class="block-6b">D</div>
           <div class="block-7b">I</div>
           <div class="block-8b">N</div>
        </div>
        </a>

CSS

.block-1b,
.block-2b,
.block-3b,
.block-4b,
.block-5b,
.block-6b,
.block-7b,
.block-8b {
    color: #fff;
    font-family: 'quicksand', sans-serif;
    text-align: center;
    line-height: 50px;
    width: 20%;
    height: 50px;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #506989;
    transform-origin: top;
    transform: rotateX(-90deg);
    transition: .5s;
}

.contact-button {
    width: 200px;
    height: 50px;
    border: 1px solid #333;
    margin: 0 auto;
    z-index: 2;
    position: relative;
    overflow: hidden;
}

.contact-button-text {
    color: #333;
    font-family: 'quicksand', sans-serif;
    text-align: center;
    line-height: 50px;
    width: 100%;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
}




.block-1b {
    width: 25px;
}


.block-2b {
    width: 25px;
    left: 25px;
}


.block-3b {
    width: 25px;
    left: 50px;
}


.block-4b {
    width: 25px;
    left: 75px;
}


.block-5b {
    width: 25px;
    left: 100px;
}


.block-6b {
    width: 25px;
    left: 125px;
}


.block-7b {
    width: 25px;
    left: 150px;
}

.block-8b {
  width: 25px;
  left: 175px;
}
.contact-button:hover .block-1b {
    transform: translateY(0);
    background-color: #6b8fbb; 
}

.contact-button:hover .block-2b {
    transform: translateY(0);
    background-color: #6b8fbb; 
    transition-delay: .1s;
}

.contact-button:hover .block-3b {
     transform: translateY(0);
     background-color: #6b8fbb; 
     transition-delay: .2s;
}

.contact-button:hover .block-4b {
     transform: translateY(0);
     background-color: #6b8fbb; 
     transition-delay: .3s;
}

.contact-button:hover .block-5b {
     transform: translateY(0);
     background-color: #6b8fbb; 
     transition-delay: .4s;
}

.contact-button:hover .block-6b {
     transform: translateY(0);
     background-color: #6b8fbb; 
     transition-delay: .5s;
}

.contact-button:hover .block-7b {
     transform: translateY(0);
     background-color: #6b8fbb; 
     transition-delay: .6s;
}

.contact-button:hover .block-8b {
     transform: translateY(0);
     background-color: #6b8fbb; 
     transition-delay: .7s;
}

这是我目前拥有的按钮动画。我喜欢像catflap一样摆动的效果，所以它向前，向后摆动，然后再向前摆动，最后休息。

您可以在此处查看我想要制作的效果：https://jsfiddle.net/6e9jzhtw/

我希望通过过渡而不是动画来产生这种效果。无论如何将转换链接在一个元素上？因此，在悬停其中一个字母拼图时：

-45deg 45deg 0deg

如果不是，我知道我可以使用jquery来重置动画，这样我就可以再次悬停在它上面，并在它播放一次之后看到效果，但我真的想让它成为过渡效果，如果可能的。

感谢。

Answer 1

不确定为什么你说你只想使用过渡而不是动画，因为两者都做其他事情，并且就我理解你的问题而言，你想要两者。

transition用于控制更改（特定而非所有）css属性时的速度。

这似乎是您想要:hover开/关发生的

animation只是使用预定义模式的一堆准备过渡，从而允许更复杂的中间状态。

现在，为什么我说你需要两者？您似乎希望能够在主（按钮）元素的:hover上启动/停止效果，通常这是转换的理想候选者。＆＃39; catflap＆＃39;是一个更复杂的状态序列，所以这（按设计）有资格作为动画。

为了让这两者合作，你需要根据需要定义一个＆＃34;状态，有:hover＆＃34;，所以你有类似

.contact-button [class*=block-] {
    /* .. removed style properties for clarity */
    transform: rotateX(-90deg);
    transition: transform .2s ease-in-out,
                background-color .3s ease-out;
}
.contact-button:hover [class*=block-] {
    transform: rotateX(0);
    background-color: #6b8fbb;
}

注意：我是一个非常懒惰的开发人员，而不是定义.block-1b, .., .block-8b我只是说包含block- 的所有元素，这种attribute selectors被认为很慢（但在这个演示的关注列表中它可能非常低）。

这将提供一个非常基本的过渡，使基本的＆＃34;跌倒＆＃34;影响。所以现在我们需要为每个block-延迟一点。

.contact-button [class*=block-]:nth-of-type(8n+1) {
   /* intentionally left "blank" */
}

.contact-button [class*=block-]:nth-of-type(8n+2) {
    transition-delay: .05s;
}

/* ...etc up to nth-of-type(8n+8) */

虽然第一个元素的transition-delay是默认值（这是没有延迟），但我们需要影响所有其他元素，我喜欢使用nth-child和nth-of-type对此。

为清楚起见，我已将<div>中的第一个元素重命名为<span>，其唯一目的是能够使用nth-of-type（与元素类型匹配）

好的，所以现在转换是在:hover上进行的，每个磁贴都会＃34;掉落＆＃34;稍稍之后。

然后我们需要解决“catflap”问题。如上所述，这是动画的候选者（正如您已经发现的那样），因此我们需要添加动画。一旦我知道过渡完成，我就想开始制作动画，不幸的是，这必须是手工完成的（或javascript，我试图避免使用jQuery，因为你威胁要使用jQuery ..）。

我们需要选择一种感觉正确的延迟，对我来说感觉就像.15s（150ms）是一个很好的价值，你可能会有不同的看法。

因此，我们将animation-delay添加到所有nth-of-type规则

.contact-button [class*=block-]:nth-of-type(8n+1) {
    animation-delay: .15s;
}

.contact-button [class*=block-]:nth-of-type(8n+2) {
    transition-delay: .05s;
    animation-delay: .2s;
}

/* ...etc up to nth-of-type(8n+8) */

这是越来越近了，除了动画中期:hover关闭时的抽搐效果。这可以通过默认情况下暂停动画并仅在悬停时运行来修复，如此

.contact-button [class*=block-] {
    /* .. removed style properties for clarity */
    transform: rotateX(-90deg);
    transition: transform .2s ease-in-out,
                background-color .3s ease-out;
    animation-play-state: paused;
}

.contact-button:hover [class*=block-] {
    transform: rotateX(0);
    background-color: #6b8fbb;
    animation: catflap 2s;
    animation-play-state: running;
}

All of this combined leads to the following demo。其中我也冒昧地制作了“猫咪”。通过减少每回合的影响感觉更自然。

到现在为止，您可能想知道为什么我第一次声称自己是一个懒惰的开发人员而且还写了这样精心设计的css选择器。好吧，说实话，我会使用像.contact-button:hover :nth-of-type(8n+3)这样的东西，而不会打扰类，因为我无法控制这些规则中的动画/过渡。我仍然使用一个类来控制这些，但对所有人来说都是一样的，例如.contact-button:hover .block，这就足够了。

CSS转换：如何产生这种效果（链接转换）

1 个答案: