悬停边框半径形状不平滑

Question

我正在尝试解决悬停边框半径形状平滑问题。 当我尝试悬停按钮时，它不会用 span 背景颜色填充按钮。

左右两侧显示主要背景色分割部分。

这里是Jsfiddle demo

这是我的按钮 Html

 <a class="xs-btn btn-6" href="#">Hell button<span></span></a>

这是css

.xs-btn {
                position: relative;
                display: inline-block;
                overflow: hidden;
                margin: 1rem auto;
                text-transform: uppercase;
                border: 1px solid currentColor;
                background-color: #6A1B9A;
                -moz-border-radius: 25px;
                -khtml-border-radius: 25px;
                border-radius: 25px;
                -webkit-border-radius: 25px;
                padding: 15px 36px;
                color:#fff;
                border:none;
                -webkit-background-clip: padding-box; 
                -moz-background-clip:    padding; 
                background-clip:         padding-box;
            }


            .btn-6 span {
                position: absolute;
                display: block;
                width: 0;
                height: 0;
                -moz-border-radius: 50%;
                -khtml-border-radius: 50%;
                border-radius: 50%;
                -webkit-border-radius: 50%;
                background-color: #EC5598;
                -webkit-transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
                transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);

            }

            .btn-6:hover span {
                width: 335%;
                height: 562.5px;
            }

这里是 Jquery 代码。显示在光标位置的波纹中

if ($('.xs-btn').length > 0) {
    $('.xs-btn').on('mouseenter', function(e) {

        var parentOffset = $(this).offset(),
            relX = e.pageX - parentOffset.left,
            relY = e.pageY - parentOffset.top;

            if ($(this).find('span')) {
                $('.xs-btn span').css({
                    top: relY,
                    left: relX,
                });
            }
    });
    $('.xs-btn').on('mouseout', function(e) {

        var parentOffset = $(this).offset(),
            relX = e.pageX - parentOffset.left,
            relY = e.pageY - parentOffset.top;

            if ($(this).find('span')) {
                $('.xs-btn span').css({
                    top: relY,
                    left: relX,
                });
            }
    });
}

Answer 1

尝试为按钮的background添加一个过渡。

if ($('.xs-btn').length > 0) {
  $('.xs-btn').on('mouseenter', function(e) {

    var parentOffset = $(this).offset(),
      relX = e.pageX - parentOffset.left,
      relY = e.pageY - parentOffset.top;

    if ($(this).find('span')) {
      $('.xs-btn span').css({
        top: relY,
        left: relX,
      });
    }
  });
  $('.xs-btn').on('mouseout', function(e) {

    var parentOffset = $(this).offset(),
      relX = e.pageX - parentOffset.left,
      relY = e.pageY - parentOffset.top;

    if ($(this).find('span')) {
      $('.xs-btn span').css({
        top: relY,
        left: relX,
      });
    }
  });
}

body {
  padding-top: 50px;
  background-color: #EC5598;
}

.xs-btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 1rem auto;
  text-transform: uppercase;
  background: #6A1B9A;
  border-radius: 25px;
  padding: 15px 36px;
  color: #fff;
  transition: 0.4s ease-in-out;
}

.btn-6 span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #EC5598;
  transition: height 0.4s ease-in-out, width 0.4s ease-in-out;
  transform: translate(-50%, -50%);
}

.btn-6:hover {
  background: #EC5598;
}

.btn-6:hover span {
  width: 335%;
  height: 562.5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="xs-btn btn-6" href="#">Hell button<span></span></a>