如何重新创建此背景淡入/弹出效果图标按钮

Question

我一直在尝试重新创建这些按钮(https://lh3.googleusercontent.com/-GF6E7VPsBSA/XMMOk4a69nI/AAAAAAAAABIw/CYqpVYpB3eAeO-afm8lso414SEczglCvgCK8BGAs/s0/2019-04-26.png(https://www.jobhop.vn/vi 但我似乎无法正确。

我尝试在 css 中使用悬停属性。

这是我的代码：

div {
  position: relative;
  width: 80px;
  height: 80px;
  display: inline-block;
  border-radius: 50%;
  color: #B17461;
  font-size: 30px;
  font-family: arial;
  background-image: linear-gradient(#B17461, #B17461);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .5s, color .5s;
}
div:hover {
  background-size: 100% 100%;
  color: #fff;
}

Answer 1

基本上图标下方已经存在蓝色圆圈，只是缩小/隐藏。悬停时，您可以为圆圈添加动画效果并将图标颜色更改为白色：

ul li .icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    color: #4f4f4f;
}
ul li .blind {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: #173b66;
  opacity: 0;
  mix-blend-mode: color;
  transition: all .2s ease-in-out;
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
ul li:hover .icon svg {
  color: #fff;
}
ul li:hover .blind {
    opacity: 1;
    width: 100px;
    height: 100px;
}

演示：https://jsfiddle.net/j245rxwk/

顺便说一句：大部分CSS直接来自您链接的网站