48 lines
1.3 KiB
HTML
48 lines
1.3 KiB
HTML
<html>
|
|
<head>
|
|
<title>Typing, Ma!</title>
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
|
|
<script type="text/javascript" src="js/lettering.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$(".page-title").lettering();
|
|
});
|
|
</script>
|
|
<style>
|
|
body {font-family: Helvetica;}
|
|
h1 {font-size: 100px;}
|
|
|
|
.char1, .char2, .char3 {
|
|
color: #fff;
|
|
border-right: .1em solid transparent;
|
|
-webkit-animation: typing .5s;
|
|
-webkit-animation-fill-mode: forwards;
|
|
}
|
|
|
|
.char1 {-webkit-animation-delay: .5s;}
|
|
.char2 {-webkit-animation-delay: 1s;}
|
|
/* or whatever your last character is */
|
|
.char3 {
|
|
padding-right: 2px;
|
|
-webkit-animation: typing 1s infinite;
|
|
-webkit-animation: blink 1s infinite;
|
|
-webkit-animation-delay: 1.5s;
|
|
}
|
|
|
|
@-webkit-keyframes typing {
|
|
from, to {color: #333; border-color: transparent; }
|
|
70% {color: #333; border-color: #07D6FF; }
|
|
}
|
|
|
|
@-webkit-keyframes blink {
|
|
from, to {color: #333; border-color: transparent; }
|
|
50% {border-color: #07D6FF;}
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<h1 class="page-title">Hi.</h1>
|
|
</body>
|
|
</html> |