78.纯 CSS 创作 Windows 启动界面
2021-05-30 10:14
标签:tomat pos linear body spl size ima key flex 原文地址:https://segmentfault.com/a/1190000015632759 学习后效果地址:https://scrimba.com/c/cPgWmZCg HTML code: CSS code: 78.纯 CSS 创作 Windows 启动界面 标签:tomat pos linear body spl size ima key flex 原文地址:https://www.cnblogs.com/FlyingLiao/p/11055609.html
div class="windows-boot">
div class="logo">
p class="ms">Microsoftp>
p class="win">Windowsp>
p class="pro">Professionalp>
div>
div class="bar">div>
div>
html, body,.logo p{
margin: 0;
padding: 0;
}
body{
height: 100vh;
/* 设置body的子元素水平垂直居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: black;
color: white;
}
.windows-boot{
font-size: 15px;
width: 21.5em;
height: 15em;
/* border: 1px dashed white; */
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.logo{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.logo p{
margin: 0.1em 0;
font-family: sans-serif;
}
.logo .ms{
font-size: 1.6em;
font-weight: lighter;
line-height: 1em;
}
.logo .ms::after {
content: ‘\00a9‘;
font-size: 0.625em;
vertical-align: top;
position: relative;
top: -0.3em;
left: 0.2em;
}
.logo .win{
font-size: 4.2em;
font-weight: bold;
line-height: 86%;
}
.logo .win sup{
color:red;
}
/* 用页面中的xp代替以下
.logo .win::after {
content: ‘XP‘;
font-size: 0.5em;
vertical-align: top;
position: relative;
top: -0.4em;
color: tomato;
}
*/
.logo .pro{
font-size: 3em;
/* lighter: 清晰的 */
font-weight: lighter;
line-height: 1em;
padding-left: 0.2em;
}
/* 定义进度条 */
.bar{
width: 15em;
height: 1em;
/* 银色 */
border: 0.2em solid silver;
border-radius: 0.7em;
position: relative;
padding: 0.2em;
overflow: hidden;
}
/* 利用:::before制作蓝条 */
.bar::before {
content: ‘‘;
position: absolute;
width: 3em;
height: 70%;
border-radius: 0.2em;
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);
animation: run 2s linear infinite;
}
/* 定义动画 */
@keyframes run {
from {
transform: translateX(-3em);
}
to {
transform: translateX(15em);
}
}
上一篇:Wine-Staging 4.9 发布,增添一些新补丁
下一篇:C#的静态类
文章标题:78.纯 CSS 创作 Windows 启动界面
文章链接:http://soscw.com/index.php/essay/89511.html