在CSS

Question

我试图复制在此网站上看到的脉冲效果here（向中间向下滚动）

我已将网站的CSS缩小到他们在CodePen中使用的两个div，但无法使其正常工作。

HTML

<div class="pulse">
<div class="status"> </div>
</div>

CSS

.pulse {
border-radius: 50px;
height: 60px;
left: 50%;
letter-spacing: 0.05em;
line-height: 50px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 50%;
transform: translate(-50%, -50%);
width: 60px;
}

.pulse:before {
-webkit-animation: pulse 2s infinite linear;
background: rgba(99, 87, 63, 0.5);
border-radius: 50px;
content: '';
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transform: scale(1);
width: 100%;
}

.pulse:after {
-webkit-animation: pulse 2s 1s infinite linear;
background: rgba(99, 87, 63, 0.5);
border-radius: 50px;
content: '';
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}

.status {
background: #63573f;
border-radius: 100% 100%;
box-shadow: 0 0 4px 0px #eed4c3 inset;
height: 15px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 15px;
}

它看起来像是纯CSS，但我可能错了。 CodePen与网站代码之间的区别是什么？

Answer 1

你没有在任何地方定义pulse动画（基本上可以做任何事情）。

您试图在此行中调用它：

-webkit-animation: pulse 2s infinite linear;

这是您的代码 定义的动画：http://codepen.io/anon/pen/EPweMg?editors=010

＆＃13;

＆＃13;

.hex:before {
  content: " ";
  width: 0;
  height: 0;
  border-bottom: 30px solid #6C6;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  position: absolute;
  top: -30px;
}

.hex {
  margin-top: 30px;
  width: 104px;
  height: 60px;
  background-color: #6C6;
  position: relative;
}

.hex:after {
  content: "";
  width: 0;
  position: absolute;
  bottom: -30px;
  border-top: 30px solid #6C6;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
}



.pulse {
    border-radius: 50px;
    height: 60px;
    left: 50%;
    letter-spacing: 0.05em;
    line-height: 50px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
}

.pulse:before {
    -webkit-animation: pulse 2s infinite linear;
    background: rgba(99, 87, 63, 0.5);
    border-radius: 50px;
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: scale(1);
    width: 100%;
}

.pulse:after {
    -webkit-animation: pulse 2s 1s infinite linear;
    background: rgba(99, 87, 63, 0.5);
    border-radius: 50px;
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.status {
    background: #63573f;
    border-radius: 100% 100%;
    box-shadow: 0 0 4px 0px #eed4c3 inset;
    height: 15px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
}

@-webkit-keyframes pulse{0%{transform:scale(0.2);opacity:0;}33%{transform:scale(0.6);opacity:1;}100%{transform:scale(1);opacity:0;}}

＆＃13;

<!--<div class="hex"></div> -->
<div class="bubbles">
<div class="pulse">
<div class="status"> </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;