[英]How to recreate this background fade in/pop-up effect icon button?
我一直在试图重新这些按钮( 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;
}
基本上蓝色圆圈已经存在于图标下方,它只是缩小/隐藏。 在悬停时,您可以为圆圈设置动画并将图标颜色更改为白色:
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大部分直接来自你的链接网站
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.