【CSS3】化神篇

目錄

  • 平面轉換
    • 平移
    • 旋轉
    • 改變旋轉原點
    • 多重轉換
    • 縮放
    • 傾斜
  • 漸變
    • 線性漸變
    • 徑向漸變
  • 空間轉換
    • 平移
    • 視距
    • 旋轉
    • 立體呈現
    • 縮放
  • 動畫
    • 使現步驟
    • animation 復合屬性
    • animation 屬性拆分
    • 逐幀動畫
    • 多組動畫

平面轉換

作用：為元素添加動態效果，一般與過渡配合使用

概念：改變盒子在平面內的形態（位移、旋轉、縮放、傾斜）

平面轉換又叫 2D 轉換

屬性名：transform

代碼示例：

<!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>div{margin: 100px 0;width: 100px;height: 100px;background-color: #e08b8b;transition: all 1s;}div:hover{transform: translate(700px) rotate(360deg) scale(2) skew(360deg);}</style>
</head>
<body><div></div>
</body>
</html>

結果如下：

屏幕錄制 2025-03-13 153147

平移

屬性名：transform: translate(X軸移動距離, Y軸移動距離);

屬性值：

  • 像素單位數值
  • 百分比（參照盒子自身尺寸計算結果）
  • 正負均可

代碼示例：

<!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>.father{width: 500px;height: 300px;margin: 100px auto;border: 1px solid black;}.son{width: 200px;height: 100px;background-color: antiquewhite;transition: all 0.5s;}.father:hover .son{transform: translate(150%,200%);}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

結果如下：

屏幕錄制 2025-03-13 154956

注意事項：

  • translate() 只寫一個值，表示沿著 X 軸移動
  • 單獨設置 X 或 Y 軸移動距離：translateX() 或 translateY()

旋轉

屬性名：transform: rotate(旋轉角度);

屬性值：

  • 角度單位是 deg
  • 取值正負均可
  • 取正順時針旋轉，取負逆時針旋轉

代碼示例：

<!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>img{width: 200px;transition: all 1s;}img:hover{transform: rotate(360deg);}</style>
</head>
<body><img src="./img/3.jpg" alt="">
</body>
</html>

結果如下：

屏幕錄制 2025-03-13 162633

改變旋轉原點

默認情況下，旋轉遠點是盒子中心點

屬性名：transform-origin: 水平原點位置 垂直原點位置;

屬性值：

  • 方位名稱（left、top、right、bottom、center）
  • 像素單位數值
  • 百分比

代碼示例：

<!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>img{width: 200px;transition: all 1s;transform-origin: right bottom;}img:hover{transform: rotate(360deg);}</style>
</head>
<body><img src="./img/3.jpg" alt="">
</body>
</html>

結果如下：

屏幕錄制 2025-03-13 163957

多重轉換

先平移再旋轉

屬性名：transform: translate() rotate();

代碼示例：

<!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>div{width: 1200px;height: 200px;border: 1px solid black;}img{width: 200px;transition: all 4s;}div:hover img{transform: translateX(500%) rotate(360deg);}</style>
</head>
<body><div><img src="./img/4.jpg" alt=""></div>
</body>
</html>

結果如下：

屏幕錄制 2025-03-13 165216

注意事項：

  • 不能先旋轉再平移，因為旋轉會改變坐標軸向
  • 復合屬性不能分開寫，否則后面的屬性會覆蓋前面的屬性

縮放

屬性名：

  • transform: scale(縮放倍數);
  • transform: scale(X軸縮放倍數, Y軸縮放倍數);

屬性值：

  • 通常只為 scale() 設置一個值，表示 X 軸和 Y 軸等比例縮放
  • 取值大于 1 表示放大，取值小于 1 表示縮小

代碼示例：

<!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>div{width: 200px;height: 143px;margin: 100px auto;}img{width: 200px;transition: all 4s;}div:hover img{transform: scale(2);}</style>
</head>
<body><div><img src="./img/4.png" alt=""></div>
</body>
</html>

結果如下：

屏幕錄制 2025-03-13 171831

傾斜

屬性名：transform: skew();

屬性值：

  • 角度度數 deg
  • 取正向左傾斜，取負向右傾斜

代碼示例：

<!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>div{width: 200px;height: 143px;margin: 100px auto;}img{width: 200px;transition: all 2s;}div:hover img{transform: skew(30deg)}</style>
</head>
<body><div><img src="./img/4.png" alt=""></div>
</body>
</html>

結果如下：

屏幕錄制 2025-03-13 174606

漸變

漸變是多個顏色逐漸變化的效果，一般用于設置盒子背景

線性漸變

屬性名：

background-image: linear-gradient(漸變方向,顏色1 終點位置,顏色2 終點位置,......
);

屬性值：

  • 漸變方向：（可選）
    • to 方位名詞
    • 角度度數
  • 終點位置：（可選）
    • 百分比

代碼示例：

<!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>div{width: 200px;height: 200px;background-color: #a0adf7;background-image: linear-gradient(45deg, red,#f8a4a4,#a0adf7);}</style>
</head>
<body><div></div>
</body>
</html>

結果如下：
在這里插入圖片描述

徑向漸變

作用：給按鈕添加高光效果

屬性名：

background-image: radial-gradient(半徑 at 圓心位置,顏色1 終點位置,顏色2 終點位置,......
);

屬性值：

  • 半徑可以是兩條，則為橢圓
  • 圓心位置取值：像素單位數值/百分比/方位名詞

代碼示例：

<!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>div{width: 100px;height: 100px;background-color: pink;border-radius: 50%;background-image: radial-gradient(50px at center center,red,pink);}button{width: 100px;height: 40px;background-color: purple;border: 0;border-radius: 5px;color: white;background-image: radial-gradient(30px at center center,rgba(255,255,255,0.2),transparent);}</style>
</head>
<body><div></div><button>按鈕</button>
</body>
</html>

結果如下：
在這里插入圖片描述

空間轉換

空間：是從坐標軸角度定義的 X、Y 和 Z 三條坐標軸構成了一個立體空間，Z 軸與視線方向相同

空間轉換也叫 3D 轉換

屬性：transform

平移

屬性名：

  • transform: translate3d(x,y,z);
  • transform: translateX();
  • transform: translateY();
  • transform: translateZ();

屬性值：

  • 像素單位數值
  • 百分比（參照盒子自身尺寸計算結果）

代碼示例：

<!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>.box{width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.box:hover{transform: translate3d(100px,200px,300px);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

結果如下：

屏幕錄制 2025-03-13 194159

注意事項：默認無法觀察 Z 軸平移效果

視距

作用：制定了觀察者與 z=0 平面的距離，為元素添加透視效果

透視效果：近大遠小、近實遠虛

屬性名：perspective: 視距;

屬性值：

  • 添加給父級，取值范圍 800-1200

代碼示例：

<!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>.father{perspective: 1000px;}.son{width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5;}.son:hover{transform: translateZ(-300px);}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

結果如下：

屏幕錄制 2025-03-13 195356

旋轉

屬性名：

transform: rotateZ() 沿著 Z 軸旋轉

transform: rotateX() 沿著 X 軸旋轉

transform: rotateY() 沿著 Y 軸旋轉

transform: rotate3d(x,y,z,角度度數); x，y，z 取值為 0-1 之間的數字

代碼示例：

<!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>div{width: 300px;margin: 100px auto;perspective: 1000px;}img{width: 200px;transition: all 2s;}.d1 img:hover{transform: rotateZ(360deg);}.d2 img:hover{transform: rotateX(60deg);}.d3 img:hover{transform: rotateY(60deg);}</style>
</head>
<body><div class="d1"><img src="./img/3.jpg" alt=""></div><div class="d2"><img src="./img/1.png" alt=""></div><div class="d3"><img src="./img/2.png" alt=""></div>
</body>
</html>

結果如下：

屏幕錄制 2025-03-13 201450

左手法則

根據旋轉方向確定取值正負

左手握住旋轉軸，拇指指向正值方向，其他四個手指彎曲方向為旋轉正值方向
在這里插入圖片描述

立體呈現

作用：設置元素的子元素是位于 3D 空間中還是平面中

屬性名：transform-style

屬性值：

  • flat：子級處于平面中
  • preserve-3d：子級處于 3D 空間中

呈現立體圖形步驟：

  1. 父元素添加 transform-style: preserve-3d;
  2. 子級定位
  3. 調整子盒子的位置（位移或旋轉）
<!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>.cube{position: relative;width: 200px;height: 200px;margin: 100px auto;/* background-color: pink; */transition: all 1s;transform-style: preserve-3d;}.cube div{position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.front{background-color: orange;transform: translateZ(100px);}.back{background-color: green;transform: translateZ(-100px);}.cube:hover{transform: rotateY(90deg);}</style>
</head>
<body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body>
</html>

結果如下：

屏幕錄制 2025-03-13 213518

縮放

屬性名：

  • transform: scale3d(x,y,z);
  • transform: scaleX();
  • transform: scaleY();
  • transform: scaleZ();

代碼示例：

<!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>.cube{position: relative;width: 200px;height: 200px;margin: 100px auto;/* background-color: pink; */transition: all 4s;transform-style: preserve-3d;transform: scale3d(1.5,2,3);}.cube div{position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.front{background-color: orange;transform: translateZ(100px);}.back{background-color: green;transform: translateZ(-100px);}.cube:hover{transform: rotate3d(1,1,1,90deg);}</style>
</head>
<body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body>
</html>

結果如下：

屏幕錄制 2025-03-13 220517

動畫

過渡：實現兩個狀態間的變化過程

動畫：實現多個動態間的變化過程，動畫過程可控（重復播放、最終畫面、是否暫停）

代碼示例：

<!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>.d1{width: 1000px;height: 200px;border: 1px solid black;}.d2{width: 200px;height: 200px;background-color: pink;animation: change 1s infinite alternate;}@keyframes change {0% {transform: translate(0);}100% {transform: translate(800px);}}</style>
</head>
<body><div class="d1"><div class="d2"></div></div>
</body>
</html>

結果如下：

屏幕錄制 2025-03-13 221903

使現步驟

定義動畫

  • 兩個狀態
@keyframes 動畫名稱 {from {}to {}
}
  • 多個狀態
@keyframes 動畫名稱 {0% {}10% {}......100% {}
}

使用動畫

animation: 動畫名稱 動畫花費時長;

代碼示例：

<!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>div{width: 200px;height: 200px;background-color: pink;animation: change 10s;}@keyframes change {0% {width: 200px;height: 200px;}25% {width: 400px;height: 200px;}75% {width: 400px;height: 400px;}100% {border-radius: 50%;}}</style>
</head>
<body><div></div>
</body>
</html>

結果如下：

屏幕錄制 2025-03-13 235715

animation 復合屬性

animation: 動畫名稱 動畫時長 速度曲線 延遲時間 重復次數 動畫方向 執行完畢時狀態;

  • 速度曲線：
    • linear：勻速運動
    • steps()：括號里填數字，表示分幾步完成動畫
  • 重復次數：
    • infinite：無限循環重復播放
  • 動畫方向：
    • alternate：反向執行
  • 執行完畢時狀態：
    • backwards：開始狀態
    • forwards：結束狀態

代碼示例：

<!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>.box{width: 200px;height: 100px;background-color: pink;animation:  change 1s linear 1s 3 alternate forwards;}@keyframes change {from {width: 200px;}to {width: 800px;}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

結果如下：

屏幕錄制 2025-03-14 002430

注意事項：

  • 動畫名稱和動畫時長必須賦值
  • 取值不分先后順序
  • 如果有兩個時間值，第一個時間值表示動畫時長，第二個時間值表示延遲時間

animation 屬性拆分

屬性作用取值
animation-name動畫名稱
animation-duration動畫時長
animation-delay延遲時間
animation-fill-mode動畫執行完畢時狀態forwards：最后一幀狀態
backwards：第一幀狀態
animation-timing-function速度曲線steps (數字)：逐幀動畫
animation-iteration-count重復次數infinite 為無限循環
animation-direction動畫執行方向alternate 為反向
animation-play-state暫停動畫paused 為暫停，通常配合:hover 使用

逐幀動畫

核心原理：

  • steps() 逐幀動畫
  • CSS 精靈圖

精靈動畫制作步驟：

  1. 準備顯示區域：盒子尺寸與一張精靈小圖尺寸相同
  2. 定義動畫：移動背景圖（移動距離 = 精靈圖寬度）
  3. 使用動畫：strps(N)，N 與精靈小圖個數相同

代碼示例：

<!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>div{width: 140px;height: 140px;border: 1px solid black;background-image: url(./img/01.png);animation: run 1s steps(12) infinite;}</style>
</head>
<body><div></div>
</body>
</html>

結果如下：

屏幕錄制 2025-03-14 144049

多組動畫

語法格式：

animation: 動畫1,動畫2,......
;

代碼示例：

<!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>div{width: 140px;height: 140px;/* border: 1px solid black; */background-image: url(./img/01.png);animation: run 1s steps(12) infinite,move 5s linear forwards;}@keyframes run {from {background-position: 0 0;}            to {background-position: -1680px 0;}}@keyframes move {0% {transform: translate(0);}100% {transform: translate(800px);}}</style>
</head>
<body><div></div>
</body>
</html>

結果如下：

屏幕錄制 2025-03-14 144234

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

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

相關文章

Java 線程創建全解析：五種方式詳細對比與實戰示例

Java 線程創建全解析：五種方式詳細對比與實戰示例

目錄 Java 線程創建全解析&#xff1a;五種方式詳細對比與實戰示例一、引言二、創建線程的五種方式1. 繼承 Thread 類2. 實現 Runnable 接口3. 匿名內部類實現 Thread4. 匿名內部類實現 Runnable5. 使用 Lambda 表達式&#xff08;Java 8及以上&#xff09; 三、線程創建方式對…
閱讀更多...
Dify平臺離線鏡像部署

Dify平臺離線鏡像部署

Dify 是一款開源的大語言模型(LLM) 應用開發平臺。它融合了后端即服務&#xff08;Backend as Service&#xff09;和 LLMOps 的理念&#xff0c;使開發者可以快速搭建生產級的生成式 AI 應用。即使你是非技術人員&#xff0c;也能參與到 AI 應用的定義和數據運營過程中。 前提…
閱讀更多...
Unitest和pytest區別

Unitest和pytest區別

1?? 設計理念 ?? unittest &#xff1a; 是 Python 標準庫的一部分&#xff0c;設計靈感來自 Java 的 JUnit&#xff0c;強調面向對象的測試模式。 測試用例需要繼承 unittest.TestCase 類&#xff0c;測試方法以 test_ 開頭。 更適合傳統、結構化的測試開發方式。 ? pyte…
閱讀更多...
GIT標簽（Tag）操作

GIT標簽（Tag）操作

在Git中&#xff0c;標簽&#xff08;Tag&#xff09;用于標記特定的提交點&#xff0c;通常用于發布版本。 切換到需要打標簽的分支&#xff1a; git checkout <branch-name>創建標簽 git tag v1.0.0 git tag -a v1.0.0 -m "Release version 1.0.0"查看所…
閱讀更多...
玩轉github

玩轉github

me github 可以給倉庫添加開發人員嗎 4o 是的&#xff0c;GitHub允許倉庫管理員為倉庫添加開發人員&#xff0c;并設置這些開發人員的角色和權限。這里是一個簡單的步驟指導&#xff0c;教你如何給一個 GitHub 倉庫添加開發人員&#xff1a; 前提條件 你必須有這個倉庫的權限&…
閱讀更多...
EDAS：投稿經驗-word版本-問題解決

EDAS：投稿經驗-word版本-問題解決

1. 字體不對&#xff0c;字體未嵌入問題 問題&#xff1a;word轉PDF后&#xff0c;總是顯示有字體格式不對&#xff08;忘記截圖了&#xff09;。 辦法&#xff1a;1. EDAS投稿PDF格式問題-CSDN博客-PDF上修改 IEEE論文檢測的字體未嵌入問題Times New Ro…
閱讀更多...
如何在Django中有效地使用Celery進行定時任務？

如何在Django中有效地使用Celery進行定時任務？

當我們談到Web開發時&#xff0c;Django無疑是一個非常流行的框架。而Celery則是與Django配合使用的強大任務隊列工具。今天&#xff0c;我們來聊聊如何在Django中使用Celery來實現定時任務。定時任務在很多場景下都非常有用&#xff0c;比如定期發送郵件、清理數據庫、執行數據…
閱讀更多...
聲學建模中用于構音障礙語音識別的特征選擇意義

聲學建模中用于構音障礙語音識別的特征選擇意義

聲學建模中用于構音障礙語音識別的特征選擇意義 原文：Significance of Feature Selection for Acoustic Modeling in Dysarthric Speech Recognition 引言 背景 構音障礙是由運動言語系統的神經損傷引起的，導致發音不清晰。自動語音識別系統對構音障礙語音無效，因其聲學差…
閱讀更多...
【遞歸與動態規劃(DP) C/C++】（1）遞歸 與 動態規劃(DP)

【遞歸與動態規劃(DP) C/C++】（1）遞歸 與 動態規劃(DP)

- 第 82 篇 - Date: 2025 - 03 - 17 Author: 鄭龍浩/仟濹 【遞歸與動態規劃(DP) C/C】 文章目錄 一 遞歸1基本介紹2 遞歸技巧**(1) 遞歸三步法****(2) 思維小技巧** 3 例題(1) 階乘 (純遞歸 or DP)(2) 斐波那契數列 (純遞歸 or DP)(3) 漢諾塔 (純遞歸 or DP)**① 英文打印過程…
閱讀更多...
eclipse運行配置，希望帶參數該怎么配置

eclipse運行配置，希望帶參數該怎么配置

java -Dparam 在eclipse如何配置 在Eclipse中配置-Dparam這樣的JVM參數&#xff0c;你可以按照以下步驟進行&#xff1a; 打開Eclipse。 選擇菜單欄的"Run" -> "Run Configurations..."。 在彈出的"Run Configurations"窗口左側&#xff0…
閱讀更多...
什么是 Fisher 信息矩陣

什么是 Fisher 信息矩陣

什么是 Fisher 信息矩陣 Fisher 信息矩陣是統計學和機器學習中一個重要的概念，它用于衡量樣本數據所包含的關于模型參數的信息量。 伯努利分布示例 問題描述 假設我們有一個服從伯努利分布的隨機變量 X X X，其概率質量函數為 P ( X 
閱讀更多...
[C++面試] 標準容器面試點

[C++面試] 標準容器面試點

一、入門 1、vector和list的區別 [C面試] vector 面試點總結 vector 是動態數組&#xff0c;它將元素存儲在連續的內存空間中。支持隨機訪問&#xff0c;即可以通過下標快速訪問任意位置的元素&#xff0c;時間復雜度為 O(1)&#xff0c;準確點是均攤O(1)。但在中間或開頭插…
閱讀更多...
C++抽象與類的核心概念解析

C++抽象與類的核心概念解析

在C中&#xff0c;抽象&#xff08;Abstraction&#xff09; 是面向對象編程&#xff08;OOP&#xff09;的核心概念之一&#xff0c;它通過隱藏復雜的實現細節&#xff0c;僅暴露必要的接口來實現對現實世界的簡化建模。類&#xff08;Class&#xff09; 是實現抽象的核心工具…
閱讀更多...
C# NX二次開發：拉伸UFUN函數避坑指南

C# NX二次開發：拉伸UFUN函數避坑指南

大家好&#xff0c;今天想說一下拉伸相關UFUN函數的使用&#xff0c;盡量讓大家別踩坑。 官方給出的拉伸UFUN函數有如下幾個&#xff1a; &#xff08;1&#xff09;UF_MODL_create_extruded2 (view source) uf_list_p_tobjectsInputList of objects to be extruded.char *ta…
閱讀更多...
基于 Python 爬取 TikTok 搜索數據 Tiktok爬蟲（2025.3.17）

基于 Python 爬取 TikTok 搜索數據 Tiktok爬蟲（2025.3.17）

1. 前言 在數據分析和網絡爬蟲的應用場景中&#xff0c;我們經常需要獲取社交媒體平臺的數據&#xff0c;例如 TikTok。本篇文章介紹如何使用 Python 爬取 TikTok 用戶搜索數據&#xff0c;并解析其返回的數據。 結果截圖 2. 項目環境準備 在正式運行代碼之前&#xff0c;我…
閱讀更多...
AI日報 - 2025年3月18日

AI日報 - 2025年3月18日

AI日報 - 2025年3月18日 &#x1f31f; 今日概覽&#xff08;60秒速覽&#xff09; ▎&#x1f916; AGI突破 | SOO微調技術減少語言模型欺騙行為10倍 創新對齊技術為更安全AI鋪路 ▎&#x1f4bc; 商業動向 | Figure推出全球最高產量人形機器人生產線BotQ 年產1.2萬臺&#x…
閱讀更多...
【go】函數類型的作用

【go】函數類型的作用

Go 語言函數類型的巧妙應用 函數類型在 Go 語言中非常強大&#xff0c;允許將函數作為值進行傳遞和操作。下面詳細介紹函數類型的各種妙用&#xff1a; 1. 回調函數 // 定義一個函數類型 type Callback func(int) int// 接受回調函數的函數 func processData(data []int, ca…
閱讀更多...
每日一題--進程與協程的區別

每日一題--進程與協程的區別

進程是什么&#xff1f; 進程&#xff08;Process&#xff09; 是操作系統進行 資源分配和調度的基本單位&#xff0c;代表一個正在執行的程序實例。每個進程擁有獨立的虛擬地址空間、代碼、數據和系統資源&#xff08;如文件句柄、網絡端口等&#xff09;。進程之間通過 IPC&…
閱讀更多...
關于deepseek R1模型分布式推理效率分析

關于deepseek R1模型分布式推理效率分析

1、引言 DeepSeek R1 采用了混合專家&#xff08;Mixture of Experts&#xff0c;MoE&#xff09;架構&#xff0c;包含多個專家子網絡&#xff0c;并通過一個門控機制動態地激活最相關的專家來處理特定的任務 。DeepSeek R1 總共有 6710 億個參數&#xff0c;但在每個前向傳播…
閱讀更多...
二叉樹算法題實戰：從遍歷到子樹判斷

二叉樹算法題實戰：從遍歷到子樹判斷

目錄 一、引言 二、判斷兩棵二叉樹是否相同 思路 代碼實現 注意點 三、二叉樹的中序遍歷 思路 代碼實現 注意點 四、判斷一棵樹是否為另一棵樹的子樹 思路 代碼實現 注意點 ?編輯 五、補充 一、引言 作者主頁&#xff1a;共享家9527-CSDN博客 作者代碼倉庫&am…
閱讀更多...
最新文章

Copyright @ 2022~2023