CSS::before 和::after 动画到按钮的中心，但只有::after 结束在中心

Question

我一直在尝试使用此模板重新创建“立即购买 Intense”和“开始旅程”按钮:http://www.templatemonster.com/demo/58888.html

在周围人的帮助下，我想出了一个几乎相同但还不完全相同的解决方案。我已经使用了::before 和::after，但是::before 事件并没有在按钮的中间结束。那是因为它被放置在离按钮更远的地方(显然)，但我不明白为什么。

请参阅下面的 fiddle 以获得更多许可。

这是我已经拥有的:

<section id="button-container" class="section">
    <div id="effect" class="button">
        <span class="text">Free offer</span>
    </div>
</section>

*, *::before, *::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box
}
.section{
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
    display:flex;
    -webkit-display:flex
}
.button{
    text-align:center;
    box-sizing:border-box;
    border:none;
    cursor:pointer;
    width:200px;
    padding:20px 0px;
    border-radius:5px;
    position:relative
}
.button .text{
    position:relative;
    z-index:100;
    font-size:17px;
    font-weight:700;
    text-transform:uppercase
}
#button-container #effect{
    background-color:#ff7900;
    overflow:hidden
}
#button-container #effect .text{
    color:#fff;
    transition:all .3s linear;
    -webkit-transition:all .3s linear
}
#button-container #effect::before{
    content:'';
    position:absolute;
    transition:left .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
    -webkit-transition:left .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
    left:-50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:20px;
    height:20px;
    border-radius:50%;
    background-color:#79ccf2
}
#button-container #effect::after{
    content:'';
    position:absolute;
    transition:right .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
    -webkit-transition:right .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
    right:-50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:20px;
    height:20px;
    border-radius:50%;
    background-color:#79ccf2
}
#button-container #effect:hover .text{
    color:#fff;
    transition:color .5s linear .5s;
    -webkit-transition:color .5s linear .5s
}
#button-container #effect:hover::before{
     transition:left .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
     -webkit-transition:left .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
      left:50%;
      width:400px;
      height:400px
}
#button-container #effect:hover::after{
      transition:right .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
      -webkit-transition:right .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
      right:50%;
      width:400px;
      height:400px
}

Fiddle

提前致谢。

Answer 1

是:after的问题。

您使用位置 right 来对齐它。

当动画要设置 :after 的宽度时，它会向左增长，因为 right: 50% 限制了它。(你可以看到下面的慢动作)

像这样更改代码:

#button-container #effect::after{
    left: 150%;
    transition: left .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
}


#button-container #effect:hover::after{
    left: 50%;
    transition: left .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
}

https://jsfiddle.net/Lpcfuwoh/1/