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

 

　　代码解读

 

　　定义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;

 

　　}

 

　　设置段落样式：

 

　　.logop{

 

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

 

　　}

 

　　增加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(

 

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

 

　　}

 

　　}

 

　　最后，隐藏进度条之外的内容：

 

　　.bar{

 

　　overflow:hidden;

 

　　}

 

　　大功告成！






本文转载自中文网