标签:tomat pos linear body spl size ima key flex
原文地址:https://segmentfault.com/a/1190000015632759
学习后效果地址:https://scrimba.com/c/cPgWmZCg
HTML code:
<!--windows-boot : windows 启动--> <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>
CSS code:
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; } /* 用页面中的<sup>xp<sup>代替以下 .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); } }
标签:tomat pos linear body spl size ima key flex
原文地址:https://www.cnblogs.com/FlyingLiao/p/11055609.html