如何制作按钮动画波？

Question

我有一个像视频弹出窗口的按钮，想要围绕它制作动画波，我怎样才能轻松实现？用示例pls建议一些tuts或链接 这是我的按钮：

<div class="promo__play">
                        <div class="promo__play__content">
                            <div class="promo__play__content__item">
                                <div class="promo__play__circle">
                                <svg
                                    xmlns:dc="http://purl.org/dc/elements/1.1/"
                                    xmlns:cc="http://creativecommons.org/ns#"
                                    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                                    xmlns:svg="http://www.w3.org/2000/svg"
                                    xmlns="http://www.w3.org/2000/svg"
                                    version="1.1"
                                    id="svg2"
                                    viewBox="0 0 36.791115 35.594635"
                                    height="10.045597mm"
                                    width="10.38327mm">
                                    <defs id="defs4" />

                                    <g transform="translate(-259.89283,-386.89359)" id="layer1">
                                        <path id="path3369"
                                            d="m 260.39283,421.68361 0,-34 35.14288,16.64288 z"
                                            style="fill:#0e91a0;fill-opacity:1;fill-rule:evenodd;stroke:#0e91a0;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
                                    </g>
                                </svg>
                                <div class="promo__play__text">Watch</div>
                                </div>
                            </div>
                        </div>
                    </div>

.promo__play {
    display: table;
    width: 100%;
}
.promo__play__content {
    display: table-row;
}


.promo__play__content__item {
    height: 350px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}


.promo__play__text {
    color: #0e91a0;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
}


.promo__play__circle {
  padding-top: 45px;
    padding-left: 10px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    background-color: #fff;
    width: 140px;
    height: 140px;
}

这是我的按钮：https://jsfiddle.net/d8fzy7kx/

Answer 1

您可以使用多个box-shadow叠加在一起创建这些涟漪。 然后，您可以使用CSS关键帧animation: ripple 1000ms infinite;

为这些设置动画

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0px #4444ee, 0 0 0 0px #fff, 
    0 0 0 0px #4444ee, 0 0 0 0px #fff, 
    0 0 0 0px #4444ee, 0 0 0 0px #fff, 
    0 0 0 0px #4444ee, 0 0 0 0px #fff;
  }
  100% {
    box-shadow: 0 0 0 15px #4444ee, 0 0 0 17px rgba(255,255,255,0), 
    0 0 0 40px #4444ee, 0 0 0 42px rgba(255,255,255,0), 
    0 0 0 70px #4444ee, 0 0 0 72px rgba(255,255,255,0), 
    0 0 0 105px #4444ee, 0 0 0 107px rgba(255,255,255,0);
  }
}

我在这里创建了一个有效的jsFiddle： https://jsfiddle.net/qhudcgex/1/

Answer 2

你可能喜欢这个：

＆＃13;

＆＃13;

.container {
  width: 200px;
  height: 100%;
  margin: 0 auto 0;
}

.pulse-button {

  position: relative;
  width: 100px;
  height: 100px;
  border: none;
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  border-radius: 50%;
  background-color: #e84c3d;
  background-image: url(http://www.clipartbest.com/cliparts/bTy/EkL/bTyEkLGrc.png);
  background-size:cover;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
.pulse-button:hover 
{
  -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

＆＃13;

<div class="container">
    <button class="pulse-button"></button>
 </div>

＆＃13;

＆＃13;

＆＃13;