Question

在this page上下载谷歌浏览器，如果您将鼠标悬停在Chrome徽标上，则会播放径向动画。控制台显示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解决方案：

＆＃13;

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

＆＃13;

<div>chronic</div>

＆＃13;

这个动画只是CSS，还是需要JS呢？

1 个答案: