“一个字一个字出现”的版本间的差异

来自产品维基百科
跳转至： 导航、 搜索
（创建页面，内容为“ 登录 在网页中实现文字的一个一个出现 原创 opooc 2018-05-13 阅读数：1850 关注 <html> <head> <meta http-equiv="Content-Type" content="t...”）
 
 
（未显示同一用户的3个中间版本）
第1行： 第1行：
 +
 +
{{一个字一个字出现}}
 +
商城
 +
论坛
 +
活动
 +
招聘
 +
GitChat
 +
ITeye
 +
专题
 +
打开CSDN APP
 +
Copyright © 1999-2019, CSDN.NET, All Rights Reserved
  
 
  登录
 
  登录
−
在网页中实现文字的一个一个出现 原创
+
CSS文字效果 原创
 +
 
 +
Bear
 +
2019-09-16 阅读数：121
 +
关注
 +
这里是一些文字效果总结。
 +
 
 +
示例1（竖版从右至左的古文顺序）：
 +
 
  
  
−
opooc
+
<!DOCTYPE html>
−
2018-05-13 阅读数：1850
 
−
关注
 
 
<html>
 
<html>
−
<head>
+
<head>
−
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
<meta charset="UTF-8">
−
    <title>opooc</title>
+
<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>
 +
<div id="content">
 +
大江东去<br />
 +
浪淘尽<br />
 +
千古风流人物<br />
 +
故垒西边人道是<br />
 +
三国周郎赤壁<br />
 +
乱石穿空<br />
 +
惊涛拍岸<br />
 +
卷起千堆雪<br />
 +
江山如画<br />
 +
一时多少豪杰<br />
 +
遥想公谨当年<br />
 +
小乔初嫁了<br />
 +
雄姿英发<br />
 +
羽扇纶巾谈笑间<br />
 +
强虏灰飞烟灭<br />
 +
故国神游<br />
 +
多情应笑我<br />
 +
早生华发<br />
 +
人生如梦<br />
 +
一尊还酹江月<br />
 +
</div>
 +
</body>
 +
</html>
 +
  
−
</head>
+
示例2（文字阴影）：
−
<style >
 
−
div{
 
−
    width: 800px;
 
−
    height: 30px;
 
−
    border:1px
 
−
    solid #ef3333;
 
−
    color: greenyellow;
 
−
}
 
−
</style>
 
−
<body>
 
−
<div id = "test"></div>
 
−
<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>
+
<!DOCTYPE html>
−
</body>
+
<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>
 +
<div id="box1">富强 民主 文明 和谐</div>
 +
<div id="box2">富强 民主 文明 和谐</div>
 +
</body>
 
</html>
 
</html>

2019年12月7日 (六) 13:07的最新版本

<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>

取自“http://cpwiki.sseuu.com/index.php?title=一个字一个字出现&oldid=20082”