How to use pure CSS to achieve animation effects on the Windows startup interface

本篇文章给大家带来的内容是关于如何使用纯CSS实现Windows启动界面的动画效果 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

效果预览

源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，容器中包含 2 个元素，分别代表 logo 和进度条，logo 又包含 3 段文字：

<div>
    <div>
        <p>Microsoft</p>
        <p>Windows</p>
        <p>Professional</p>
    </div>
    <div></div>
</div>

居中显示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

定义容器尺寸：

.windows-boot {
    width: 21.5em;
    height: 15em;
}

设置段落样式：

.logo p {
    color: white;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

设置字号：

.logo .ms {
    font-size: 1.6em;
}

.logo .win {
    font-size: 4.2em;
}

.logo .pro {
    font-size: 3em;
}

设置字体粗细：

.logo .ms {
    font-weight: lighter;
}

.logo .win {
    font-weight: bold;
}

.logo .pro {
    font-weight: lighter;
}

设置行高：

.logo .ms {
    line-height: 1em;
}

.logo .win {
    line-height: 86%;
}

.logo .pro {
    line-height: 1em;
    padding-left: 0.2em;
}

在 "Microsoft" 后面增加商标版权符号：

.logo .ms::after {
    content: '\00a9';
    font-size: 0.625em;
    vertical-align: top;
    position: relative;
    top: -0.3em;
    left: 0.2em;
}

在 "Windows" 后面增加 "xp"：

.logo .win::after {
    content: 'XP';
    font-size: 0.5em;
    vertical-align: top;
    position: relative;
    top: -0.4em;
    color: tomato;
}

定义进度条尺寸：

.bar {
    width: 15em;
    height: 1em;
    border: 0.2em solid silver;
}

增加 logo 和进度条的间距：

.windows-xp-loader {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

设置进度条的样式：

.bar {
    border-radius: 0.7em;
    position: relative;
    padding: 0.2em;
}

.bar::before {
    content: '';
    position: absolute;
    width: 3em;
    height: 70%;
    background-color: dodgerblue;
    border-radius: 0.2em;
}

用线性渐变设置进度条中蓝色色块的样式：

.bar::before {
    background: 
        linear-gradient(
            to right,
            transparent 30%,
            black 30%, black 35%,
            transparent 35%, transparent 65%,
            black 65%, black 70%,
            transparent 70%
        ),
        linear-gradient(
            blue 0%,
            royalblue 17%,
            deepskyblue 32%, deepskyblue 45%,
            royalblue 60%,
            blue 100%
        );
    filter: brightness(1.2);
}

增加动画效果：

.bar::before {
    animation: run 2s linear infinite;
}

@keyframes run {
    from {
        transform: translateX(-3em);
    }

    to {
        transform: translateX(15em);
    }
}

最后，隐藏进度条之外的内容：

.bar {
    overflow: hidden;
}

大功告成！

相关推荐：

如何使用纯CSS实现单元素麦当劳的Logo（附源码）

如何使用纯CSS实现小球跳跃台阶的动画效果（附源码）

The above is the detailed content of How to use pure CSS to achieve animation effects on the Windows startup interface. For more information, please follow other related articles on the PHP Chinese website!