編碼的世界 / 優質文選 / 生涯

css 炫酷鎏金字體,顏色漸變


2022年3月23日
-   

.top>div p{
overflow: hidden; //超出部分隱藏
font-size: 1.2rem; //大小
font-style: oblique; //傾斜
text-align: left;
line-height: 3rem; //垂直居中
background-image: -webkit-linear-gradient(left,green,yellow,pink, blue, red 25%,green 35%,
blue 50%,yellow 60%, red 75%, pink 85%,blue 100%); //括號內可添加多種顏色,多種百分比 線性漸變
-webkit-text-fill-color: transparent; //顏色填充 透明
-webkit-background-clip: text; //背景顏色繪制區域
animation: stream 15s infinite linear; //流動 15秒 循環 直線
background-size: 200% 100%;
}
@keyframes stream { //勻速流動
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}

效果如下,顏色從左到右一直在漸變,彩色鎏金就形成了~

熱門文章