Ich hab nun den Titel ein wenig aufgepept, nun mit ein wenig Terminal Flair und einem blinkenden Cursor.

Der Javascript Code vom Cursor ist mit JQuery übrigens schnell eingetragen:

1
2
3
4
5
6
7
8
9
10
<script>
    function cursorAnimation() {
                $('#cursor').animate({
                    opacity: 0
                }, 'slow', 'swing').animate({
                    opacity: 1
                }, 'slow', 'swing');
            }
    setInterval ('cursorAnimation()', 600);
</script>

Nachtrag:
Man kann dies natürlich auch in reinem CSS erreichen, jedoch sind diese Konstrukte wenn man einen flüssigeren Übergang haben möchte zielich groß und wenn ich schon JQuery in die Seite einbinde, warum nicht auch einfacher?

Nachtrag 2:
Da ich gerade Lust auf CSS Animations habe, habe ich mich noch mal dran gesetzt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#cursor {
  display: inline;
  -webkit-animation: 1s blink ease infinite;
  -moz-animation: 1s blink ease infinite;
  -ms-animation: 1s blink ease infinite;
  -o-animation: 1s blink ease infinite;
  animation: 1s blink ease infinite;
}

@keyframes "blink" {
  50% {
    opacity: 0.0;
  }
}

@-moz-keyframes blink {
  50% {
    opacity: 0.0;
  }
}

@-webkit-keyframes "blink" {
  50% {
    opacity: 0.0;
  }
}

@-ms-keyframes "blink" {
  50% {
    opacity: 0.0;
  }
}

@-o-keyframes "blink" {
  50% {
    opacity: 0.0;
  }
}

Blöd ist nur das animation leider immer noch “nur” ein Arbeitsentwurf ist sodass jeder Browser sein eigenes Süppchen kocht und man ohne Vendor Präfixe nicht umher kommt. Mit Compass und Sass könnte man das aber noch abkürzen.