純CSS做一個簡單的可編輯文字霓虹燈閃爍效果～#html

個視頻來做一個可編輯的文字霓虹燈閃爍效果。顯示的文字是可以修改的，比方把這些英文刪掉，然后改成HELLO WORLD，過程中它是伴隨著閃爍，還有一個倒影的效果。

·來看一下代碼，html非常簡單，就一個h1的標(biāo)簽，然后寫了一些基本的樣式。先來看一下，現(xiàn)在就這樣，但是這些字母還不可以編輯修改。

·要對這個元素進(jìn)行內(nèi)容編輯，給它添加一個contenteditable屬性，現(xiàn)在這些內(nèi)容就可以修改了。

·再把外面這一圈線outline給它去掉，再給它添加個倒影。把outline設(shè)置為來添加個倒影，倒影用boselifly屬性，在下方1個像素，給個漸變顏色，倒影也出來了。

·再設(shè)置個字體顏色，文字的閃爍效果用動畫來控制，來寫個動畫，讓它五秒鐘完成線性的循環(huán)播放。

·來寫個動畫，控制一下字體顏色發(fā)生變化，百分之一百的時候字體讓它變成白色，再加個文字陰影，有點(diǎn)效果了。陰影多疊加幾層，讓它有一種發(fā)散開來的感覺，逐漸增加模糊的程度，沒問題。

·最后就是讓文字有閃爍的效果，這個也很簡單，給它增加一點(diǎn)中間的過程，來回往這兩個狀態(tài)來切換就可以了。這個大家可以自己來調(diào)一個合適的頻率，沒有問題，里面的內(nèi)容是可以進(jìn)行修改的。

這個視頻就到這里，感謝大家的收看。

font-size:設(shè)置字體大小:

該屬性值的單位可以使用相對單位和絕對單位，推薦使用px。(瀏覽器能夠識別的最小像素是12px)

    p{
      font-size:20px;
    }

常見尺寸單位：

font-family:設(shè)置字體:

如果需要設(shè)置多個字體樣式，則屬性值可以寫多個中間用逗號隔開即可，需要知道的是瀏覽器會從第一個字體屬性值找，直到找到自己設(shè)備有的字體顯示，自己設(shè)備沒有的字體，按設(shè)備默認(rèn)字體顯示,推薦系統(tǒng)默認(rèn)字體。


    p{
      font-family:"微軟雅黑",Arial;
    }

font-weight:設(shè)置字體粗細(xì):

其屬性值有：normal正常不加粗、bold加粗、bolder更粗、lighter更細(xì)、number（整百的數(shù)字）、inherit繼承父級元素字體粗細(xì)

p {
  font-weight:700;
}

font-style:設(shè)置字體風(fēng)格:

如設(shè)置斜體、傾斜或正常字體，其屬性值：normal默認(rèn)值，標(biāo)準(zhǔn)字體、italic斜體、oblique傾斜

font:綜合設(shè)置字體樣式（字體樣式連寫）:

字體樣式連寫是有順序的，必須是嚴(yán)格遵循順序，其中不需要設(shè)置的屬性可以省略，font-size和font-family屬性值必須寫，否則字體連寫失效。


    p{
      /*font:font-style font-weight font-size/line-height font-family;*/
      font:italic bolder 20px/10px Arial;
    }

提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。

筆者：苦海123

其它問題可通過以下方式聯(lián)系本人咨詢：

QQ：810665436

微信：ConstancyMan

、標(biāo)簽的分類：雙標(biāo)簽和單標(biāo)簽

雙標(biāo)簽：就是成對出現(xiàn)的，類似于這種 <html> </html>

單標(biāo)簽：就是可以單個使用的，類似于 <br> 換行標(biāo)簽或 <hr>水平線標(biāo)簽。

二、標(biāo)簽屬性的作用：

標(biāo)簽的屬性是用來定義文字或字符的顏色、寬高、粗細(xì)、大小、等，這個是標(biāo)簽屬性的作用。

三、標(biāo)簽屬性的特性：

1、每一個標(biāo)簽都有自己的屬性，單標(biāo)簽和雙標(biāo)簽都有。

2、一個標(biāo)簽可以有多個屬性。

3、每個屬性都有對應(yīng)的值，值要用單或雙引號引起來。

4、多個屬性之間使用空格隔開。

5、屬性沒有順序之分。

6、字體屬性值，必須是系統(tǒng)可以識別的字體，一般為系統(tǒng)自帶字體。

7、HTML5 中 font 屬性已經(jīng)棄用。

源代碼：↓

<!DOCTYPE html>

<head>

<title>中央氣象局</title>

</head>

<body>

</body>

</html>

在線咨詢

上一篇：如何進(jìn)行自適應(yīng)網(wǎng)頁設(shè)計？
下一篇：用HTML制作一個簡單頁面（代碼閱讀練習(xí)）-零基礎(chǔ)自學(xué)網(wǎng)頁制作

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

純CSS做一個簡單的可編輯文字霓虹燈閃爍效果～#html

、標(biāo)簽的分類：雙標(biāo)簽和單標(biāo)簽

二、標(biāo)簽屬性的作用：

三、標(biāo)簽屬性的特性：

您的項目需求