Files
home/css/sey.css
hehh 2955119ba5 refactor(css): 优化社交图标样式并修复冲突
移除全局a:hover样式以避免影响社交元素
为非社交链接保留hover效果
调整伪元素动画选择器
重构微信二维码弹窗样式
2025-08-04 16:32:53 +08:00

123 lines
2.1 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* 移除全局a:hover样式避免影响社交元素 */
/*
a:hover
{
border-radius: 25px;
background: var(--clr);
color: var(--clr);
letter-spacing: 0.25em;
box-shadow: 0 0 35px var(--clr);
}
*/
/* 为非社交元素的链接保留hover效果 */
:not(.social-icons-row) a:hover {
border-radius: 25px;
background: var(--clr);
color: var(--clr);
letter-spacing: 0.25em;
box-shadow: 0 0 35px var(--clr);
}
span
{
position: relative;
z-index: 1;
}
i
{
position: absolute;
inset: 0;
display: block;
}
/* 移除伪元素动画效果,避免影响社交元素 */
/*
i::before
{
content: '';
position: absolute;
top: -3.5px;
left: 80%;
width: 10px;
height: 5px;
background: #27282c;
transform: translateX(-50%);
border: 2px solid var(--clr);
transition: 0.5s;
}
a:hover i::before
{
width: 20px;
left: 20%;
}
*/
/* 为非社交元素的伪元素保留效果 */
:not(.social-icons-row) i::before
{
content: '';
position: absolute;
top: -3.5px;
left: 80%;
width: 10px;
height: 5px;
background: #27282c;
transform: translateX(-50%);
border: 2px solid var(--clr);
transition: 0.5s;
}
:not(.social-icons-row) a:hover i::before
{
width: 20px;
left: 20%;
}
/* 移除伪元素动画效果,避免影响社交元素 */
/*
i::after
{
content: '';
position: absolute;
bottom: -3.5px;
left: 20%;
width: 10px;
height: 5px;
background: #27282c;
transform: translateX(-50%);
border: 2px solid var(--clr);
transition: 0.5s;
}
a:hover i::after
{
width: 20px;
left: 80%;
}
*/
/* 为非社交元素的伪元素保留效果 */
:not(.social-icons-row) i::after
{
content: '';
position: absolute;
bottom: -3.5px;
left: 20%;
width: 10px;
height: 5px;
background: #27282c;
transform: translateX(-50%);
border: 2px solid var(--clr);
transition: 0.5s;
}
:not(.social-icons-row) a:hover i::after
{
width: 20px;
left: 80%;
}