<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML打字机</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
var text="欢迎来到电影网站"
var len=text.length
var sudu=100
var seq=0
function type(){
texts.innerHTML=text.substring(0,seq);
if(len==0){
seq=0
setInterval();
}else{
seq++
setTimeout("type()",sudu);
}
}
</script>
<style>
/*----------------发光----------------------*/
#texts{
color:#0F0;
animation:gg .7s ease-in-out infinite alternate;
}
@-webkit-keyframes gg {
from {
text-shadow: 0 0 2px #FF0;
}
to {
text-shadow: 0 0 2px #0FF;
}
}
</style>
</head>
<body onload=type()>
<div id="texts" style="font-size:24px;text-align:center;">
</div>
</body>
</html>
HTML打字机和字体发光效果
猜你喜欢
转载自blog.csdn.net/tb3706666/article/details/78405194
今日推荐
周排行