css文字过渡效果 |css3 宽度变化动画

/* 1. 字符闪烁效果 */
.blink {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
/* 2. 字体颜色渐变效果 */
.gradient {
background: -webkit-linear-gradient(left, red, yellow, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 3. 字体大小变化效果 */
.resize {
font-size: 30px; /* 初始字体大小 */
transition: font-size 1s ease-in-out;
}
.resize:hover {
font-size: 50px; /* 鼠标悬停时的字体大小 */
}
/* 4. 字体倾斜/旋转效果 */
.skew {
transform: skewX(25deg);
}
.rotate {
transform: rotate(20deg);
}
/* 5. 字体出现/消失效果 */
.hide {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.hide:hover {
opacity: 1;
}

以上代码可以在HTML中使用class属性调用，例如：

<p class="blink">这句话将会闪烁</p>
<p class="gradient">这句话将会有彩虹色渐变效果</p>
<p class="resize">当鼠标悬停在这句话上时，字体大小会变大</p>
<p class="skew">这句话将会倾斜</p>
<p class="rotate">这句话将会旋转</p>
<p class="hide">当鼠标悬停在这句话上时，它会出现</p>

通过CSS文字过渡效果，可以让网页内容更加醒目有趣，给用户带来不一样的体验。