波纹效应按钮CSS3

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

有人能帮助我一点一点地理解代码，尤其是为什么按钮中的填充和页边距设置得这么高，以及按钮中的零值是如何设置的:active:after？

任何帮助都将不胜感激。(我知道填充物和保证金的基础，但我认为我没有得到‘课后’课程和使用的技术)。

Answer 1

:after不是一个类，它是一个伪元素，用于向元素.see的内容中添加内容，这里是*之后

因此，它使用这个pseudo-element来创建一个新的space，它没有在初始的space中定义。就像在按钮里做另一个元素

如你有这样的结构：

​

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

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


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

​

如您所见，:after元素可以像div中的子元素一样使用。但是，您可以通过使用CSS .you来实现这一点，而不必更改结构。

所以这个技巧是使用:after，它有一个background: #f1f1f1;，它位于按钮( margin-top:-120% )下。然后，当您单击按钮时，它(margin:0 )就是这样实现的

也有垫子和不透明度。

我本可以不这么做的：

​

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

}

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

​

我将:after定位在button的左下角，并使用width:0%;height:0%;opacity:0；

然后，当我单击按钮时，我在:after上添加了:after，这就是如何获得这种效果的。也许和你的例子不完全一样，但它有效。

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

:before与后面的内容相同，请参见这里有关伪元素的更多信息。

元素或这里伪元素

这里有很多关于这件事的讨论，但我希望你能够理解pseudo-elements发生了什么，以及这种效果。让我知道。干杯！

评论后编辑：

1.‘向后转换’是因为:active状态( *积极 )。只有单击按钮时，按钮才具有:active状态。在那之后，它不再是活跃的了，:after回到了它原来的风格

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

波纹效应也是如此。单击按钮，效果开始，:after从一种样式到另一种风格，例如从opacity:0到opacity:1，然后由于按钮不再具有:active状态，:after返回到原来的opacity:0样式，所有这些都在15秒内发生(因为transition:15s )。

2 content:""将:after或:before的空间插入到:after结构中。

你需要content:"" on :after，因为，正如我在一开始所说，

*“后”是一个伪元素，它允许您从CSS中将内容插入到页面上(而不需要在HTML中)。虽然最终结果实际上并不在DOM中，但它在页面上显示得好像是

关键词content .因此，即使您不插入文本或图像，但您只想插入一个空空间，也需要设置一个content:""，意思是空的但仍然存在。

elem:after{content:""}在元素之后生成一个带有width:0;height:0的空格。

我将做两个简短的例子，一个在content:""里面有东西，一个里面没有东西

​

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

<h1>Text Before me </h1>


<h2>Just empty content </h2>

​