在 CSS 中重新创建无限脉冲阴影答案

【问题标题】：Recreating infinite pulsing shadow in CSS在 CSS 中重新创建无限脉冲阴影
【发布时间】：2016-01-17 12:07:26
【问题描述】：

我正在尝试复制在此站点 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 和网站的代码有什么区别？

【问题讨论】：

标签： html css

【解决方案1】：

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

你试图在这一行调用它：

-webkit-animation: pulse 2s infinite linear;

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

.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;}}

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

【讨论】：