CSS如何實(shí)現(xiàn)炫酷的文字效果

今天小編給大家分享一下CSS如何實(shí)現(xiàn)炫酷的文字效果的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比順慶網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式順慶網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋順慶地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。

CSS是一門很特殊的語(yǔ)言，你認(rèn)為CSS只能用來(lái)控制網(wǎng)頁(yè)的結(jié)構(gòu)與樣式，但只要你有豐富的想象力，就能創(chuàng)造無(wú)限可能。

一.漸變文字效果

該效果主要利用background-clip:text配合color實(shí)現(xiàn)漸變文字效果首先了解background-clip: text;的意思：以盒子內(nèi)的文字作為裁剪區(qū)域向外裁剪，文字之外的區(qū)域都將被裁剪掉。

給文本容器設(shè)置漸變背景

 background: linear-gradient(90deg, black 0%, white 50%, black 100%);

設(shè)置webkit-background-clip屬性，以文字作為裁剪區(qū)域向外裁剪

-webkit-background-clip: text;
        background-clip: text;

通過(guò)-webkit-animation屬性設(shè)置動(dòng)畫,即可實(shí)現(xiàn)上述效果

-webkit-animation: shining 3s linear infinite;
        animation: shining 3s linear infinite;

@-webkit-keyframes shining {
  from {
    background-position: -500%;
  }
  to {
    background-position: 500%;
  }
}
@keyframes shining {
  from {
    background-position: -500%;
  }
  to {
    background-position: 500%;
  }
}

樣式引用

<html>
    <link rel="stylesheet" href="./css/neno-text-style.css">
    <body>
        <p class="neon">前端實(shí)驗(yàn)室</p>
    </body>
</html>

二.彩虹文字效果（跑馬燈）

CSS如何實(shí)現(xiàn)炫酷的文字效果

.text {
    letter-spacing: 0.2rem;
    font-size: 1.5rem;
    background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
}

該效果也是利用background-clip:text和線性漸變屬性linear-gradient實(shí)現(xiàn)，通過(guò)設(shè)置區(qū)域顏色值實(shí)現(xiàn)了彩虹文字的效果。

動(dòng)態(tài)彩虹文字需要設(shè)置-webkit-animation屬性

-webkit-animation: maskedAnimation 4s infinite linear;
@keyframes maskedAnimation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

CSS樣式

.rainbow {
    letter-spacing: 0.2rem;
    font-size: 1.2rem;
    text-transform: uppercase;
}
.rainbow span {
    animation: rainbow 50s alternate infinite forwards;
}
@keyframes rainbow {
    0% {
        color: #efc68f;
    }
    ...
    100% {
        color: #8fefed;
    }
}

<html>
    <head>
        <link rel="stylesheet" href="./css/rainbow-color-text-style.css">
    </head>
    <body>
        <div class="text">【前端實(shí)驗(yàn)室】分享前端最新、最實(shí)用前端技術(shù)</div>
    </body>
</html>

三.發(fā)光文字效果

該效果主要利用text-shadow屬性實(shí)現(xiàn)。text-shadow屬性向文本添加一個(gè)或多個(gè)陰影。該屬性是逗號(hào)分隔的陰影列表，每個(gè)陰影有兩個(gè)或三個(gè)長(zhǎng)度值和一個(gè)可選的顏色值進(jìn)行規(guī)定。

.neon {
    color: #cce7f8;
    font-size: 2.5rem;
    -webkit-animation: shining 0.5s alternate infinite;
    animation: shining 0.5s alternate infinite;
}

@-webkit-keyframes shining {
    from {
        text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;
    }
    to {
        text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;
    }
}

<html>
    <head>
        <link rel="stylesheet" href="./css/neno-text-style.css">
    </head>
    <body>
        <p class="neon">【前端實(shí)驗(yàn)室】分享前端最新、最實(shí)用前端技術(shù)</p>
    </body>
</html>

四.打字機(jī)效果

CSS如何實(shí)現(xiàn)炫酷的文字效果

該效果主要是通過(guò)改變?nèi)萜鞯膶挾葘?shí)現(xiàn)的。

.typing {
    color: white;
    font-size: 2em;
    width: 21em;
    height: 1.5em;
    border-right: 1px solid transparent;
    animation: typing 2s steps(42, end), blink-caret .75s step-end infinite;
    font-family: Consolas, Monaco;
    word-break: break-all;
    overflow: hidden;
}

/* 打印效果 */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 21em;
    }
}
/* 光標(biāo) */
@keyframes blink-caret {
    from,
    to {
        border-color: transparent;
    }
    50% {
        border-color: currentColor;
    }
}

<html>
   <head>
   <link rel="stylesheet" href="./css/typing-style.css">
   </head>
   <body>
   <div class="typing">【前端實(shí)驗(yàn)室】分享前端最新、最實(shí)用前端技術(shù)</div>
</html>

white-space:nowrap屬性主要是為了保證一行顯示，這里考慮到英文字母的顯示，去除了該屬性，保證不會(huì)出現(xiàn)字符間斷的情況。

word-break:break-all使英文字符可以一個(gè)一個(gè)的呈現(xiàn)出來(lái)。

animation屬性中的steps功能符可以讓動(dòng)畫斷斷續(xù)續(xù)的執(zhí)行，而非連續(xù)執(zhí)行。

steps()語(yǔ)法表示:steps(number, position)，其中number關(guān)鍵字表示將動(dòng)畫分為多少段；position關(guān)鍵字表示動(dòng)畫是從時(shí)間段的開(kāi)頭連續(xù)還是末尾連續(xù)，支持start和end倆個(gè)關(guān)鍵字，含義分別如下：

start:表示直接開(kāi)始
end:表示戛然而止，為默認(rèn)值

光標(biāo)效果是通過(guò)box-shadow模擬實(shí)現(xiàn)的。通過(guò)上述的這幾個(gè)屬性就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)易的打字機(jī)效果了~

五.故障風(fēng)格文字效果

CSS如何實(shí)現(xiàn)炫酷的文字效果

該動(dòng)畫效果比較復(fù)雜，主要用到了CSS偽元素、元素自定義屬性、蒙版屬性、animation動(dòng)畫等等。

<div class="text" data-text="歡迎關(guān)注微信公眾號(hào)【前端實(shí)驗(yàn)室】">
  歡迎關(guān)注微信公眾號(hào)【前端實(shí)驗(yàn)室】
</div>

這里主要使用了自定義屬性，data-加上自定義的屬性名，賦值要顯示的文字供偽元素獲取到對(duì)應(yīng)的文字。

@keyframes animation-before{
    0% {
        clip-path: inset(0 0 0 0);
    }
    ...
    100% {
        clip-path: inset(.62em 0 .29em 0);
    }
}
@keyframes animation-after{
      0% {
        clip-path: inset(0 0 0 0);
    }
    ...
    100% {
        clip-path: inset(.29em 0 .62em 0);
    }
}

這里設(shè)置了兩個(gè)keyframes，分別為 animation-before 、animation-after，前者是準(zhǔn)備給偽元素 before 使用的，后者是給偽元素 after 使用的。

其中clip-path屬性是CSS3的新屬性蒙版，其中的inset()值表示的是蒙版形狀為矩形,定義蒙版的作用區(qū)域后通過(guò)@keyframes來(lái)設(shè)置逐幀動(dòng)畫，使蒙版的作用區(qū)域在垂直方向一直變化，實(shí)現(xiàn)上下抖動(dòng)的效果。

.text{
    display: inline-block;
    font-size: 3.5em;
    font-weight: 600;
    padding: 0 4px;
    color: white;
    position: relative;
}

.text::before{
    content: attr(data-text);
    position: absolute;
    left: -2px;
    width: 100%;
    background: black;
    text-shadow:2px 0 red;
    animation: animation-before 3s infinite linear alternate-reverse;
}

.text::after{
    content: attr(data-text);
    position: absolute;
    left: 2px;
    width: 100%;
    background: black;
    text-shadow: -2px 0 blue;
    animation: animation-after 3s infinite linear alternate-reverse;
}

最后我們?cè)O(shè)置兩個(gè)偽元素before和after，分別定位到跟父元素同樣的位置，然后分別向左、右側(cè)移一點(diǎn)點(diǎn)的距離，制作一個(gè)錯(cuò)位的效果，然后都將背景色設(shè)置為與父元素背景色一樣的顏色，用于遮擋父元素

以上就是“CSS如何實(shí)現(xiàn)炫酷的文字效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標(biāo)題：CSS如何實(shí)現(xiàn)炫酷的文字效果
當(dāng)前URL：http://chinadenli.net/article12/jegogc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、電子商務(wù)、ChatGPT、小程序開(kāi)發(fā)、響應(yīng)式網(wǎng)站、靜態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

CSS如何實(shí)現(xiàn)炫酷的文字效果