Heim > Web-Frontend > CSS-Tutorial > So verwenden Sie reines CSS, um Animationseffekte auf der Windows-Startoberfläche zu erzielen

So verwenden Sie reines CSS, um Animationseffekte auf der Windows-Startoberfläche zu erzielen

不言
Freigeben: 2018-09-04 11:33:50
Original
2484 Leute haben es durchsucht

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

效果预览

So verwenden Sie reines CSS, um Animationseffekte auf der Windows-Startoberfläche zu erzielen

源代码下载

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>
Nach dem Login kopieren

居中显示:

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

定义容器尺寸:

.windows-boot {
    width: 21.5em;
    height: 15em;
}
Nach dem Login kopieren

设置段落样式:

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

设置字号:

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

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

.logo .pro {
    font-size: 3em;
}
Nach dem Login kopieren

设置字体粗细:

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

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

.logo .pro {
    font-weight: lighter;
}
Nach dem Login kopieren

设置行高:

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

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

.logo .pro {
    line-height: 1em;
    padding-left: 0.2em;
}
Nach dem Login kopieren

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

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

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

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

定义进度条尺寸:

.bar {
    width: 15em;
    height: 1em;
    border: 0.2em solid silver;
}
Nach dem Login kopieren

增加 logo 和进度条的间距:

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

设置进度条的样式:

.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;
}
Nach dem Login kopieren

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

.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);
}
Nach dem Login kopieren

增加动画效果:

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

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

    to {
        transform: translateX(15em);
    }
}
Nach dem Login kopieren

最后,隐藏进度条之外的内容:

.bar {
    overflow: hidden;
}
Nach dem Login kopieren

大功告成!

相关推荐:

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

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

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reines CSS, um Animationseffekte auf der Windows-Startoberfläche zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage