Question

以下是W3Schools关于如何创建涟漪效果按钮的代码。

.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.button:after {
    content: "";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 50%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 15s;
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s;
}

有人可以一点一点帮助我理解代码，特别是为什么按钮中的填充和边距：之后是如此高度设置以及按钮中的零值：活动：影响动画后？

任何帮助都将受到高度赞赏。（我知道填充和边距的基本知识，但我认为我没有得到＆＃39;类和使用的技术）。

Answer 1

:after不是一个类是一个伪元素，它用于向元素的内容添加内容。请访问 ::after

因此它使用pseudo-element创建一个新的space，其CSS未在您的初始HTML中定义。它就像在按钮内制作另一个元素

例如，如果你有这样的结构：

＆＃13;

.no_pseudo, .with_pseudo { 
  width:100px;
  height:100px;
  background:red;
  margin:40px 0
}

.likeAfter {
  background:blue;
  width:50%;
  margin:0 auto;
height:100%;}


.with_pseudo { 
  position:relative;
}

.with_pseudo:after {
  content:"";
  position:absolute;
  background:blue;
  width:50%;
  margin:0 auto;
height:100%;
lefT:0;
right:0;}

＆＃13;

<div class="no_pseudo">
  <div class="likeAfter">
  </div>
</div>


<div class="with_pseudo">
 
</div>

＆＃13;

如您所见，:after元素可以像div中的子元素一样使用。但你可以通过使用CSS实现这一点。你不必改变HTML结构。

所以这个诀窍是使用:after，它有一个background: #f1f1f1;，它位于按钮（margin-top:-120%）下面。然后，当你点击按钮时，它（margin:0）表明这种效果是如何完成的

还有填充和不透明度。

我会以不同的方式完成它：

＆＃13;

.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
     z-index:2;
}

.button:after {
    content: "pseudo element >!<";
    color:green;
    background: #f1f1f1;
    display: block;
    position: absolute;
    bottom:0;
    left:0;
    height:0%;
    width:0%;
    opacity: 0;
    transition: all 3s;
   
}

.button:focus:after {
   width:50%;
   height:100%;
    opacity: 1;
    

}

＆＃13;

<button class="button">
I AM A BUTTON
</button>

＆＃13;

我将:after放在button的左下角，width:0%;height:0%;opacity:0;

然后，当我点击按钮时，我在width:50%;height:100%;opacity:1上添加了:after，以及您如何获得该效果。也许与你的例子不完全相同，但它确实有效。

还在content:""元素中添加了一些:after。你可以添加文字，图像等几乎任何东西。但如果您不想添加任何内容，则必须使用content:""并将其留空，否则不会创建:after。

:before与＆gt;之后相同在这里看到更多关于伪元素的信息

css_pseudo_elements或此处Pseudo-elements

谈论这些事情还有很多东西，但我希望你能够理解pseudo-elements正在发生的事情以及这种影响。让我知道。干杯！

评论后编辑：

1。＆＃39;向后过渡＆＃39;是因为:active州（ :active ）。仅当您单击按钮时，该按钮才具有:active状态。之后它不再活跃了，:after又恢复了它的原始风格

因为它有transition:15s，所以需要15秒才能恢复原来的位置和颜色。

与涟漪效应相同。点击按钮，效果开始，:after从一种风格转到另一种风格，例如从opacity:0到opacity:1然后因为按钮没有{{1} }状态，:active返回:after的原始风格，所有这些都在15秒内发生（因为opacity:0）

<强> 2 transition:15s将content:""或:after的空格插入HTML结构

:before上需要content:""，因为正如我在开头所说的那样，

:: after是一个伪元素，允许您将内容从CSS插入页面（不需要在HTML中）。虽然最终结果实际上不在DOM中，但它在页面上显示为好像是

关键字:after。所以，即使你没有插入文字或图像，但只想插入一个空格，你需要设置content，这意味着空，但仍然存在。

content:""在元素后生成elem:after{content:""}的空格。

我将做两个简短的例子，一个在width:0;height:0内部，一个内部没有任何东西

＆＃13;

content:""

＆＃13;

h1:before {
  content:"i am before < < < ";
  font-size:14px;
  color:red;
  }
  h1:after {
  content:" > > > i am after";
  font-size:14px;
  color:blue;
  }

h2:before {
  content:"";
  background:red;
  width:20px;
  height:20px;
  position:absolute;
  }
h2:after {
  content:"";
  background:blue;
  width:20px;
  height:20px;
  position:absolute;
  }

＆＃13;

涟漪效应按钮CSS3

1 个答案: