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

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

　　代碼解讀

　　定義dom，容器中包含2個元素，分別代表logo和進度條，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è)置字體粗細：

　　.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"后面增加商標版權(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;

　　}

　　定義進度條尺寸：

　　.bar{

　　width:15em;

　　height:1em;

　　border:0.2emsolidsilver;

　　}

　　增加logo和進度條的間距：

　　.windows-xp-loader{

　　display:flex;

　　flex-direction:column;

　　justify-content:space-between;

　　align-items:center;

　　}

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

　　.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è)置進度條中藍色色塊的樣式：

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

　　}

　　}

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

　　.bar{

　　overflow:hidden;

　　}

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