首頁>>前端開發

用CSS做一個很酷流光溢彩的文字特效

首頁 2022-04-09 前端開發 798 ℃Tags:

網上看到一個大佬的文字特效很酷，直接轉載下來：

動畫.gif

實現代碼

<!DOCTYPE html>

<html>

<head>

<title>這個文字特效很酷啊</title>

<style>

body{ background: #222;}

*{margin: 0;padding: 0;}

._borderWrap{

width: 580px;

height: 150px;

position: absolute;

left: 23%;

top: 25%;

}

._border{

line-height: 145px;

text-align: center;

font-size: 40px;

font-weight: bolder;

-webkit-text-fill-color: transparent;

background-image: -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));

background-size: 200%,100%;

-webkit-background-clip: text;

-webkit-animation: word 0.5s linear infinite ;

}

@keyframes word {

0%{background-position: 0 0}

100%{background-position: -100% 0}

}

</style>

</head>

<body>

<div>

<div>這個文字特效很酷啊</div>

</div>

</body>

</html>

將上面的代碼復制，然后保存在記事本中，將擴展名修改為.html，使用瀏覽器打開即可看到CSS制作的流光溢彩的文字效果咯。