文字旋轉跳動動畫特效html頁面前端源碼，可自定義內容

家好，今天給大家介紹一款，文字旋轉跳動動畫特效html頁面前端源碼，可自定義內容（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

特效炫酷（圖2）

圖2

源碼完整，需要的朋友可以下載學習（圖3）

圖3

本源碼編碼：10167，需要的朋友，點擊下面的鏈接后，搜索10167，即可獲取。

就愛UI - 分享UI設計的點點滴滴

CSS3中，可以利用transform功能來實現文字或圖像的旋轉、縮放、傾斜、移動這四種類型的變形處理，本文將對此做詳細介紹。

一.旋轉 rotate

用法：transform: rotate(45deg);

共一個參數“角度”，單位deg為度的意思，正數為順時針旋轉，負數為逆時針旋轉，上述代碼作用是順時針旋轉45度。

二.縮放 scale

用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);

參數表示縮放倍數；

一個參數時：表示水平和垂直同時縮放該倍率
兩個參數時：第一個參數指定水平方向的縮放倍率，第二個參數指定垂直方向的縮放倍率。

三.傾斜 skew

用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);

參數表示傾斜角度，單位deg

一個參數時：表示水平方向的傾斜角度；
兩個參數時：第一個參數表示水平方向的傾斜角度，第二個參數表示垂直方向的傾斜角度。

關于skew傾斜角度的計算方式表面上看并不是那么直觀，這里借鑒某大拿繪制的圖舉例說明一下：

首先需要說明的是skew的默認原點transform-origin是這個物件的中心點

四.移動 translate

用法：transform: translate(45px) 或者 transform: translate(45px, 150px);

參數表示移動距離，單位px，

一個參數時：表示水平方向的移動距離；
兩個參數時：第一個參數表示水平方向的移動距離，第二個參數表示垂直方向的移動距離。

五.基準點 transform-origin

在使用transform方法進行文字或圖像的變形時，是以元素的中心點為基準點進行的。使用transform-origin屬性，可以改變變形的基準點。

用法：transform-origin: 10px 10px;

共兩個參數，表示相對左上角原點的距離，單位px，第一個參數表示相對左上角原點水平方向的距離，第二個參數表示相對左上角原點垂直方向的距離；

兩個參數除了可以設置為具體的像素值，其中第一個參數可以指定為left、center、right，第二個參數可以指定為top、center、bottom。

六.多方法組合變形

上面我們介紹了使用transform對元素進行旋轉、縮放、傾斜、移動的方法，這里講介紹綜合使用這幾個方法來對一個元素進行多重變形。

用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

這四種變形方法順序可以隨意，但不同的順序導致變形結果不同，原因是變形的順序是從左到右依次進行，這個用法中的執(zhí)行順序為1.rotate 2.scalse 3.skew 4.translate

以上內容來源于網路侵刪~

用戶正在瀏覽網站網頁時，為了更好的用戶體驗，經常會使用 加載中 文字或者動畫來表示正在 加載數據 或 執(zhí)行某項操作。而使用動畫不僅能夠吸引用戶的注意力，同時也能夠傳達信息"系統正在工作中"，需要一些時間來完成任務。本文將詳細介紹如何通過 CSS 創(chuàng)建一個 加載中 動畫效果。

HTML 結構

首先是HTML代碼，定義了一個類名container的<div>容器：

在這個容器里面包含了一些加載器.loader，每個加載器都具有不同的旋轉角度自定義屬性--r(1~4)，而每個加載器里面有20個<span>元素，并且也都具有不同的旋轉角度自定義屬性--r(1~20)。
后面會通過CSS設置不同的旋轉角度屬性--r和旋轉角度子屬性--i，創(chuàng)建多個加載器，并且每個加載器都具有不同的動畫表現。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Animation</title>

  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="container">
    <div class="loader" style="--r: 1">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>

    <div class="loader" style="--r: 2">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>

    <div class="loader" style="--r: 3">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>

    <div class="loader" style="--r: 4">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>
  </div>
</body>

</html>

CSS 樣式

接下來看CSS代碼，重置全局樣式后，給.container元素定義了水平垂直居中布局，然后使用filter樣式屬性來應用色相旋轉(hue-rotate)濾鏡，將背景色調整為90度的色相。因此，子元素的任何顏色同樣會添加濾鏡。

首先，每個.loader元素通過transform: rotate()屬性根據--r值設置旋轉角度 (45deg * 1/2/3/4 = 45/90/135/180deg)。
其次，每個span元素使用定位設置初始位置在左側，以及通過transform: rotate()屬性根據--i值設置旋轉角度 (18deg * 1~20 = 18 ~ 360deg)。
然后，每個span::before定義固定的寬度和高度及背景顏色。使用box-shadow屬性定義了一個由多個投影組成的陰影效果，產生一種立體感。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  min-height: 100vh;
  background-color: #042104;
  filter: hue-rotate(90deg);

  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  position: relative;
  transform: rotate(calc(var(--r) * 45deg));
}

.loader span {
  position: absolute;
  top: 0;
  left: -200px;

  width: 200px;
  height: 2px;
  transform-origin: right;
  transform: rotate(calc(var(--i) * 18deg));
}

.loader span::before {
  content: "";
  display: block;

  width: 15px;
  height: 15px;
  background-color: #00ff0a;
  border-radius: 15px;
  box-shadow: 0 0 10px #00ff0a, 
              0 0 20px #00ff0a, 
              0 0 40px #00ff0a, 
              0 0 60px #00ff0a, 
              0 0 80px #00ff0a, 0 0 100px #00ff0a;
  animation: animate 5s linear infinite;
  animation-delay: calc(-0.5s * var(--i));
}
@keyframes animate {
  0% {
    transform: translateX(200px) scale(1);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateX(0) scale(0);
    opacity: 1;
  }
}



@media screen and (max-width: 576px) {
  .container .loader {
    scale: .6;
  }  
}

此外，通過animation屬性和@keyframes規(guī)則，定義了名為animate的關鍵幀動畫。該動畫在5秒內線性地進行，無限循環(huán)播放。動畫的每個關鍵幀設置了不同的變換效果，包括 平移、縮放和透明度 變化。根據時間的進展，加載器的形狀和位置會發(fā)生變化，從而創(chuàng)造出動態(tài)的效果。

最后

通過本篇文章的詳細介紹，相信能夠幫助你更好地使用CSS來創(chuàng)建一個loading加載中動畫，從而理解掌握和應用這個效果。你可以根據自己的需求調整大小、顏色和持續(xù)時間等參數，創(chuàng)建符合你網頁風格的加載中動畫。加載中動畫不僅能夠提供視覺上的反饋，告訴用戶系統正在工作中，還能夠改善用戶體驗，減少長時間等待的焦慮感。

作者：掘一
鏈接：https://juejin.cn/post/7296404570949173298

在線咨詢

上一篇：HTTP基礎系列之：一文搞懂URL
下一篇：HTML大文件上傳源代碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

文字旋轉跳動動畫特效html頁面前端源碼，可自定義內容

家好，今天給大家介紹一款，文字旋轉跳動動畫特效html頁面前端源碼，可自定義內容（圖1）。送給大家哦，獲取方式在本文末尾。

本源碼編碼：10167，需要的朋友，點擊下面的鏈接后，搜索10167，即可獲取。

HTML 結構

CSS 樣式

相關

最后

您的項目需求

整合營銷服務商

文字旋轉跳動動畫特效html頁面前端源碼，可自定義內容

家好，今天給大家介紹一款，文字旋轉跳動動畫特效html頁面前端源碼，可自定義內容 （圖1）。送給大家哦，獲取方式在本文末尾。

本源碼編碼：10167，需要的朋友，點擊下面的鏈接后，搜索10167，即可獲取。

HTML 結構

CSS 樣式

相關

最后

您的項目需求

家好，今天給大家介紹一款，文字旋轉跳動動畫特效html頁面前端源碼，可自定義內容（圖1）。送給大家哦，獲取方式在本文末尾。