Question

我已经在我的网站上使用了我想要的按钮，但我遇到了问题。我的网站使用强制滚动（就像在Apple的iPhone 5S页面上一样），每次我向上或向下滚动我的按钮都会被搞砸.. :(

看起来紫色的脉动似乎没有明显的原因放在另一个上面！它真的很烦我，我似乎无法找到答案...... :(

这是按钮的演示：

<div class="button">
    <div class="blackspace"></div>
    <div class="blueunderlay"></div>
    <div class="roundbutton"></div>
</div>

CSS

.roundbutton {
    border-radius: 50%;
    width: 77px;
    height: 77px;
    position: relative;
    -webkit-animation-name: fadecolor;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    z-index: 2;
    top: -152px;
}
.blueunderlay {
    border-radius: 50%;
    width: 77px;
    height: 77px;
    position: relative;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#01BAE8), to(#0183D5));
    top: -75px;
}
.blackspace {
    border-radius: 50%;
    width: 73px;
    height: 73px;
    position: relative;
    background-color: black;
    z-index: 4;
    left: 2px;
}
@-webkit-keyframes fadecolor {
    from {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EB009F), to(#DA005B))
    }
    40% {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EB009F), to(#DA005B));
        opacity: 0.25
    }
    50% {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EB009F), to(#DA005B));
        opacity: 0
    }
    60% {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EB009F), to(#DA005B));
        opacity: 0.25
    }
    to {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EB009F), to(#DA005B))
    }
}

http://jsfiddle.net/6P3F7/2/

我希望有人能够帮助我：）

Answer 1

我认为你可以通过一个元素和一个伪元素来解决这个问题。

Codepen.io Demo

<强> HTML

<div class="newbutton"></div>

<强> CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.newbutton {
  border-radius: 50%;
  width: 73px;
  height: 73px;
  position: relative;
  background-color: black;
  margin: 25px;
}

.newbutton:before {
  content:"";
  width:80px;
  height:80px;
  position: absolute;
  border-radius:50%;
  z-index:-1;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  -webkit-animation-name: fadecolor;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes fadecolor {
  from {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EB009F), to(#DA005B))
  }
  40% {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EB009F), to(#DA005B));
    opacity: 0.25
  }
  50% {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EB009F), to(#DA005B));
    opacity: 0
  }
  60% {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EB009F), to(#DA005B));
    opacity: 0.25
  }
  to {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EB009F), to(#DA005B))
  }
}

注意：目前只使用-webkit前缀和复制的渐变......但我认为它几乎就在那里。

按钮上的脉动边框

1 个答案: