Logo实施方案
选择喜欢的方案后,将更新到网站中。以下是实施方案:
// 方案一:音乐符号融合(推荐)
.logo {
font-size: 2rem;
font-weight: bold;
background: linear-gradient(135deg, #6c63ff, #ff6584);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
display: inline-block;
}
.logo::before {
content: "♪";
position: absolute;
top: -15px;
left: -25px;
font-size: 1.5rem;
color: #6c63ff;
}
.logo::after {
content: "♫";
position: absolute;
bottom: -15px;
right: -25px;
font-size: 1.5rem;
color: #ff6584;
}
// 方案二:动态音乐图标
.logo-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #6c63ff, #ff6584);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
position: relative;
}
.logo-icon::before {
content: "♪";
position: absolute;
animation: float 3s ease-in-out infinite;
}
.logo-icon::after {
content: "♫";
position: absolute;
animation: float 3s ease-in-out infinite 1.5s;
}