伪元素(pseudo-elements)动画

伪元素就像额外的免费 DOM 元素。 它们允许我们添加额外的内容、 修饰和等等到我们的页面而不添加额外的 html 代码,当然他们也可以进行动画处理。 在这篇文章中,我们将使用一个伪元素要为按钮添加一个小的视觉风格。

伪元素

CSS 中,我们可以使用::before::after 来指定伪元素。 伪元素就插入到你的元素之中,或元素之间和任何内容。 既然它充当它自己的元素,那么可以来定义风格,定位和更多。 代码如下:

.pebble::before {
  ...
}
.pebble::after {
  ...
}

在这个例子中,我们的.pebble 元素有两个伪元素附加,我们可以按需改变样式。

注意"::"与":"

普遍认为我们使用双冒号:: 来表示伪元素 (而不是像伪类: hover,:first-child)。 如果您要添加 IE8 的支持,最好使用: 来代替。 其他所有的浏览器和较新版本的 IE 支持双冒号。

别忘了"content"

当添加伪元素,要时刻牢记的一件事是需要指定 content 这个属性在你让它们在页面显示之前。 伪元素适用于创建内容较少的情况,我们可以使用技巧让 content 为空:

.pebble::before {
  content: ""
  ... more styling goes here...
}

这就确保该元素是在页面可见。

例子:Shiny button

本例中我们将使用一个伪元素创建悬停在按钮上的光泽效果。 这里是一个实际例子 (悬停或点击以查看效果)。

开始,一些 HTML:

<button>Oooh SHINY</button>

由于我们使用伪元素,我们不需要任何更多的 HTML。 你可能想要为按钮添加一个 class,如果添加在完整的网页中,但现在为简单起见,我们将使用泛型元素。

添加光泽效果

闪亮光泽效果是穿越按钮的线性渐变。 若要创建这我们会使用后的伪元素,并将其定位在外面的按钮开始位置:

button::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}

光泽效果是由一个来自按钮的先为白色,然后再返回的渐变颜色组成。 在这一点上它现在处在外按钮。

我们需要隐藏光泽层,使它仅悬停时显示。 为此我们将该按钮的 overflow 将属性设置为 hidden。 由于伪元素是在按钮内,这就意味着它定位外按钮不可见。

button {
  background: #e5ac8e;
  color: #fff;
  font-size: 14px;
  border-radius: 0.5em;
  padding: 0 1em;
  position: relative;
  overflow: hidden;
  line-height: 32px;
}

我把放在一些其他的风格,也让按钮像按钮。 一件事要指出,是使用 position: relative。 所以,绝对定位的伪元素会存在在按钮内,我已经添加此属性。 如果不指定位置,绝对定位的项目将在父元素中的位置。

添加动画

接下来我们会在此示例中使用的这个动画,有两个步骤。 第一个是告诉浏览器悬停时使用动画。 接着我们开始看看到底使用什么 keyframes 动画。

添加悬停状态可以通过在 after 后使用 hover 就像这样:

button:hover::after, button:focus::after {
  animation: sheen 1s forwards;
}

在这里我们告诉浏览器比悬停时, after 伪元素是有一个 animation。 动画,名为sheen,持续一秒,停止在结束不重复。

命令事项。 使用 ::after:hover 悬停不会工作,它会告诉浏览器对伪元素本身的悬停状态作出反应。

我也已经添加的焦点状态。 这意味着 tabbing through the page 的浏览者将看到,以及光泽效果,而无需将鼠标指针悬停。 (谢谢你的点子  Šime Vidas)

让我们为动画指定指定 keyframes:

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}

该例子中我们只需要一个 keyframe。 因为起始位置 (0%) 隐含的伪元素的起始位置,我们只能描述的结束位置。 在这种情况下结束位置是横跨按钮的右上角。 浏览器然后将为我们动画跨光泽效果。

浏览器注意事项

动画属性被很好的支持,正如伪元素。 它是总是好的请确保为 keyframes 和任何 transform 添加 -webkit 和 moz 前缀。