如何使用純CSS實現Windows啟動介面的動畫效果

本篇文章給大家帶來的內容是關於如何使用純CSS實現Windows啟動介面的動畫效果 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

效果預覽

原始碼下載

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

代碼解讀

定義 dom，容器中包含 2 個元素，分別代表 logo 和進度條，logo 又包含 3 段文字：

<div class="windows-boot">    <div class="logo">        <p class="ms">Microsoft</p>        <p class="win">Windows</p>        <p class="pro">Professional</p>    </div>    <div class="bar"></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;}

大功告成！