css - 这个动画是只有CSS，还是还需要JS？

Question

关于 this page对于下载 Google Chrome，如果您将鼠标悬停在 Chrome Logo 上，则会播放径向动画。控制台显示 img 具有以下内联样式:

-webkit-mask-image: -webkit-gradient(radial, 17 17, 123, 17 17, 138, from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)));

我怀疑动画是样式的结果(或者至少应该有其他代码参与其中)。我认为是这样的原因是:

• 样式中没有用于关键帧的时间组件，
• 它直接应用于元素，而不是通过 :hover psudo 选择器，
• 当我将相同的样式应用于其他页面上的图像时(在控制台中)，没有添加任何动画。

那么，它是如何实现的呢？

Answer 1

纯 CSS 解决方案:

div:after {
  content: '';
  position: absolute;
  left: -3.335em;
  width: 8em;
  height: 8em;
  margin: 0 .25em 0 0;
  border-radius: 55%;
  background: radial-gradient(transparent 1em, rgba(255, 255, 255, .9) 2em, transparent 3em);
  transform: scale(0);
  transform-origin: 50% 50%;
}

div:hover:after {
  transform: scale(1.4);
  transition: transform 1s ease-in
}

div {
  position: relative;
  display: inline-flex;
  align-items: center;
  font: 400 4rem/2 sans-serif;
  color: #777;
  overflow:hidden;
}

div:before {
  content: '';
  width: .65em;
  height: .65em;
  margin: 0 .25em 0 0;
  border: solid .35em;
  border-radius: 55%;
  border-color: #e42 #777 #3b5 #fb0;
  box-shadow:inset 0 0 0 .08em #fff;
  background:#59f content-box;
}

<div>chronic</div>