CSS-5.1 Transition 過渡

本系列可作為前端學習系列的筆記，代碼的運行環境是在HBuilder中，小編會將代碼復制下來，大家復制下來就可以練習了，方便大家學習。

HTML系列文章?已經收錄在前端專欄，有需要的寶寶們可以點擊前端專欄查看！

點贊關注不迷路！您的點贊、關注和收藏是對小編最大的支持和鼓勵！

系列文章目錄

CSS- 1.1 css選擇器

CSS- 2.1 實戰之圖文混排、表格、表單、學校官網一級導航欄

CSS- 3.1 盒子模型-塊級元素、行內元素、行內塊級元素和display屬性

CSS- 4.1 浮動（Float）

CSS- 4.2 相對定位（position: relative）

CSS- 4.3 絕對定位（position: absolute）&學校官網導航欄實例

CSS- 4.4 固定定位（fixed）& 咖啡售賣官網實例

CSS- 4.5 css + div 布局 & 簡易網易云音樂 官網布置實例?

CSS- 4.6 radiu、shadow、animation動畫

CSS-5.1 Transition 過渡

目錄

系列文章目錄

前言

一、Transition 過渡詳解

1.基本概念

2.語法

3.常用過渡屬性

4.示例

1. 基礎懸停效果

2. 尺寸變化過渡

3. 透明度過渡

4. 多屬性過渡

5.高級用法

1. 使用?all?關鍵字

2. 指定多個過渡

3. 結合?transform?實現高性能動畫

6.速度曲線函數

7.注意事項

8.實際應用場景

二、代碼實例

1. css3-transition過渡 代碼如下：

2. 過渡應用1 代碼如下：

3. 過渡應用2?代碼如下：

?4. 過渡應用3 代碼如下：

總結

前言

小編作為新晉碼農一枚，會定期整理一些寫的比較好的代碼，作為自己的學習筆記，會試著做一下批注和補充，如轉載或者參考他人文獻會標明出處，非商用，如有侵權會刪改！歡迎大家斧正和討論！

一、Transition 過渡詳解

CSS3 的?transition?屬性允許元素在狀態變化時（如懸停、點擊等）產生平滑的動畫效果，而無需使用 JavaScript。它是創建簡單動畫效果的一種高效方式。

1.基本概念

transition?屬性是以下四個子屬性的簡寫：

  1. transition-property：指定應用過渡效果的 CSS 屬性
  2. transition-duration：指定過渡效果持續的時間
  3. transition-timing-function：指定過渡效果的速度曲線
  4. transition-delay：指定過渡效果開始前的延遲時間

2.語法

css

.element {transition: property duration timing-function delay;
}

或分別指定：

css

.element {transition-property: width;transition-duration: 0.5s;transition-timing-function: ease-in-out;transition-delay: 0.2s;
}

3.常用過渡屬性

任何可以動畫化的 CSS 屬性都可以使用過渡效果，常見的包括：

  • color（顏色）
  • background-color（背景色）
  • width（寬度）
  • height（高度）
  • opacity（透明度）
  • transform（變形）
  • border-radius（圓角）
  • box-shadow（陰影）
  • font-size（字體大小）
  • margin（外邊距）
  • padding（內邊距）

4.示例

1. 基礎懸停效果

css

.button {background-color: #3498db;color: white;padding: 10px 20px;border: none;border-radius: 5px;transition: background-color 0.3s ease;
}.button:hover {background-color: #2980b9;
}

效果：當鼠標懸停在按鈕上時，背景色會平滑過渡到更深的藍色。

2. 尺寸變化過渡

css

.box {width: 100px;height: 100px;background-color: #e74c3c;transition: all 0.5s ease-in-out;
}.box:hover {width: 200px;height: 200px;background-color: #c0392b;
}

效果：懸停時，盒子會平滑放大并改變顏色。

3. 透明度過渡

css

.overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0);transition: background-color 0.5s ease;
}.overlay.active {background-color: rgba(0, 0, 0, 0.5);
}

效果：疊加層在激活時平滑地從不透明變為半透明。

4. 多屬性過渡

css

.card {width: 200px;height: 200px;background-color: #f1c40f;border-radius: 10px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);transition: transform 0.3s ease,box-shadow 0.3s ease;
}.card:hover {transform: translateY(-10px);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

效果：懸停時，卡片輕微上浮并陰影加深，產生浮動效果。

5.高級用法

1. 使用?all?關鍵字

css

.element {transition: all 0.3s ease;
}

注意：雖然方便，但可能影響性能，特別是當有很多屬性需要過渡時。

2. 指定多個過渡

css

.element {transition: width 0.5s ease-in,height 0.3s ease-out,background-color 0.2s linear;
}

3. 結合?transform?實現高性能動畫

css

.element {transition: transform 0.3s ease;
}.element:hover {transform: scale(1.1) rotate(5deg);
}

優勢：transform?和?opacity?是由 GPU 加速的屬性，性能更好。

6.速度曲線函數

  • ease（默認）：慢速開始，然后變快，然后慢速結束
  • linear：勻速
  • ease-in：慢速開始
  • ease-out：慢速結束
  • ease-in-out：慢速開始和結束
  • cubic-bezier(n,n,n,n)：自定義貝塞爾曲線

7.注意事項

  1. 性能考慮：避免對會頻繁觸發的屬性（如?top、left）使用過渡，可能引起性能問題。
  2. 硬件加速：優先使用?transform?和?opacity?屬性以獲得最佳性能。
  3. 可訪問性：確保過渡效果不會影響用戶體驗，特別是對于有運動敏感問題的用戶。
  4. 兼容性：現代瀏覽器都支持?transition，但對于舊版瀏覽器可能需要前綴或回退方案。

8.實際應用場景

  • 導航菜單懸停效果
  • 按鈕狀態變化
  • 模態框顯示/隱藏
  • 卡片懸停效果
  • 加載指示器
  • 圖片懸停放大
  • 表單元素焦點狀態

CSS3 的?transition?屬性為網頁交互提供了簡單而強大的工具，可以顯著提升用戶體驗而無需編寫復雜的 JavaScript 代碼。合理使用過渡效果可以使網站感覺更加生動和專業。

二、代碼實例

1. 過渡應用 代碼如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css3-transition過渡</title><style type="text/css">div {width: 300px;height: 100px;border: 1px solid black;text-align: center;line-height: 100px;font-size: 20px;background-color: silver;border-radius: 20px;transition: all 1s linear;}/* 觸發器 hover *//* 那個元素的哪個屬性發生變化 *//* div  background-color 發生變化 *//* 哪個元素的屬性值發生變化 我們就把transition放在哪個屬性元素對應的選擇器當中 */div:hover {background-color: #45b823;color: white;border: none;}</style></head><body><h1>過渡transition</h1><p>將元素的某個屬性從“一個值”在指定的時間內過渡到“另一個值”</p><div>web design</div></body>
</html>

代碼運行如下：

2. 過渡應用1 代碼如下：


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>過渡應用1</title><style type="text/css">* {margin: 0;padding: 0;}.showlist ul {list-style-type: none;}/* 最大的父盒子，用來進行頁面居中 */.showlist {}.showlist ul li {width: 300px;height: 40px;border: 1px solid black;overflow: hidden;transition: all 1s linear;}.showlist h3 {width: 300px;height: 40px;text-align: left;line-height: 40px;}.showlist .text {width: 300px;height: 180px;background-color: white;color: black;}.showlist ul li:hover {height: 220px;background-color: black;color: white;}.showlist img {width: 300px;}</style></head><body><div class="showlist"><ul><li><h3>這是標題</h3><div class="text"><img src="../img/Leslie%20Mint.png" ></div></li><li><h3>這是標題</h3><div class="text">這是內容</div></li><li><h3>這是標題</h3><div class="text">這是內容</div></li><li><h3>這是標題</h3><div class="text">這是內容</div></li></ul></div></body>
</html>

代碼運行如下：

3. 過渡應用2?代碼如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>transition過渡應用2</title><style type="text/css">*{margin: 0;padding: 0;}.container {width: 170px;height: 190px;position: relative;overflow: hidden;float: left;margin-right: 50px;}.container .text {width: 170px;height: 190px;/* border: 1px solid black; */position: absolute;left: 170px;top: 0px;transition: all 1s linear;}.container:hover .text {left: 0px;background-color: rgba(255,255,255,.6);color: saddlebrown;}</style></head><body><div class="container"><img src="../img/kbjn.jpg" ><div class="text"><h1>標題</h1><p>對文本的解釋說明</p></div></div><div class="container"><img src="../img/kbjn.jpg" ><div class="text"><h1>標題</h1><p>對文本的解釋說明</p></div></div><div class="container"><img src="../img/kbjn.jpg" ><div class="text"><h1>標題</h1><p>對文本的解釋說明</p></div></div></body>
</html>

代碼運行如下：

?4. 過渡應用3 代碼如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>過渡應用3</title><style type="text/css">.wrap {width: 170px;height: 190px;transform-style: preserve-3d;position: relative;transition: all 1s linear;}.face {width: 170px;height: 190px;border: 1px solid saddlebrown;}.wrap:hover {transform: rotateY(180deg);}.wrap .back {/* 為了防止背面的字產生鏡面效果，我們先翻180deg */transform: rotateY(180deg);background-color: saddlebrown;color: wheat;position: absolute;top: 0px;}</style></head><body><div class="wrap"><div class="face front"><img src="../img/kbjn.jpg" ></div><div class="face back"><h1>標題</h1><p>這是解釋說明</p></div></div></body>
</html>

代碼運行如下：?

總結

以上就是今天要講的內容，本文簡單記錄了Transition 過渡，僅作為一份簡單的筆記使用，大家根據注釋理解

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/81843.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/81843.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/81843.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

使用Google 最新發布的veo-3 視頻生成和數字人技術制作介紹核聚變技術的短視頻：《逐夢星海：中國聚變照亮未來》

使用Google 最新發布的veo-3 視頻生成和數字人技術制作介紹核聚變技術的短視頻：《逐夢星海：中國聚變照亮未來》

文章大綱 結合谷歌最新模型說明示例分鏡提示詞（基于 Gemini 2.5）最終視頻生成（基于 Veo3）解說詞文稿應用場景參考文獻先來看看效果: 視頻中混入了一些字幕，看來Google的技術還有待提高哈，里面有的托卡馬克好像挺像那么回事！厲害 逐夢星海：中國聚變照亮未來 #mermaid-sv…
閱讀更多...
服務器數據恢復—Linux系統服務器崩潰且重裝系統的數據恢復案例

服務器數據恢復—Linux系統服務器崩潰且重裝系統的數據恢復案例

服務器數據恢復環境&#xff1a; linux操作系統服務器中有一組由4塊SAS接口硬盤組建的raid5陣列。 服務器故障&#xff1a; 服務器工作過程中突然崩潰。管理員將服務器操作系統進行了重裝。 用戶方需要恢復服務器中的數據庫、辦公文檔、代碼文件等。 服務器數據恢復過程&#…
閱讀更多...
結構型：門面模式（外觀模式）

結構型：門面模式（外觀模式）

目錄 1、核心思想 2、實現方式 2.1 模式結構 2.2 實現案例 3、優缺點分析 4、適用場景 1、核心思想 目的&#xff1a;通過高層接口&#xff08;門面類&#xff09;封裝多個子系統的復雜交互&#xff0c;客戶端只需與門面交互&#xff0c;簡化入口&#xff1b;同時隔離客…
閱讀更多...
MidJourney生成王昭君全身像提示詞

MidJourney生成王昭君全身像提示詞

漢服王昭君全身像&#xff0c;中國水墨融合工筆畫風格&#xff0c;低飽和度暖色調&#xff0c;絹本設質感&#xff1a; 服飾細節&#xff1a;身著朱紅色曲裾深衣&#xff0c;衣擺拖地三層&#xff0c;金線刺繡鳳凰祥云暗紋&#xff0c;寬袖綴珍珠滾邊&#xff0c;腰間白玉組佩…
閱讀更多...
GitHub 趨勢日報 (2025年05月21日)

GitHub 趨勢日報 (2025年05月21日)

本日報由 TrendForge 系統生成 https://trendforge.devlive.org/ &#x1f310; 本日報中的項目描述已自動翻譯為中文 &#x1f4c8; 今日整體趨勢 Top 10 排名項目名稱項目描述今日獲星總星數語言1microsoft/WSLLinux的Windows子系統? 1731? 25184C2virattt/ai-hedge-fundA…
閱讀更多...
電子電氣架構 --- 細化造車階段流程

電子電氣架構 --- 細化造車階段流程

我是穿拖鞋的漢子，魔都中堅持長期主義的汽車電子工程師。 老規矩，分享一段喜歡的文字，避免自己成為高知識低文化的工程師： 鈍感力的“鈍”，不是木訥、遲鈍，而是直面困境的韌勁和耐力，是面對外界噪音的通透淡然。 生活中有兩種人，一種人格外在意別人的眼光;另一種人無論…
閱讀更多...
談談Oracle BUFFER CACHE的命中率

談談Oracle BUFFER CACHE的命中率

BUFFER CACHE的命中率已成為一個老生常談的話題&#xff0c;在數據庫等待事件出現之前&#xff0c;DBA進行數據庫系統級優化時&#xff0c;往往會首先觀察BUFFER CACHE的命中率。命中率高就意味著數據庫運行正常&#xff0c;很多Oracle官方提供的巡檢腳本都將BUFFER CACHE的命中…
閱讀更多...
云渲染技術解析與渲酷平臺深度測評：如何實現高效3D創作？

云渲染技術解析與渲酷平臺深度測評：如何實現高效3D創作？

一、云渲染技術核心原理 1.1 分布式計算架構 云渲染的本質是通過多節點并行計算實現效率突破。以動畫渲染為例&#xff0c;一個30秒的動畫通常包含720幀&#xff08;按24幀/秒計算&#xff09;&#xff0c;傳統單機需要連續處理所有幀&#xff0c;而云渲染可將任務拆解為720個…
閱讀更多...
JavaScript-DOM-02

JavaScript-DOM-02

自定義屬性&#xff1a; ? <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title>…
閱讀更多...
Kind方式部署k8s單節點集群并創建nginx服務對外訪問

Kind方式部署k8s單節點集群并創建nginx服務對外訪問

資源要求 請準備好doker環境&#xff0c;盡量用比較新的版本。我的docker環境如下 docker 環境&#xff1a; Docker version 20.10.21, build 20.10.21-0ubuntu1~18.04.3 安裝kind kind表現上就是一個二進制程序&#xff0c;下載對應版本并增加執行權限即可&#xff1a; cu…
閱讀更多...
MySQL備份恢復：數據安全的終極指南

MySQL備份恢復：數據安全的終極指南

引言 各位數據庫愛好者們好&#xff01;今天我們要深入探討MySQL數據庫的"生命保險"——備份與恢復策略 &#x1f6e1;?。在數據即資產的時代&#xff0c;任何數據丟失都可能造成災難性后果。本教程將帶你全面掌握從邏輯備份到物理備份&#xff0c;從二進制日志恢復…
閱讀更多...
id分頁遍歷數據漏行問題

id分頁遍歷數據漏行問題

令入參id為0 while(true){ select * from table where id>#{id} order by id asc limit 100; 取結果集中最大id作為下次查詢的入參 其他操作 } 這個算法一般沒問題&#xff0c;但在主從數據系統中&#xff0c;主庫寫&#xff0c;查詢從庫遍歷數據時&#xff0c;出現了…
閱讀更多...
OpenCV級聯分類器

OpenCV級聯分類器

概念 OpenCV 級聯分類器是一種基于 Haar 特征、AdaBoost 算法和級聯結構的目標檢測方法&#xff0c;通過多階段篩選快速排除非目標區域&#xff0c;實現高效實時檢測&#xff08;如人臉、行人等&#xff09;。 加載級聯分類器 // 加載級聯分類器CascadeClassifier cascade;// …
閱讀更多...
C++ inline 內聯函數

C++ inline 內聯函數

一、定義與設計初衷 inline 函數是 C 中通過 減少函數調用開銷 優化程序效率的機制。其核心設計初衷是 取代 C 語言中宏定義&#xff08;#define&#xff09;&#xff0c;同時解決宏的以下缺陷&#xff1a; 類型安全問題&#xff1a;宏僅進行文本替換&#xff0c;無法進行參數…
閱讀更多...
uniapp-商城-64-后臺 商品列表（商品修改---頁面跳轉，深淺copy應用，遞歸調用等）

uniapp-商城-64-后臺 商品列表（商品修改---頁面跳轉，深淺copy應用，遞歸調用等）

完成了商品的添加和展示&#xff0c;下面的文字將繼續進行商品頁面的處理&#xff0c;主要為商品信息的修改的頁面以及后天邏輯的處理。 本文主要介紹了商品信息修改頁面的實現過程。首先&#xff0c;頁面布局包括編輯和刪除功能&#xff0c;未來還可添加上架和下架按鈕。通過c…
閱讀更多...
digitalworld.local: VENGEANCE靶場

digitalworld.local: VENGEANCE靶場

1&#xff0c;將兩臺虛擬機網絡連接都改為NAT模式 2&#xff0c;攻擊機上做namp局域網掃描發現靶機 nmap -sn 192.168.23.0/24 那么攻擊機IP為192.168.23.182&#xff0c;靶場IP192.168.23.3 3&#xff0c;對靶機進行端口服務探測 nmap -sV -T4 -p- -A 192.168.23.3 端口號 協…
閱讀更多...
微店平臺店鋪商品接口開發指南

微店平臺店鋪商品接口開發指南

微店API獲取店鋪所有商品實現方案 以下是使用微店開放平臺API獲取店鋪所有商品的完整實現代碼&#xff0c;包含請求封裝、分頁處理和錯誤處理機制。 點擊獲取key和secret from weidian_api import WeidianAPI # 配置你的微店應用憑證 APP_KEY "your_app_key" APP_…
閱讀更多...
Proxmox 主機與虛擬機全部斷網問題排查與解決記錄

Proxmox 主機與虛擬機全部斷網問題排查與解決記錄

Proxmox 主機與虛擬機全部斷網問題排查與解決記錄 關鍵詞&#xff1a;Proxmox、e1000e、板載網卡、斷網、網絡橋接、Hardware Unit Hang、網卡掛死 背景 近期在使用 Proxmox VE 管理服務器時&#xff0c;遇到一個奇怪的問題&#xff1a;每當在某個虛擬機中執行某些操作&#x…
閱讀更多...
SpringBoot整合MQTT實戰：基于EMQX構建高可靠物聯網通信，從零到一實現設備云端雙向對話

SpringBoot整合MQTT實戰：基于EMQX構建高可靠物聯網通信，從零到一實現設備云端雙向對話

一、引言 隨著物聯網(IoT)技術的快速發展&#xff0c;MQTT(Message Queuing Telemetry Transport)協議因其輕量級、低功耗和高效的特點&#xff0c;已成為物聯網設備通信的事實標準。本文將詳細介紹如何使用SpringBoot框架整合MQTT協議&#xff0c;基于開源MQTT代理EMQX實現設…
閱讀更多...
zData X zStorage 為什么采用全閃存架構而非混閃架構？

zData X zStorage 為什么采用全閃存架構而非混閃架構？

點擊藍字 關注我們 最近有用戶問到 zData X 的存儲底座 zStorage 分布式存儲為什么采用的是全閃存架構而非混閃架構&#xff1f;主要原因還是在于全閃存架構在性能和可靠性方面具有更顯著的優勢。zData X 的上一代產品 zData 的早期版本也使用了SSD盤作為緩存的技術架構&#x…
閱讀更多...
最新文章

Copyright @ 2022~2023