怎么用純CSS實(shí)現(xiàn)Windows啟動界面的動畫效果

這篇文章主要介紹了怎么用純CSS實(shí)現(xiàn)Windows啟動界面的動畫效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)瑪曲免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

代碼解讀

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

<divclass="windows-boot">

<divclass="logo">

<pclass="ms">Microsoft</p>

<pclass="win">Windows</p>

<pclass="pro">Professional</p>

</div>

<divclass="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;

}

設(shè)置段落樣式：

.logop{

color:white;

font-family:sans-serif;

margin:0;

padding:0;

}

設(shè)置字號：

.logo.ms{

font-size:1.6em;

}

.logo.win{

font-size:4.2em;

}

.logo.pro{

font-size:3em;

}

設(shè)置字體粗細(xì)：

.logo.ms{

font-weight:lighter;

}

.logo.win{

font-weight:bold;

}

.logo.pro{

font-weight:lighter;

}

設(shè)置行高：

.logo.ms{

line-height:1em;

}

.logo.win{

line-height:86%;

}

.logo.pro{

line-height:1em;

padding-left:0.2em;

}

在"Microsoft"后面增加商標(biāo)版權(quán)符號：

.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;

}

定義進(jìn)度條尺寸：

.bar{

width:15em;

height:1em;

border:0.2emsolidsilver;

}

增加logo和進(jìn)度條的間距：

.windows-xp-loader{

display:flex;

flex-direction:column;

justify-content:space-between;

align-items:center;

}

設(shè)置進(jìn)度條的樣式：

.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;

}

用線性漸變設(shè)置進(jìn)度條中藍(lán)色色塊的樣式：

.bar::before{

background:

linear-gradient(

toright,

transparent30%,

black30%,black35%,

transparent35%,transparent65%,

black65%,black70%,

transparent70%

),

linear-gradient(

blue0%,

royalblue17%,

deepskyblue32%,deepskyblue45%,

royalblue60%,

blue100%

);

filter:brightness(1.2);

}

增加動畫效果：

.bar::before{

animation:run2slinearinfinite;

}

@keyframesrun{

from{

transform:translateX(-3em);

}

to{

transform:translateX(15em);

}

}

最后，隱藏進(jìn)度條之外的內(nèi)容：

.bar{

overflow:hidden;

}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么用純CSS實(shí)現(xiàn)Windows啟動界面的動畫效果”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

文章題目：怎么用純CSS實(shí)現(xiàn)Windows啟動界面的動畫效果
分享路徑：http://muchs.cn/article32/picosc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站制作、品牌網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、App設(shè)計(jì)、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)