L站logo动态版

熬夜做了一个动态版L站logo
想了一会怎么把社区文化结合起来，但是想不出来
简单设计如下：

lstation_LINUX_DO_L站logo_1756500252540

样式：

HTML


<!-- From linux.do by TooAme --> 
<div class="logo-container">
    <div class="top-section"></div>
    <div class="bottom-section"></div>
    <div class="white-divider"></div>
    <div class="logo-text"> LINUX DO</div>
</div>

CSS


/* From Linux.do by TooAme */ 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.logo-container {
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 50%;
    border: 6px solid rgb(240,240,240);
    overflow: hidden;
    background-color: rgb(240,240,240);
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); */
    animation: containerRotate 10s ease-in-out infinite;
}
/* 上半部分 - 黄色 */
.top-section {
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgb(255,176,3);
    border-radius: 0;
    animation: topSection 10s ease-in-out infinite;
}
/* 下半部分 - 黒色 */
.bottom-section {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgb(28,28,30);
    border-radius: 0;
    animation: bottomSection 10s ease-in-out infinite;
}
/* 白色分割バー */
.white-divider {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 100%;
    height: 0%;
    background-color: rgb(240,240,240);
    z-index: 10;
    border-radius: 0;
    animation: whiteDivider 10s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
/* LinuxDO テキスト */
.logo-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: bold;
    color: #000000;
    z-index: 20;
    opacity: 0;
    white-space: nowrap;
    animation: logoText 10s ease-in-out infinite;
}
/* コンテナ回転アニメーション */
@keyframes containerRotate {
    0%, 20% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(180deg);
    }
    70% {
        transform: rotate(180deg);
    }
    80%, 100% {
        transform: rotate(360deg);
    }
}
/* 上半部分アニメーション */
@keyframes topSection {
    0% {
        height: 50%;
    }
    10% {
        height: 25%;
    }
    20% {
        height: 75%;
    }
    30% {
        height: 50%;
    }
    40% {
        height: 30%;
    }
    60% {
        height: 30%;
    }
    70% {
        height: 50%;
    }
    80% {
        height: 75%;
    }
    90% {
        height: 25%;
    }
    100% {
        height: 50%;
    }
}
/* 下半部分アニメーション */
@keyframes bottomSection {
    0% {
        height: 50%;
    }
    10% {
        height: 75%;
    }
    20% {
        height: 25%;
    }
    30% {
        height: 50%;
    }
    40% {
        height: 30%;
    }
    60% {
        height: 30%;
    }
    70% {
        height: 50%;
    }
    80% {
        height: 25%;
    }
    90% {
        height: 75%;
    }
    100% {
        height: 50%;
    }
}
/* 白色分割バーアニメーション */
@keyframes whiteDivider {
    0%, 30% {
        height: 0%;
        top: 50%;
    }
    40% {
        height: 40%;
        top: 30%;
    }
    60% {
        height: 40%;
        top: 30%;
    }
    70% {
        height: 0%;
        top: 50%;
    }
    100% {
        height: 0%;
        top: 50%;
    }
}
/* テキストアニメーション */
@keyframes logoText {
    0%, 35% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8) rotate(180deg);
    }
    40% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(180deg);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(180deg);
    }
    65%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8) rotate(180deg);
    }
}
/* 装飾 /
.logo-container::before {
    content: ‘’;
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    / background: linear-gradient(45deg, rgb(255,176,3), rgb(240,240,240), rgb(28,28,30)); */
    border-radius: 50%;
    z-index: -1;
    opacity: 0.4;
    animation: borderGlow 10s ease-in-out infinite;
}
@keyframes borderGlow {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

下面是按这个gif生成头像的工具：
L站版动态头像生成器2.0
里面添加了这个动态logo的预设
使用方法：
选择预设为L站logo
输入昵称
选择颜色和字体
在右侧预览界面可以调整样式
效果：
lstation_野兽先辈_L站logo_1756500368771
欢迎佬友们使用~

遠雨【搞七捻三】L站logo动态版 2025-09-11

L站logo动态版