css3文字显示效果代码 |css3做尖角下拉框

/* 文字渐变 */
.gradient-text {
background: linear-gradient(to right, #30CFD0, #330867);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 阴影文字 */
.shadow-text {
text-shadow: 2px 2px 0 #39CCCC, 4px 4px 0 #36D7B7;
}
/* 破碎文字 */
.cracked-text {
background-image: url("https://assets.codepen.io/137105/cracked-pattern.png");
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 海浪文字 */
.wave-text {
position: relative;
display: inline-block;
font-size: 5em;
transform: rotate(-10deg);
animation: wave 5s infinite;
}
@keyframes wave {
0% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
100% { transform: rotate(-10deg); }
}

以上代码中，大家使用了CSS3中的渐变、阴影、背景图案、动画等属性，达到了各种炫酷的文字效果。这些效果可以应用于各种网页设计中，为用户带来更好的视觉体验。