怎么使用純CSS實現(xiàn)Windows啟動界面的動畫效果?這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
創(chuàng)新互聯(lián)建站從2013年開始,是專業(yè)互聯(lián)網(wǎng)技術服務公司,擁有項目網(wǎng)站制作、成都做網(wǎng)站網(wǎng)站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元陽原做網(wǎng)站,已為上家服務,為陽原各地企業(yè)和個人服務,聯(lián)系電話:18982081108
本篇文章給大家?guī)淼膬?nèi)容是關于如何使用純CSS實現(xiàn)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); } }
最后,隱藏進度條之外的內(nèi)容:
.bar { overflow: hidden; }
感謝各位的閱讀!看完上述內(nèi)容,你們對怎么使用純CSS實現(xiàn)Windows啟動界面的動畫效果大概了解了嗎?希望文章內(nèi)容對大家有所幫助。如果想了解更多相關文章內(nèi)容,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞名稱:怎么使用純CSS實現(xiàn)Windows啟動界面的動畫效果
文章位置:http://bm7419.com/article20/jcecco.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供云服務器、軟件開發(fā)、網(wǎng)站改版、虛擬主機、網(wǎng)站排名、響應式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)