css 文字从中间展开
时间: 2023-07-25 08:38:11 浏览: 167
animate.css制作酷炫文字特效
你可以使用CSS的text-align和display属性来实现文字从中间展开的效果。具体实现步骤如下:
1. 首先,将文本包裹在一个容器中,比如一个div。
2. 设置这个容器的text-align属性为center,将文本居中对齐。
3. 设置这个容器的display属性为inline-block,使得容器宽度只会根据文本的宽度来调整。
4. 给容器添加一个伪元素::before和::after,分别代表文本前后的空白部分。
5. 将这两个伪元素的content属性设置为空字符串,将它们的display属性设置为inline-block,width属性设置为50%。
6. 最后,设置这两个伪元素的text-align属性分别为left和right,将它们分别放置在文本的前后。
下面是具体的CSS代码:
```
.container {
text-align: center;
display: inline-block;
position: relative;
}
.container::before,
.container::after {
content: "";
display: inline-block;
width: 50%;
height: 1px;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #000;
}
.container::before {
right: 100%;
text-align: right;
margin-right: 10px;
}
.container::after {
left: 100%;
text-align: left;
margin-left: 10px;
}
```
这样设置之后,文本就会从中间展开了。
阅读全文