CSS3文字样式是实现网页排版美观和有趣的必备之一。CSS3中提供了许多文字处理的新特性,包括变形、阴影、渐变、动画等,下面我们来逐一介绍这些效果。/ 文字变形 / .transform { text...
CSS3文字样式是实现网页排版美观和有趣的必备之一。CSS3中提供了许多文字处理的新特性,包括变形、阴影、渐变、动画等,下面我们来逐一介绍这些效果。
/* 文字变形 */
.transform {
text-transform: uppercase;
transform: rotate(45deg) skew(20deg);
}
/* 文字阴影 */
.shadow {
text-shadow: 3px 3px 5px gray;
}
/* 渐变文字 */
.gradient {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, purple);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 文字动画 */
.animation {
animation: type 2s steps(8) infinite alternate;
}
@keyframes type {
to {
visibility: visible;
}
from {
visibility: hidden;
}
}
/* 文字描边 */
.stroke {
-webkit-text-stroke: 1px black;
} 以上是几个常用的CSS3文字样式,可以通过组合使用实现出更多有趣的效果,让网页更加生动有趣。