一个字一个字出现
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>opooc</title>
</head> <style > div{
width: 800px; height: 30px; border:1px solid #ef3333; color: greenyellow;
} </style> <body>
<script >
var text = "我有一个梦想我有一个梦想我有一个梦想我有一个梦想"; var num = text.length;
var i =0;
function show() {
var shower = text.substr(0,i);
document.getElementById("test").innerHTML = shower;
i++;
if(i + 1 >= num){
clearInterval("done");
}
}
var done=setInterval("show()",500);
</script>
</body>
</html> 商城 论坛 活动 招聘 GitChat ITeye 专题 打开CSDN APP Copyright © 1999-2019, CSDN.NET, All Rights Reserved
登录
CSS文字效果 原创
Bear 2019-09-16 阅读数：121 关注 这里是一些文字效果总结。
示例1（竖版从右至左的古文顺序）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>竖版文言文</title> <style type="text/css">
#content{ margin: 0px auto; /*div居中*/ width: 614px; height: 254px; background: url(img/bg10.jpg) no-repeat; /*背景图片*/ writing-mode: tb-rl; /*竖版文字*/ text-align: center; /*文字居中*/ line-height: 30px; font-family: "楷体"; font-size: 20px; font-weight: bold; } </style> </head> <body>
大江东去
浪淘尽
千古风流人物
故垒西边人道是
三国周郎赤壁
乱石穿空
惊涛拍岸
卷起千堆雪
江山如画
一时多少豪杰
遥想公谨当年
小乔初嫁了
雄姿英发
羽扇纶巾谈笑间
强虏灰飞烟灭
故国神游
多情应笑我
早生华发
人生如梦
一尊还酹江月
</body> </html>
示例2（文字阴影）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文字阴影</title> <style type="text/css"> body{ font-size: 60px; font-family: "微软雅黑"; color: red; font-weight: bold; }
#box1{ position: absolute; left: 0px; top: 0px; z-index: 2; }
#box2{ position: absolute; left: 0.06em; top: 0px; color: #999; z-index: 1; } </style> </head> <body>
</body> </html>
