Question

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

在这里的人们的帮助下，我想出了一个几乎相同的解决方案，但还没有完成。我使用了:: before和:: after，但是:: before事件并没有在按钮中间结束。那是因为它离按钮更远（显然），但我不明白为什么。

请参阅下面的小提示以获得更多许可。

这就是我已经拥有的：

<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

<强> CSS
对交替元素的transform值进行一些调整。

#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;
    transform: translate(-5%, -50%);
}

#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: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;
    transform: translate(5%, -50%);
}

#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;
}

<强>段
运行下面的代码段以查看它的实际效果。

*, *::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: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;
    transform: translate(-5%, -50%);
}

#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: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;
    transform: translate(5%, -50%);
}

#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;
}

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

Answer 2

这是:after的问题。

您使用位置right来对齐它。

当动画要为:after的宽度设置动画时，它会向左侧增长，因为right: 50%会限制它。（您可以看到下面的慢动作）< / p>

改变你的代码：

#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/

CSS ::之前和::之后动画到按钮的中心，但只有::之后以中心结束

2 个答案: