本文主要介绍了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