html那种折叠文字内容怎么实现,html+css实现文字折叠特效实例

本文主要介绍了html+css实现文字折叠特效实例，分享给大家，具体如下：

效果：

实现：

1. 定义标签：

aurora

2. 设置文字基本样式：

h1{

text-transform: uppercase;

letter-spacing: 3px;

font-size: 15vw;

transform: rotate(-10deg) skew(30deg);

position: relative;

color: rgba(0, 101, 253, 0.6);

-webkit-text-stroke: 2px rgba(0, 101, 253, 0.6);

transition: all 1s;

}

text-transform: uppercase; 字母变为大写字母。

letter-spacing: 3px; 字间距。

transform: rotate(-10deg) skew(30deg); 先旋转-10deg，再倾斜30deg。

-webkit-text-stroke: 2px rgba(0, 101, 253, 0.6); 文字边框 详细

transition: all 1s; 过渡效果

3. 鼠标经过文字显示内陷效果：

h1:hove