SCSS
body {
width:100%;
height:100%;
position:fixed;
background-color:#212121;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 35px;
line-height: 40px;
font-family:'Monospace';
color: #E3F2FD;
height: 160px;
overflow:hidden;
}
.display {
font-weight:300;
overflow:hidden;
height:40px;
padding:0 42px;
&:before {
content:'<';
left: 0;
line-height:40px;
}
&:after {
content:' />';
position:absolute;
right: -8px;
line-height:40px;
}
&:after, &:before {
position:absolute;
top:0;
color:#18FFFF;
font-size:44px;
animation:2s linear 0s normal none infinite opacity;
}
}
p {
display:inline;
float:left;
margin:0;
}
ul {
margin-top:0;
padding-left:120px;
text-align:left;
list-style:none;
animation:6s linear 0s normal none infinite change;
}
ul li {
line-height:40px;
margin:0;
}
@keyframes opacity {
0%, 100% {opacity:0;}
50% {opacity:1;}
}
@keyframes change {
0%,18%,100% {transform:translateY(0);}
25%,43% {transform:translateY(-25%);}
50%,69% {transform:translateY(-50%); }
75%,95% {transform:translateY(-75%);}
}
3 Responses