پیشنمایش زنده
کد HTML
<div class="terminalWrapper">
<div class="terminalWindow">
<i class="close"></i>
<i class="resize"></i>
<i class="minimize"></i>
<p>Mac Terminal</p>
</div>
<div class="terminalBody">
<div class="terminal">
<p>Log entry 1</p>
<p>Log entry 2</p>
<p>Log entry 3</p>
<div class="terminalEnd">'</div>
</div>
</div>
</div>
کد CSS
.terminalWrapper {
display: flex;
flex-direction: column;
background: #141410;
box-sizing: border-box;
border-radius: 4px;
position: relative;
width: 300px;
}
.terminalWindow {
display: flex;
align-items: center;
justify-content: flex-start;
height: 30px;
margin-left: 10px;
border-bottom: 1px solid #141410;
}
.terminalWindow i {
width: 1em;
height: 1em;
font-size: 10px;
border-radius: 50%;
margin-right: 4px;
justify-content: center;
display: flex;
align-items: center;
color: #fff;
}
.terminalWindow i svg {
width: 1em;
height: 1em;
}
.terminalWindow p {
margin-right: auto;
font:
normal 500 12px "-apple-system",
system-ui,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
color: #d9d9d9;
}
.close {
background: #f5222d;
}
.resize {
background: #ffc53d;
}
.minimize {
background: #52c41a;
}
.terminalBody {
display: flex;
width: 100%;
background: #262626;
box-sizing: border-box;
color: #fff;
}
.terminal {
box-sizing: border-box;
padding: 12px;
overflow: hidden;
overflow-y: scroll;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.terminal p {
width: 100%;
font:
normal 600 12px/16px "-apple-system",
system-ui,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
animation: new 400ms 2 forwards;
}
.terminalEnd {
background: currentColor;
width: 2px;
height: 16px;
margin-top: 6px;
animation: terminalAnimation 750ms infinite linear;
}
@keyframes terminalAnimation {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-track {
background: #141410;
border-radius: 20px;
}
::-webkit-scrollbar-thumb {
border-radius: 20px;
background: #8c8c8c;
}