【開發小技巧】024—如何使用HTML和CSS創建加載模糊文本動畫效果?

2021-03-02 web前端開發
英文 | https://www.geeksforgeeks.org/how-to-create-loading-blur-text-animation-effect-using-html-and-css/?ref=rp模糊文本動畫被稱為「煙燻效果」，用於為我們的文本提供模糊動畫。本文在一個方向上線性模糊，然後重新出現。
方法：本文的方法非常簡單。我們正在使用blur（）函數對模糊效果進行動畫處理。然後，我們使用第n個子屬性來應用動畫延遲。現在，讓我們直接看一下代碼。HTML代碼：我們創建了一個div元素，並將加載文本字符包裝在span元素內。
<!DOCTYPE html> <html lang="en"> 
<head>     <meta charset="UTF-8" />     <meta name="viewport" content=         "width=device-width, initial-scale=1.0" />     <title>GeeksforGeeks</title> </head> 
<body>     <div>         <span>G</span>         <span>e</span>         <span>e</span>         <span>k</span>         <span>s</span>         <span>f</span>         <span>o</span>         <span>r</span>         <span>G</span>         <span>e</span>         <span>e</span>         <span>k</span>         <span>s</span>     </div> </body> 
</html>
步驟1：第一步很簡單，我們將文本居中對齊並為我們的身體提供背景。
步驟2：然後，我們提供了一個線性動畫，其關鍵幀標識符為animate。
步驟3：現在我們使用關鍵幀將模糊功能應用於動畫的不同幀。
步驟4：最後一步是應用第n個子概念為每個角色提供動畫延遲，以便在一個時間點只有一個角色變得模糊。
<style>     body {         margin: 0;         padding: 0;         background: green;     } 
    .geeks {         position: absolute;         top: 50%;         left: 50%;         transform: translate(-50%, -50%);         font-size: 30px;         font-weight: 800;         letter-spacing: 5px;     } 
    .geeks span {         animation: animate 3s linear infinite;     } 
    .geeks span:nth-child(1) {         animation-delay: 0s;     } 
    .geeks span:nth-child(2) {         animation-delay: 0.1s;     } 
    .geeks span:nth-child(3) {         animation-delay: 0.2s;     } 
    .geeks span:nth-child(4) {         animation-delay: 0.3s;     } 
    .geeks span:nth-child(5) {         animation-delay: 0.4s;     } 
    .geeks span:nth-child(6) {         animation-delay: 0.5s;     } 
    .geeks span:nth-child(7) {         animation-delay: 0.6s;     } 
    .geeks span:nth-child(8) {         animation-delay: 0.9s;     } 
    .geeks span:nth-child(9) {         animation-delay: 0.8s;     } 
    .geeks span:nth-child(10) {         animation-delay: 0.9s;     } 
    .geeks span:nth-child(11) {         animation-delay: 1s;     } 
    .geeks span:nth-child(12) {         animation-delay: 1.1s;     } 
    .geeks span:nth-child(13) {         animation-delay: 1.2s;     } 
    @keyframes animate {         0% {             filter: blur(0);         } 
        40% {             filter: blur(20px);         } 
        80% {             filter: blur(0);         } 
        100% {             filter: blur(0);         }     } </style>
完整代碼：在本節中，我們將結合以上兩個部分來創建加載文本動畫效果。
<!DOCTYPE html> <html lang="en"> 
<head>     <meta charset="UTF-8" />     <meta name="viewport" content=         "width=device-width, initial-scale=1.0" /> 
    <title>Document</title>     <style>         body {             margin: 0;             padding: 0;             background: green;         } 
        .geeks {             position: absolute;             top: 50%;             left: 50%;             transform: translate(-50%, -50%);             font-size: 30px;             font-weight: 800;             letter-spacing: 5px;         } 
        .geeks span {             animation: animate 3s linear infinite;         } 
        .geeks span:nth-child(1) {             animation-delay: 0s;         } 
        .geeks span:nth-child(2) {             animation-delay: 0.1s;         } 
        .geeks span:nth-child(3) {             animation-delay: 0.2s;         } 
        .geeks span:nth-child(4) {             animation-delay: 0.3s;         } 
        .geeks span:nth-child(5) {             animation-delay: 0.4s;         } 
        .geeks span:nth-child(6) {             animation-delay: 0.5s;         } 
        .geeks span:nth-child(7) {             animation-delay: 0.6s;         } 
        .geeks span:nth-child(8) {             animation-delay: 0.9s;         } 
        .geeks span:nth-child(9) {             animation-delay: 0.8s;         } 
        .geeks span:nth-child(10) {             animation-delay: 0.9s;         } 
        .geeks span:nth-child(11) {             animation-delay: 1s;         } 
        .geeks span:nth-child(12) {             animation-delay: 1.1s;         } 
        .geeks span:nth-child(13) {             animation-delay: 1.2s;         } 
        @keyframes animate {             0% {                 filter: blur(0);             } 
            40% {                 filter: blur(20px);             } 
            80% {                 filter: blur(0);             } 
            100% {                 filter: blur(0);             }         } </style> </head> 
<body>     <div>         <span>G</span>         <span>e</span>         <span>e</span>         <span>k</span>         <span>s</span>         <span>f</span>         <span>o</span>         <span>r</span>         <span>G</span>         <span>e</span>         <span>e</span>         <span>k</span>         <span>s</span>     </div> </body> 
</html>

相關焦點

  • 使用CSS3 Cubic-Bezier創建動畫連結懸停效果
    我們將使用CSS3動畫過渡來創建簡單但引人入勝的連結懸停效果，將滑鼠懸停在連結上時，會彈出一個小彈出框。
  • 如何在HTML文檔中使用CSS樣式表?
    如果我們想使用「內部樣式表」將CSS添加到我們的Html文檔中，請參考以下步驟。步驟1：首先，在文本編輯器中輸入HTML代碼，或者打開現有的HTML文件。步驟2：將<style>標籤放置在<head>標籤的開始和結束之間，在<title>標籤之後。
  • 僅使用 HTML 和 CSS 實現毛玻璃效果(Glassmorphism)
    什麼是毛玻璃效果基本上，它的主要特徵就是半透明的背景，以及陰影和邊框。同時還要為背景加上模糊效果，使得背景之後的元素根據自身內容產生漂亮的「變形」效果。示例：你可以在上圖中右側代碼後面看到我所說的模糊效果，後方的內容產生了漂亮的變形效果，同時還保持了可讀性，賞心悅目。這就是本教程要構建出的效果。我們將看到如何僅用 HTML 和 CSS 來實現它。
  • 手把手,帶你使用UIWebView加載HTML和Gif動畫
    1.4 手把手，帶你使用UIWebView加載HTML和Gif動畫 [iOS開發中的神兵利器]1. 本節課將為您演示，如何使用網頁視圖加載網頁代碼和Gif動畫。此時我們已經在項目中導入了一張Gif圖片。2.然後在左側的項目導航區，打開視圖控制器的代碼文件。
  • Python學習第235課——html引入css的4種方式
    比如我現在在自己的電腦桌面上，創建一個txt文本文檔，然後我們把my first html.html這個文件中<style>標籤中的css代碼複製到這個文本文檔中，保存並關閉之後，給這個文本文檔進行重命名，命名為first.css。操作如下圖：上圖是創建單獨的外部css文件的一種方法，還有一種方法就是用vscode去創建。
  • 10個非常實用的CSS技巧
    CSS 有一些驚人的隱藏提示和技巧，可以用來改善你網站的外觀。在本文中，我們將介紹每個前端開發人員在開發出色且用戶友好的網頁時需要知道的一些很棒的 CSS 技巧。現在，就讓我們開始吧。1、首字下沉我們可以在 CSS 中實現首字下沉。它比看起來簡單得多。查看下面顯示的圖像和代碼片段。
  • 20個 CSS 快速提升技巧
    /本文涵蓋了20個css技巧，可以解決許多工作中常見的問題。Box Decoration Break屬性允許您僅對文本應用樣式，同時保持填充和頁邊距的完整性。內聯塊聲明允許將顏色、背景、頁邊距和填充應用於每行文本，而不是整個元素，克隆聲明確保將這些樣式均勻地應用於每行。
  • 使用CSS文字陰影創建有趣的效果
    讓我們來看看如何使用CSS的text-shadow屬性來創建真正的3D文本。
  • 八個CSS函數的小技巧
    ，並且隨著時間的推移，樣式表語言越來越強大，能實現許多原先需要依靠JavaScript才能實現的功能。1.純CSS Tooltip許多網站還是在使用JavaScript來創建Tooltip效果，但實際上通過CSS能更簡單的實現。最簡單的方法是在你的HTML代碼中添加一個帶有提示文本的屬性，比如data-tooltip="…"。然後你就可以在你的CSS文件中添加以下的代碼通過attr()函數來顯示提示文字：相當簡單對吧？
  • 能使用html,css解決的問題就不要使用JS
    你可以用js控制，但是用一點CSS技巧就可以達到這個目的，不需要使用JS。-- buy.html --><body></body>　　這樣子，如果當前頁面是home，則body.home na li.home這條規則生效，home的導航將高亮　　這個技藝在《精通CSS》這種書裡面有提及。如果你用js控制，那麼在腳本加載好之前，當前頁面是不會高亮的，而腳本加載好之後突然就高亮了。所以用js吃力不討好。
  • HTML/ CSS 入門
    就像我們熟知的 .txt 文本文件一樣， HTML 文檔（後綴為 .html）也可以使用任意文本編輯器打開。>如何嵌套 HTML 文檔取決於打開和關閉標籤的位置。Web 開發人員依靠特定的 HTML 標籤來增強網頁顯示：<basefont> 為整個 HTML 文檔定義了一種字體也可以使用幾個 HTML 屬性：幾個margin屬性可用於在元素的任何一側添加間隔的空間但最重要的是，為了創建視覺上對齊（通常是彼此定位
  • HTML技巧篇:如何讓單行文本以及多行文本溢出顯示省略號(…)
    本篇文章主要給大家介紹一下在html頁面中如何讓單行文本以及多行文本溢出顯示省略號(…)。核心css語句：1、overflow:hidden; （顧名思義超出限定的寬度就隱藏內容）2、white-space: nowrap; （設置文字在一行顯示不能換行）3、text-overflow: ellipsis;（規定當文本溢出時顯示省略符號來代表被修剪的文本）我們具體的代碼效果演示就如下圖所示：（設置ul寬度為300，超出的文字內容讓其自動隱藏並顯示
  • CSS高級特效的必備技巧
    在此示例中，我想探討文本如何與樹葉背景融合。由於圖像中包含暗點和亮點，因此在使文本看起來像在每片葉子下移動一樣，這將起到非常有用的作用。editors=0100帶有SVG圖形的文本個有趣的效果是在帶有矢量和形狀的背景上有一個標題。當形狀的顏色不同時，它會變得更加有趣。
  • SAP UI的加載動畫效果和幽靈設計(Ghost Design)
    在我看來，無論是幽靈設計，還是之前 SAP UI5 提供的頁面加載動畫效果，都是改善用戶使用體驗的一種手段：提示用戶當前頁面正在加載後臺數據，或是執行一些比較費時的操作。而花瓣旋轉的動畫效果，通過 div 元素 css 類的 animation 系列屬性實現：
  • 前端進階:css必知的幾個底層知識和技巧
    它表明人的心理活動的主體性和積極性。問題學習法就是強調有意注意有關解決問題的信息，使學習有了明確的指向性，從而提高學習效率。在介紹完問題學習法之後，進入我們今天的主題，接下來我會介紹css的一些底層的知識的現象，藉此來讓大家對css有更深入的理解。
  • CSS 文本超出提示效果
    ，然後暫且稱為 文本A 和 文本B 吧（以下適用），如下所示那麼，如何實現這一效果呢？藉助上面的布局，下面所有分析只需要對文本B進行處理就行了。其實藉助上面的布局，這裡實現就非常容易了，只需要對 文本B 做滾動動畫即可，關於 CSS3實現無縫滾動， 這裡介紹一下實現：要做到首尾無縫滾動，首先需要複製一份相同的文本，這裡使用 ::after 偽元素通過 content
  • 能解決 80% 需求的 10個 CSS動畫庫
    選擇不同的動畫我們可以選擇想要的動畫類型（例如entrance/exist），除了可以選擇某個動畫（例如，scale-in）外，甚至還可以為該動畫選擇不同的展示效果（例如：scale-in-right）。
  • 《前端5分鐘》之使用純css實現網站換膚和焦點圖切換動畫
    本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫今天我們來繼續復盤一些工作中常用的css技巧和知識,以便我們可以更加優雅的用css實現富有動感的網站.
  • CSS面試須知,哪些需要掌握得CSS技巧
    ，垂直陰影，模糊距離，陰影顏色）font-face屬性：定義自己的字體圓角（邊框半徑）：border-radius 屬性用於創建圓角邊框圖片：border-image: url(border.png) 30 30 round盒陰影：box-shadow: 10px 10px 5px #888888媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會採用不同的屬性10 請解釋一下
  • 前端-html和css基礎知識
    WEB標準一個網頁包含了html元素 Css JavaScript，Html元素決定了網頁結構，Css進行了修飾美化，JavaScript控制了交互行為和動態效果。web標準包含了下面三個方面：結構標準（HTML）：用於對網頁元素進行整理和分類。表現標準（CSS）：用於設置網頁元素的版式、顏色、大小等外觀樣式。