14 lines
1.7 KiB
Plaintext
14 lines
1.7 KiB
Plaintext
|
[assets=inlineCss] .body1 { width: 100%; height: 100%; position: fixed; background-color: #212121; } .content1 { position: absolute; top: 18%; 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; } .display:before { content: '<'; left: 0; line-height: 40px; } .display:after { content: '⁄>'; position: absolute; right: -34px; line-height: 40px; } .display:after, .display:before { position: absolute; top: 0; color: #18FFFF; font-size: 44px; animation: 2s linear 0s normal none infinite opacity; } p1 { display: inline; float: left; margin: 0; } ol { margin-top: 0; padding-left: 120px; text-align: left; list-style: none; animation: 6s linear 0s normal none infinite change; } ol 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%); } } ::-moz-selection { background: yellow; } ::selection { background: yellow; } .prevent-touch-callout { -webkit-touch-callout: none; } .force-select-all { -webkit-user-select: all; user-select: all; } .area { height: 100%; width: 100%; overflow: hidden; } textarea { height: 100%; width: 100%; overflow: hidden; } [/assets]
|
|||
|
|
|
|||
|
|
<div class="content1">
|
|||
|
|
<div class="display">
|
|||
|
|
<p1>Hello</p1>
|
|||
|
|
<ol>
|
|||
|
|
<li>World,</li>
|
|||
|
|
<li>G33kers</li>
|
|||
|
|
<li>Developers </li>
|
|||
|
|
<li>Everbody!</li>
|
|||
|
|
</ol>
|
|||
|
|
</div>
|
|||
|
|
</div>
|