目錄
1、學習信息
?2、源碼
3、變量
1.1 定義變量
1.2 使用變量
1.3 calc() 函數
4、定位absolute和fixed
5、transform 和 transition，動畫
5.1 變形transform
5.2 transition
5.3 動畫animation
6、todo
1、學習信息
視頻地址：css動畫 動感菜單（css變量、過渡動畫、過渡延遲、js動態切換菜單）_嗶哩嗶哩_bilibili
?2、源碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {min-height: 100vh;background: linear-gradient(to bottom,#577ad4,#ad3d88);}.nav {width: 250px;height: 50px;background-color: #fff;position: fixed; /*固定在右上角*/top: 20px;right: 20px;z-index: 100; /*放在最上面*/}.toggle {width: 100%;height: 50px;display: flex;justify-content: flex-end;align-items: center;cursor: pointer;color: #ff216d;padding: 5px 20px;}.toggle::before {content: 'Menu';margin-right: 10px;}.toggle span::before,.toggle span::after {content: '';position: absolute;top: 20px;left: 0;width: 100%;height: 2px;background-color: #ff216d;transition: 0.5s;}.toggle span:after {top: auto;bottom: 20px;}.toggle.active:before{content: 'Close';margin-left: 10px;}.toggle.active span::before {transform: rotate(225deg);top: 24px;}.toggle.active span::after {transform: rotate(135deg);bottom: 24px;}ul {position: relative;list-style: none;display: flex;flex-direction: column;}ul li {height: 50px;padding: 10px 20px;background-color: #ffffff;color: #333;cursor: pointer;position: relative;list-style: none;}li {visibility: hidden;opacity: 0;transform: translateX(-250px);transition: .5s;transition-delay: calc(0.1s*var(--i));}.nav.active li {visibility: visible;opacity: 1;transform: translateX(0px);}</style><script>window.onload = function (){const nav = document.querySelector(".nav")const toggle = document.querySelector(".toggle")toggle.addEventListener('click',()=>{toggle.classList.toggle('active')nav.classList.toggle('active')});}</script>
</head>
<body><div class="nav"><div class="toggle"><span></span></div><ul><li style="--i:0">Home</li><li style="--i:1">About</li><li style="--i:2">Services</li><li style="--i:3">Work</li><li style="--i:4">Contract</li></ul></div>
</body>
</html>3、變量
1.1 定義變量
聲明變量的時候，變量名前面要加兩根連詞線（--）。變量名大小寫敏感，
為什么選擇兩根連詞線（--）表示變量？因為
$foo被?Sass?用掉了，
@foo被 Less 用掉了。
為了不產生沖突，官方的 CSS 變量就改用兩根連詞線了
1.2 使用變量
var() 函數
var()函數用于讀取變量。
var()函數還可以使用第二個參數，表示變量的默認值。如果該變量不存在，就會使用這個默認值。
注意，變量值只能用作屬性值，不能用作屬性名。
1.3 calc() 函數
calc() 函數用于動態計算長度值。
如：width: calc(100% - 10px)；
任何長度值都可以使用calc()函數進行計算；
calc()函數支持 "+", "-", "*", "/" 運算；
calc()函數使用標準的數學運算優先級規則；
4、定位absolute和fixed
absolute 定位使元素的位置與文檔流無關，因此不占據空間。
absolute 定位的元素和其他元素重疊。
fixed 定位
元素的位置相對于瀏覽器窗口是固定位置。
即使窗口是滾動的它也不會移動：
5、transform 和 transition，動畫
5.1 變形transform
變形有rotate旋轉、scale縮放、translate位移、skew傾斜、matrix矩陣變形、perspective透視幾種操作
總結：沒有過程
5.2 transition
transition 是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一個簡寫屬性。
transition: 要過渡的屬性 花費時間 運動曲線 何時開始;
零或一個表示要使用的過渡函數
零，一或兩個時間值。可以解析為時間的第一個值被分配給 transition-duration，并且可以解析為時間的第二個值被分配給 transition-delay。
注： transition元素所在的是動畫的結束點
5.3 動畫animation
動畫的使用，首先通過@（-webkit-)keyframes 定義動畫名稱及動畫的行為，再通過animation屬性設置動畫特征相關值進行調用
@keyframes test {from {width: 100px;height: 20px;}50% {height: 50px;}to {width: 130px;height: 30px;background-color: #0f0;}}.box:hover {animation: test 2s;}以上代碼設置了一個名稱為test的動畫，動畫執行時間為2s，定義了從開始（from|0%)到結束(to|100%)的動畫行為，開始的from可以省略，但結束的不可省略
6、todo
沒搞明白為什么教程的是兩根斷線，而我是長線
相信會隨著學習都解決
![[c++]—vector類___基礎版(帶你了解vector熟練掌握運用）](http://pic.xiahunao.cn/[c++]—vector類___基礎版(帶你了解vector熟練掌握運用）)
