58 lines
1.4 KiB
CSS
58 lines
1.4 KiB
CSS
|
/* Google Fonts */
|
||
|
|
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);
|
||
|
|
|
||
|
|
/* Cursor */
|
||
|
|
.cursor{
|
||
|
|
position: relative;
|
||
|
|
width: 24em;
|
||
|
|
margin: 0 auto;
|
||
|
|
border-right: 2px solid rgba(255,255,255,.75);
|
||
|
|
font-size: 30px;
|
||
|
|
text-align: left;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
}
|
||
|
|
/* Animation */
|
||
|
|
.typewriter-animation {
|
||
|
|
animation:
|
||
|
|
typewriter 5s steps(50) 1s 1 normal both,
|
||
|
|
blinkingCursor 500ms steps(50) infinite normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.typewriter-animation1 {
|
||
|
|
animation:
|
||
|
|
typewriter 5s steps(50) 5s 1 normal both,
|
||
|
|
blinkingCursor 500ms steps(50) infinite normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.typewriter-animation2 {
|
||
|
|
animation:
|
||
|
|
typewriter 5s steps(100) 10s 1 normal both,
|
||
|
|
blinkingCursor 500ms steps(100) infinite normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.typewriter-animation3 {
|
||
|
|
animation:
|
||
|
|
typewriter 5s steps(100) 15s 1 normal both,
|
||
|
|
blinkingCursor 500ms steps(100) infinite normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.typewriter-animation4 {
|
||
|
|
animation:
|
||
|
|
typewriter 5s steps(100) 20s 1 normal both,
|
||
|
|
blinkingCursor 500ms steps(100) infinite normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes typewriter {
|
||
|
|
from { width: 0; }
|
||
|
|
to { width: 100%; }
|
||
|
|
}
|
||
|
|
@keyframes blinkingCursor{
|
||
|
|
from { border-right-color: rgba(255,255,255,.75); }
|
||
|
|
to { border-right-color: transparent; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Global */
|
||
|
|
.note { margin-top: 0em; padding: 0em; color: #ffffff; font-family: 'Anonymous Pro', monospace; text-shadow: 0px 0px 10px #000000;}
|