CSS怎么让一段文字一句一句的显示出来

html-css07

CSS怎么让一段文字一句一句的显示出来,第1张

我的思路是：

1、每句用一个span或者p标签，包裹起来。--为什么这么做？因为，要单独控制样式啊

2、然后依次写动画。-- 结合 keyframes和animation写帧动画。

3、记得给每个动画写延迟时间。--让不同句子出现时间不一样。

举个例子：

<div class="box">

    <p>这是第1个p</p>

    <p>这是第2个p</p>

    <p>这是第3个p</p>

</div>

CSS:

@keyframes  ani{

    0%{  opacity:0 }

    100%{ opacity:1 }

}

.box p:nth-child(1){

   animation: ani 0.2s both

}

.box p:nth-child(2){

   animation: ani 0.2s 0.2s both

}

.box p:nth-child(3){

   animation: ani 0.2s 0.4s both

}

方法一：内嵌样式(为了方便查看效果我给这个段落加了个红色的边框)

方法二：内链样式(为了方便查看效果我给这个段落加了个蓝色的边框)

方法三：外链样式，同方法二，只不过将样式新建一个文件引入即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>无标题文档</title>

<style>

.duangao{

height:100px border:1px solid #00f

}

</style>

</head>

<body>

方法一内嵌样式(为了方便查看效果我给这个段落加了个红色的边框)：

<p style="height:100px border:1px solid #f00">这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.</p>

方法二内链样式(为了方便查看效果我给这个段落加了个红色的边框)：

<p class="duangao">这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.</p>

方法三外链样式，同方法二，只不过将样式新建一个文件引入即可

</body>

</html>

最终效果图如下：

如果想使单行文字垂直居中，即文字不多，将行高和段落设为一样的数值即可。如：height:100pxline-height:100pox