<html>
<head>
<style>
.container{
float: left;
display: inline-block;
position: relative;
}
@keyframes blink-caret { 50% { background-color: transparent; } }
span{
animation:blink-caret 1s step-end infinite;
width: 3px;
height: 20px;
background-color: #000;
float: left;
position: absolute;
right: -10px;
}
</style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<div class="container"></div>
<script>
var s = 'Welcome to LoVueAn';
var con = $('.container');
var index = 0;
var length = s.length;
var tId = null;
function start(){
con.text('');
con.append('<span></span>');
tId=setInterval(function(){
con.append(s.charAt(index));
if(index++ === length){
clearInterval(tId);
index = 0;
start()
}
},400);
}
start();
</script>
