css - 按钮上的脉动边框

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 前缀和复制的渐变......但我认为它几乎就在那里。