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

Question

我一直在尝试在 https://lh3.googleusercontent.com/-GF6E7VPsBSA/XMMOk4a69nI/AAAAAAAABIw/CYqpVYpB3eAeO-afm8lso414SEczglCvgCK8BGAs/s0/2019-04-26.png 上重新创建这些按钮 ( https://www.jobhop.vn/vi )但我似乎做对了。

我尝试在 css 中使用 hover 属性。

这是我的代码:

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 直接来自您链接的网站