<style>
/*
首先这是外部引入的i图片，要把<i>替换成<img> 然后加上src去掉calss，
其次这里的图标都是镂空的空心，才能hover出黄金色的底色切记！！！
其实没啥特别的，就是图标镂空然后改变伪类的底色而已
*/
body {
margin: 0;
padding: 0;
background: #262626;
}
ul {
margin: 0;
padding: 0;
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
ul li {
list-style: none;
margin: 0 15px;
}
ul li a {
position: relative;
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 63px;
background: #333;
border-radius: 50%;
font-size: 30px;
color: #666; /*这是图标的底色*/
transition: .5s;
}
ul li a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #ffee10;
transition: .5s;
transform: scale(.9);
z-index: -1;
}
ul li a:hover::before {
transform: scale(1.1);
box-shadow: 0 0 15px #ffee10;
}
ul li a:hover {
color: #ffee10;
box-shadow: 0 0 5px #ffee10;
text-shadow: 0 0 5px #ffee10;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">
<i class="fab fa-edge"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-firefox"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-chrome"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-opera"></i>
</a>
</li>
</ul>
</body>
</html>
扫一扫
1720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
