这些CSS悬停效果的正常标记是什么？

我试图在以下链接中复制一些漂亮的图标动画：

由于网站没有提供任何操作说明，我尝试在本地设置一个，但不幸失败。我能得到的最好结果就是显示一个空白的

---

有人能解释一下图标是什么时候真正呈现的吗？如果有人能摆好小提琴什么的，我会非常感激的。谢谢

使用

边界半径：50%

渲染圆，图标图像是“图标字体”中的字符，这是一种将矢量艺术品包含在站点中的方法，所有内容都包含在一个文件中。图标字体文件为

---

您可以使用每个主要web浏览器中的F12工具来检查网站。

在本例中，他们使用了“字体系列：'ecoicon'；” 您可以从下载完整的示例

你可以看到附件

对于hove效果： 使用

边界半径：50%

可获得圆形形状，并在鼠标悬停图标时获得平滑背景颜色变化的效果

.hi-icon-effect-1 .hi-icon {
  background: rgba(255, 255, 255, 0.1);
  -webkit-transition: background 0.2s, color 0.2s;
  -moz-transition: background 0.2s, color 0.2s;
  transition: background 0.2s, color 0.2s;
}
.hi-icon-effect-1a .hi-icon:hover {
  background: #FFF;
  color: #41AB6B;
}

---

谢谢你的链接！这就是我要找的！你能解释一下你想做什么，链接里有什么吗？你能把你写的代码贴出来吗？