不使用 Javascript 也可以和瀏覽器進行交互？

tmx 是一個庫，它允許你直接從 HTML 訪問現代瀏覽器功能，而不是使用 javascript。

要理解 htmx，首先讓我們看一下 HTML 中的 a 標簽：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><a href="/blog">Blog</a></pre>

這個標記會告訴瀏覽器：當用戶單擊此鏈接時，向 /blog 發出 HTTP GET 請求并將響應內容加載到瀏覽器窗口中。

然后我們再看下面的 HTML：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><button hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML"
>
    Click Me!
</button></pre>

這告訴 htmx：當用戶單擊此按鈕時，向 /clicked 發出 HTTP POST 請求并使用響應中的內容將元素替換為 id 為 parent-div 的 DOM。

Htmx 將 HTML 的核心思想進行了擴展，為 HTML 語言提供了更多可能性：

現在任何元素，不僅僅是超鏈接和表單，都可以發出 HTTP 請求。
現在任何事件，不僅僅是點擊或表單提交，都可以觸發請求。
現在可以使用任何 HTTP verb，而不僅僅是GET 和POST。
現在任何元素，不僅僅是整個window 對象，都可以成為請求更新的目標。

請注意，當你使用 htmx 時，在服務器端你通常會使用 HTML 而非 JSON 進行響應。這會讓你使用原始 Web 編程模型，使用超文本作為應用程序狀態的引擎，甚至你也不需要真正理解這個概念。

另外如果你愿意，可以在使用 htmx 時使用 data- 前綴：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><a data-hx-post="/click">Click Me!</a></pre>

安裝

Htmx 是一個無依賴、面向瀏覽器的 JavaScript 庫。這意味著使用它就像在文檔頭部添加一個 <script> 標記一樣簡單，無需復雜的構建步驟或系統。

通過 CDN

使用 htmx 的最快方法是通過 CDN 加載它。你可以簡單地將其添加到你的 head 標簽中即可：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><script src="https://unpkg.com/htmx.org@1.8.0" integrity="sha384-cZuAZ+ZbwkNRnrKi05G/fjBX+azI9DNOkNYysZ0I/X5ZFgsmMiBXgDZof30F5ofc" crossorigin="anonymous"></script></pre>

npm

對于 npm 風格的構建系統，同樣你可以通過 npm 安裝 htmx：

<pre class="prettyprint hljs nginx" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">npm install htmx.org</pre>

安裝后，你需要使用適當的工具來使用 node_modules/htmx.org/dist/htmx.js（或 .min.js），例如你可以將 htmx 與一些擴展和特定于項目的代碼捆綁在一起。

如果你使用 webpack 來管理你的 javascript：

通過你最喜歡的包管理器（如 npm 或 yarn）安裝 htmx。
在你的index.js 文件 import htmx。

<pre class="prettyprint hljs nginx" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">import 'htmx.org';</pre>

如果要使用全局 htmx 變量（推薦），則需要將其注入到 window 作用域中：

創建一個定制的 JS 文件。
在index.js 文件中導入該文件。

<pre class="prettyprint hljs nginx" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">import 'path/to/my_custom.js';</pre>

然后添加如下所示的代碼：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">window.htmx = require('htmx.org');</pre>

最后重新打包即可

AJAX

htmx 的核心是一組允許你直接從 HTML 發出 AJAX 請求的屬性：

hx-get：向指定的 URL 發出 GET 請求。
hx-post：向指定的 URL 發出 POST 請求。
hx-put：向指定的 URL 發出 PUT 請求。
hx-patch：向指定的 URL 發出 PATCH 請求。
hx-delete：向指定的 URL 發出 DELETE 請求。

這些屬性都需要一個 URL 來向其發出 AJAX 請求，當元素被觸發時，該元素將向給定的 URL 發出指定類型的請求：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div hx-put="/messages">
    Put To Messages
</div></pre>

這會告訴瀏覽器：當用戶點擊此 div 時，向 /messages 發出 PUT 請求并將響應加載到 div。

觸發請求

默認情況下，AJAX 請求由元素的自然事件觸發：

input、textarea? 和select? 在change 事件上觸發。
form 在提交事件上觸發。
其他元素都由click 事件觸發。

如果你想要不同的行為，可以使用 hx-trigger 屬性來指定哪個事件將觸發請求。

比如下面的一段代碼表示在鼠標進入時觸發到 /mouse_entered 的 POST 請求：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div hx-post="/mouse_entered" hx-trigger="mouseenter">
    [Here Mouse, Mouse!]
</div></pre>

HTMX 還有很多使用的方式，可以前往官方文檔 https://htmx.org/docs/ 了解更多。

示例

下面我們用幾個示例來簡單說明下 htmx 是如何使用的。

點擊加載數據

這個例子展示了如何在數據表格中實現點擊加載下一頁，關鍵是最后一行：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><tr id="replaceMe">
  <td colspan="3">
    <button class='btn' hx-get="/contacts/?page=2" 
                        hx-target="#replaceMe" 
                        hx-swap="outerHTML">
         Load More Agents... <img class="htmx-indicator" src="/img/bars.svg">
    </button>
  </td>
</tr></pre>

該行包含一個按鈕，該按鈕將用下一頁結果替換整行（其中將包含一個用于加載下一頁結果的按鈕）。

當點擊 Load More Agents... 按鈕后會加載一頁數據附加到表格中去。

延遲加載

這個例子展示了如何在頁面上延遲加載元素。我們從如下所示的初始狀態開始：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div hx-get="/graph" hx-trigger="load">
  <img  alt="Result loading..." class="htmx-indicator" width="150" src="/img/bars.svg"/>
</div></pre>

當我們加載圖表時，它會顯示一個進度指示器，然后通過 CSS 過渡加載圖表并逐漸淡入視圖：

<pre class="prettyprint hljs css" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">.htmx-settling img {
  opacity: 0;
}
img {
 transition: opacity 300ms ease-in;
}</pre>

該示例的效果就是先顯示一個加載的指示器，然后加載一張圖片出來，就是通常的延遲加載的效果。

Git 倉庫：https://github.com/bigskysoftware/htmx。

來源： https://developer.51cto.com/article/714198.html

秘CSS3：打造視覺盛宴——深度解析漸變、陰影與遮罩技術

隨著Web技術的不斷演進，CSS3以其強大的視覺表現力，賦予網頁設計無限可能。本文將深入剖析CSS3中的三大視覺魔法工具——漸變、陰影與遮罩技術，通過詳盡的理論講解和豐富的實例演示，助您掌握這些技巧，打造出令人眼前一亮的網頁視覺盛宴。

一、魅力漸變：色彩的藝術流動

1. 線性漸變：平滑過渡，簡約而不簡單

css
background: linear-gradient(to right, #ff6b6b, #ff9595);

上述代碼創建了一個從左至右，由#ff6b6b漸變到#ff9595的線性漸變背景。您可以調整方向（如`to bottom`、`45deg`等）、添加更多顏色停止點來豐富漸變效果。

2. 徑向漸變：聚焦視覺中心，營造立體感

css
background: radial-gradient(circle at center, #f7f7f7, #dcdcdc);

此例中，我們創建了一個以元素中心為圓心，從#f7f7f7漸變到#dcdcdc的圓形徑向漸變背景。通過調整形狀（如`ellipse`）、大小（如`closest-side`）和位置（如`top left`），可以靈活定制徑向漸變樣式。

二、立體陰影：賦予元素生命與空間感

1. 盒子陰影（Box Shadow）：輕松實現三維效果

css
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);

上述代碼為元素添加了一個向右下偏移2px、模糊半徑為8px、顏色為rgba(0, 0, 0, 0.3)的陰影。理解盒陰影的基本參數（水平偏移、垂直偏移、模糊半徑、擴散半徑、顏色）并靈活運用，即可創造出豐富的陰影效果。

2. 文本陰影（Text Shadow）：讓文字躍然紙上

css
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.?), -1px -1px 2px rgba(255, 255, 255, 0.5);

此處為文本設置了兩個陰影：一個向右下偏移、顏色較深的陰影，以及一個向左上偏移、顏色較淺的陰影，形成微妙的浮雕效果。通過疊加多個陰影、調整參數，您可以創作出各種獨特的文本樣式。

三、神奇遮罩：掌控元素可見度與透明度

1. CSS Mask：精細裁剪，展現獨特視界

css
mask-image: linear-gradient(to right, transparent 0%, black 50%, transparent 100%);

該代碼為元素應用了一個從左至右的線性漸變遮罩，使得元素左側和右側各有一半區域透明。您還可以使用`mask-mode`、`mask-repeat`、`mask-position`等屬性進一步調整遮罩行為。

2. CSS Clip Path：創意裁剪，打破常規布局

css
clip-path: polygon(0 0, 100% 0, .png);

上述代碼使用多邊形裁剪路徑，將元素頂部裁剪成尖角形狀。您還可以使用橢圓、圓形、內切/外切矩形等多種路徑類型，甚至借助SVG路徑實現更為復雜的裁剪效果。

四、實戰案例：融合三大技術，打造視覺盛宴

案例一：動態漸變按鈕

css
/* 定義CSS變量 */
:root {
  --start-color: #ff6b6b;
  --end-color: #ff9595;
}

.button {
  background: linear-gradient(to right, var(--start-color), var(--end-color));
  transition: background 0.3s ease-in-out;
}

.button:hover,
.button:focus {
  --start-color: #ff9595;
  --end-color: #ff6b6b;
}

利用CSS變量、偽類和動畫，創建一個點擊時背景漸變顏色動態變化的按鈕：

案例二：懸浮卡片與陰影交互

css
.card {
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

.card:hover {
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.5);
}

結合盒子陰影與:hover偽類，實現鼠標懸停時卡片陰影增強的交互效果：

案例三：遮罩疊加文字特效

css
.image-overlay {
  background-image: url('image.jpg'), linear-gradient(to bottom, transparent, black);
  background-blend-mode: multiply;
  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

利用遮罩與多重背景，創造出文字在圖片上淡入淡出的特效：

結語

CSS3的漸變、陰影與遮罩技術，如同網頁設計的調色板、光影魔術師和剪刀手，賦予網頁視覺表現無盡的可能性。通過深入理解并熟練運用這些技術，您將能打造出既美觀又富有創意的網頁界面，為用戶帶來極致的視覺體驗。持續探索、實踐與創新，您的每一個作品都將成為Web世界中的一道獨特風景。

1- CSS 過渡的目的是什么？舉個例子。

CSS 過渡允許您在指定的持續時間內平滑地對 CSS 屬性的變化進行動畫處理。通過定義轉換屬性和值，您可以在不同狀態之間創建平滑的轉換。

這是一個例子：

.element {  transition: background-color 0.3s ease;}
.element:hover {  background-color: red;}

32-如何使用 CSS 變換創建旋轉動畫效果？

CSS 變換允許您操縱元素的位置、大小和旋轉。要創建旋轉動畫效果，可以將變換屬性與旋轉函數結合使用，并使用動畫屬性指定動畫持續時間。

這是一個例子：

@keyframes rotate {  0% {    transform: rotate(0deg);  }  100% {    transform: rotate(360deg);  }}
.element {  animation: rotate 2s linear infinite;}

33-如何使用 CSS 動畫創建淡入效果？

CSS 動畫允許您創建復雜且自定義的動畫。要創建淡入效果，您可以定義一個動畫，在指定的持續時間內將元素的不透明度逐漸從 0 更改為 1。

這是一個例子：

@keyframes fadeIn {  0% {    opacity: 0;  }  100% {    opacity: 1;  }}
.element {  animation: fadeIn 1s ease-in;}

34-如何使用 CSS 過渡創建下拉菜單？

CSS 過渡可用于為下拉菜單創建平滑的動畫。通過將過渡應用到下拉容器的 max-height 或 opacity 屬性，您可以創建無縫的打開和關閉效果。

這是一個例子：

.dropdown {  max-height: 0;  opacity: 0;  transition: max-height 0.3s ease, opacity 0.3s ease;}
.dropdown.open {  max-height: 300px;  opacity: 1;}

35-如何使用 CSS 創建視差滾動效果？

視差滾動是一種通過以不同速度移動不同元素來創建深度錯覺的技術。您可以通過應用 CSS 屬性（例如背景附件、背景位置和變換）的組合來實現此效果。這是一個例子：

.section {  background-image: url('background.jpg');  background-size: cover;  background-attachment: fixed;  background-position: center;  transform: translateZ(0);}

在線咨詢

上一篇：html中滾動字體的設置
下一篇：資深程序員推薦七大JavaScript編程工具