您現在的位置是:電腦技術吧?>? 組裝維修 ??>??炫酷發光壁紙,炫酷??>??正文詳情

炫酷發光壁紙,炫酷

完從靈2019-11-16 14:30:54 人圍觀
簡介免費炫酷特效主題CSS3制作了很酷的自定義發光文本。本文共享一個基于純CSS3的文本發光效果。當我們將鼠標移到文本上時,文本將模擬發光動畫,顯示非常酷的發光圖片。另外,由于字

CSS3制作炫酷的自定義發光文字。

本文為大家分享一款基于純CSS3的文字發光特效,當我們將鼠標滑過文字時,文字就會模擬發光動畫,展現出非常酷的發光畫面。

另外,由于引用了特殊字體,所以整個文字效果看起來有著3D立體的特效,如果你的網絡無法加載這些字體,可能是由于國外的這個網站被墻的緣故,就像google的字體庫網址被屏蔽那樣。

HTML代碼XML/HTML Code復制內容到剪貼板

    div id=container pa href=# RED /a/p pa href=# BLUE /a/p pa href=# Yellow /a/p pa href=# GREEN /a/p pa href=# ORANGE /a/p pa href=# VIOLET /a/p /div
CSS代碼CSS Code復制內容到剪貼板
    /*setup*/ *{ margin: 0; padding: 0; } @font-face { font-family: 'Monoton'; font-style: normal; font-weight: 400; src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff'); } @font-face { font-family: 'Iceland'; font-style: normal; font-weight: 400; src: local('Iceland'), local('Iceland-Regular'), url(http://themes.googleusercontent.com/static/fonts/iceland/v3/F6LYTZLHrG9BNYXRjU7RSw.woff) format('woff'); } @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; src: local('Pacifico Regular'), local('Pacifico-Regular'), url(http://themes.googleusercontent.com/static/fonts/pacifico/v5/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff) format('woff'); } @font-face { font-family: 'PressStart'; font-style: normal; font-weight: 400; src: local('Press Start 2P'), local('PressStart2P-Regular'), url(http://themes.googleusercontent.com/static/fonts/pressstart2p/v2/8Lg6LX8-ntOHUQnvQ0E7o3dD2UuwsmbX3BOp4SL_VwM.woff) format('woff'); } @font-face { font-family: 'Audiowide'; font-style: normal; font-weight: 400; src: local('Audiowide'), local('Audiowide-Regular'), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); } @font-face { font-family: 'Vampiro One'; font-style: normal; font-weight: 400; src: local('Vampiro One'), local('VampiroOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format('woff'); } body{ background-color: #222222; } #container{ margin:auto; } /*neeeeoooon*/ p{ text-align:center; font-size:7em; margin:20px 0 20px 0; } a{ text-decoration:none; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } p:nth-child(1) a{ color:#FF1177; font-family:Monoton; } p:nth-child(1) a:hover{ -webkit-animation: neon1 1.5s ease-in-out infinite alternate; -moz-animation: neon1 1.5s ease-in-out infinite alternate; animation: neon1 1.5s ease-in-out infinite alternate; } p:nth-child(2) a{ font-size:1.5em; color:#228DFF; font-family:Iceland; } p:nth-child(2) a:hover{ -webkit-animation: neon2 1.5s ease-in-out infinite alternate; -moz-animation: neon2 1.5s ease-in-out infinite alternate; animation: neon2 1.5s ease-in-out infinite alternate; } p:nth-child(3) a{ color:#FFDD1B; font-family:Pacifico; } p:nth-child(3) a:hover{ -webkit-animation: neon3 1.5s ease-in-out infinite alternate; -moz-animation: neon3 1.5s ease-in-out infinite alternate; animation: neon3 1.5s ease-in-out infinite alternate; } p:nth-child(4) a{ color:#B6FF00; font-family:PressStart; font-size:0.8em; } p:nth-child(4) a:hover{ -webkit-animation: neon4 1.5s ease-in-out infinite alternate; -moz-animation: neon4 1.5s ease-in-out infinite alternate; animation: neon4 1.5s ease-in-out infinite alternate; } p:nth-child(5) a{ color:#FF9900; font-family:Audiowide; } p:nth-child(5) a:hover{ -webkit-animation: neon5 1.5s ease-in-out infinite alternate; -moz-animation: neon5 1.5s ease-in-out infinite alternate; animation: neon5 1.5s ease-in-out infinite alternate; } p:nth-child(6) a{ color:#BA01FF; font-family:Vampiro One; } p:nth-child(6) a:hover{ -webkit-animation: neon6 1.5s ease-in-out infinite alternate; -moz-animation: neon6 1.5s ease-in-out infinite alternate; animation: neon6 1.5s ease-in-out infinite alternate; } p a:hover{ color:#ffffff; } /*glow for webkit*/ @-webkit-keyframes neon1 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177; } } @-webkit-keyframes neon2 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; } } @-webkit-keyframes neon3 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B; } } @-webkit-keyframes neon4 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00; } } @-webkit-keyframes neon5 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900; } } @-webkit-keyframes neon6 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de; } } /*glow for mozilla*/ @-moz-keyframes neon1 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177; } } @-moz-keyframes neon2 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; } } @-moz-keyframes neon3 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B; } } @-moz-keyframes neon4 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00; } } @-moz-keyframes neon5 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900; } } @-moz-keyframes neon6 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de; } } /*glow*/ @keyframes neon1 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177; } } @keyframes neon2 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; } } @keyframes neon3 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B; } } @keyframes neon4 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00; } } @keyframes neon5 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900; } } @keyframes neon6 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de; } } /*REEEEEEEEEEESPONSIVE*/ @media (max-width: 650px) { #container{ width: 100%; } p{ font-size:3.5em; } }
以上就是本文的全部內容,希望對大家的學習有所幫助。

版權聲明:本文由 完從靈 整理編輯。

原標題:發光炫酷頭像,ps炫酷發光特效

轉載注明出處:http://www.dn9ww09s.icu/assemble/12858.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • win7激活密匙,win7旗艦版密匙

    win7激活密匙,win7旗艦版密匙 相關圖片windows7怎么激活密匙Win7是目前使用最廣泛的Windows操作系統版本。有時我們會遇到系統重新安裝或從其他版本修改為win7,但win7需要激活才能正常使用。為了讓更多的用戶體驗如何查看w...

  • 一鍵啟動,一鍵啟動按了沒反應

    一鍵啟動,一鍵啟動按了沒反應 相關圖片無鑰匙啟動啟動頁面也被稱為flash screen,它已經開始出現在越來越多的本地化應用程序中。現在,越來越多的應用程序將啟動頁面作為必要的UI組件添加到了它們的產品中。無鑰匙啟動怎...

  • 賽博加速器用不了,賽博加速器好用嗎

    賽博加速器用不了,賽博加速器好用嗎 相關圖片賽博加速器激活碼怎么用賽博加速器是網絡游戲加速器的一個很好的應用,特別是當玩家玩外服游戲時,他們特別喜歡使用賽博加速器。如何使用塞伯坦?使用塞伯坦很容易。啟動Cybe...

  • 黑鯊裝機大師怎么用,黑鯊裝機大師能用嗎

    黑鯊裝機大師怎么用,黑鯊裝機大師能用嗎 相關圖片用了黑鯊裝機大師重啟不了當您需要重新安裝計算機系統時,網絡上有許多一鍵式安裝工具,非常容易使用。黑鯊安裝大師就是其中之一。它是一款簡單方便的系統重裝軟件,可以快速...

  • 表單標簽是,html表單樣式

    表單標簽是,html表單樣式 相關圖片html5表單input[表單目的]對于一般的網頁設計初學者來說,表單功能并不常用,因為表單必須使用CGI、JavaScript或ASP程序來操作,否則單靠表單沒有多大意義。但是,一旦html制作表單...

  • markdown筆記是什么,markdown做筆記

    markdown筆記是什么,markdown做筆記 相關圖片markdown是什么威志筆記是一個非常容易使用的筆記軟件。偉志筆記是一款專注于高效工作筆記的移動應用,也是中國唯一的云筆記產品。很多用戶不知道降價可以用來了解筆記印象筆記...

  • 容器排污閥怎么設置,容器被重新設置大小

    容器排污閥怎么設置,容器被重新設置大小 相關圖片權限設置并未向在應用程序容器設置容器的文本行為將替換具有指定內容的頁面上的現有容器。頁面上的容器引用任何可以包含文本或其他元素的HTML元素;指定的內容可以包含任何有效...

  • mxfq,mxfq怎么用

    mxfq,mxfq怎么用 相關圖片類似mxfq的xp模塊經常使用Android手機的用戶對mxfq并不陌生。Mxfq是QQ聊天工具的一個小版本。它可以和QQ結合使用,但是它的窗口很小,而且還可以設置為透明,這不會影響q酷安...

  • 天貓積分獲得,如何快速獲得天貓積分

    天貓積分獲得,如何快速獲得天貓積分 相關圖片天貓積分怎么來的當買家在天貓購物時,會得到一定數量的天貓積分。以前,天貓積分可以用來扣除購買金額,但后來這個功能被取消了,天貓積分可以用來兌換積分權益,兌換天貓購...

  • 女人的顏色,美女

    女人的顏色,美女 相關圖片給點顏色就發這篇文章不是讓你看這篇文章來做這個效果,而是給你一些啟發。我不想再叫這個教程了。我只想和你分享我的一些感受。也許你可以發現你需要什么來添加你獨特的想法...

熱評文章

  • 泡泡加速器怎么收費,泡泡加速器畫質設置

    泡泡加速器怎么收費,泡泡加速器畫質設置 相關圖片泡泡加速器登不上網絡游戲加速器現在是每個人玩網絡的必備工具。但網絡游戲加速器的價格要比普通加速器貴一點。如果你想省錢,可以試試泡沫加速器。泡泡加速器是許多網吧使用...

  • htmlinput屬性,html input標簽屬性

    htmlinput屬性,html input標簽屬性 相關圖片html input value在沒有電腦、電視、手機和交通工具的兩天之后,我習慣了這樣嘈雜的節奏,然后又回到了這樣干凈的環境。就像洗衣服一樣,但同時我有點害怕,好像什么也做不了。如果...

  • 抖音事件視頻mp4資源共享,下載枓音視頻

    抖音事件視頻mp4資源共享,下載枓音視頻 相關圖片抖音短視頻有很多關于自助餐的有趣視頻。我想把它們下載到我的本地收藏中。不過,有些用戶還是不知道如何下載視頻,即使下載了,也會發現里面還有些煩人的水?=Yang Yang的抖音怎...

  • 20個分鏡頭范例,文字稿本范例

    20個分鏡頭范例,文字稿本范例 相關圖片采訪分鏡頭腳本范例個人網站有很多用途,包括市場營銷、求職、個人品牌推廣、創意表達,或者只是與同行交流。與社交媒體或企業門戶相比,個人網站作為一個發布平臺往往更加自...

  • excel每頁都打印表尾,excel表頭固定打印

    excel每頁都打印表尾,excel表頭固定打印 相關圖片excel每頁固定表頭在日產的工作和學習中,excel是我們總結數據的重要工具。有時當我們需要打印excel時,需要在每一頁上都有一個標題,這樣我們才能更直觀地看到情況。Excel打電子表格...

  • wacom 驅動,wacom驅動更新

    wacom 驅動,wacom驅動更新 相關圖片wacom安卓驅動華康是一個經典的手繪板品牌。許多用戶在連接到計算機時會提示安裝相應的驅動程序。但是,有些用戶遇到了無法安裝wacom驅動程序的情況。原因是什么以及如何解決wac...

  • 用戶體驗原則,用戶體驗遵循的原則

    用戶體驗原則,用戶體驗遵循的原則 相關圖片用戶體驗理念Firefish注:皮克斯動畫工作室,簡稱皮克斯。1986年,史蒂夫·喬布斯以1000萬元的身價領跑后,創作了《玩具總動員》、《海底總動員》和《腦力特工隊》等經用戶體驗交互...

  • 手機swf轉換mp4格式轉換器,手機swf怎么轉換成mp4

    手機swf轉換mp4格式轉換器,手機swf怎么轉換成mp4 相關圖片swf轉換成mp4無聲音目前,從網頁上下載的視頻文件大多采用swf格式,有些用戶通過flash制作swf文件。但是,有時swf文件不符合用戶的使用規則,希望將swf格式轉換為mp4swf轉換mp4為什么會亂...

  • 像一幅作品,像風一般作品

    像一幅作品,像風一般作品 相關圖片像神一樣的txt作品越來越多的國內設計師正轉向Behance,在社區展示他們設計案例的所有細節。那么,我們應該怎么做才能看起來像一個經常在專家聚集的設計社區工作的設計師呢?今天...

  • system not found,not found

    system not found,not found 相關圖片monitoringsystem一些計算機用戶在開機后遇到操作系統找不到的錯誤提示,無法正常開機。這是什么原因?如何解決system recovery...

關注微信

变脸官网查询