目錄
1 視頻
2 知識點
2.1 CSS calc() 函數
2.2 CSS var() 函數
2.3 CSS3 box-shadow 屬性
2.4 CSS3 box-sizing 屬性
2.5 CSS3 filter(濾鏡) 屬性
2.6 CSS3動畫(animation)
3 參考代碼
3.1 HTML
3.2 CSS
1 視頻視頻地址：https://www.bilibili.com/video/BV1D5411H7Tc
2 知識點2.1 CSS calc() 函數CSS calc() 函數用於動態計算長度值。
語法
calc(expression)
值
描述
expression
必須，一個數學表達式，結果將採用運算後的返回值。
需要注意的是，運算符前後都需要保留一個空格，例如：width: calc(100% - 10px)；
任何長度值都可以使用calc()函數進行計算；
calc()函數支持 "+", "-", "*", "/" 運算；
calc()函數使用標準的數學運算優先級規則；
支持版本：CSS3
2.2 CSS var() 函數var() 函數用於插入自定義的屬性值，如果一個屬性值在多處被使用，可以使用該方法。
支持版本：CSS3
語法
var(custom-property-name, value)
值
描述
custom-property-name
必需。自定義屬性的名稱，必需以 -- 開頭。
value
可選。備用值，在屬性不存在的時候使用。
2.3 CSS3 box-shadow 屬性box-shadow屬性可以設置一個或多個下拉陰影的框。
默認值:none繼承:no版本:CSS3JavaScript 語法:object.style.boxShadow="10px 10px 5px #888888"語法
box-shadow: h-shadow v-shadow blur spread color inset;
注意：boxShadow 屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規定。省略長度的值是 0。
值說明h-shadow必需的。水平陰影的位置。允許負值v-shadow必需的。垂直陰影的位置。允許負值blur可選。模糊距離spread可選。陰影的大小color可選。陰影的顏色。inset可選。從外層的陰影（開始時）改變陰影內側陰影2.4 CSS3 box-sizing 屬性
Box-sizing 屬性允許你以某種方式定義某些元素，以適應指定區域。
例如，假如您需要並排放置兩個帶邊框的框，可通過將 box-sizing 設置為 "border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中。
默認值:content-box繼承:no版本:CSS3JavaScript 語法:object.style.boxSizing="border-box"語法
box-sizing: content-box|border-box|inherit:
值說明content-box這是 CSS2.1 指定的寬度和高度的行為。指定元素的寬度和高度（最小/最大屬性）適用於box的寬度和高度。元素的填充和邊框布局和繪製指定寬度和高度除外border-box指定寬度和高度（最小/最大屬性）確定元素邊框。也就是說，對元素指定寬度和高度包括了 padding 和 border 。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。inherit指定 box-sizing 屬性的值，應該從父元素繼承2.5 CSS3 filter(濾鏡) 屬性
filter 屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。
默認值:none繼承:no動畫支持:是。版本:CSS3JavaScript 語法:object.style.WebkitFilter="grayscale(100%)"CSS 語法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();提示: 使用空格分隔多個濾鏡。
Filter 函數
注意: 濾鏡通常使用百分比 (如：75%), 當然也可以使用小數來表示 (如：0.75)。
Filter描述none默認值，沒有效果。blur(px)給圖像設置高斯模糊。"radius"一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；
如果沒有設定值，則默認是0；這個參數可設置css長度值，但不接受百分比值。brightness(%)給圖片應用一種線性乘法，使其看起來更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應線性乘數效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設定值，默認是1。contrast(%)調整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味著會運用更低的對比。若沒有設置值，默認是1。drop-shadow(h-shadow v-shadow blur spread color)給圖像設置一個陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。函數接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關鍵字是不允許的。該函數與已有的box-shadow box-shadow屬性很相似；不同之處在於，通過濾鏡，一些瀏覽器為了更好的性能會提供硬體加速。<shadow>參數如下：
<offset-x> <offset-y> (必須)
這是設置陰影偏移量的兩個 <length>值. <offset-x> 設定水平方向距離. 負值會使陰影出現在元素左邊. <offset-y>設定垂直距離.負值會使陰影出現在元素上方。查看<length>可能的單位.
如果兩個值都是0, 則陰影出現在元素正後面 (如果設置了 <blur-radius> and/or <spread-radius>，會有模糊效果).<blur-radius> (可選)
這是第三個code><length>值. 值越大，越模糊，則陰影會變得更大更淡.不允許負值 若未設定，默認是0 (則陰影的邊界很銳利).
<spread-radius> (可選)
這是第四個 <length>值. 正值會使陰影擴張和變大，負值會是陰影縮小.若未設定，默認是0 (陰影會與元素一樣大小).
注意: Webkit, 以及一些其他瀏覽器 不支持第四個長度，如果加了也不會渲染。
<color> (可選)
查看 <color>該值可能的關鍵字和標記。若未設定，顏色值基於瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 會應用colorcolor屬性的值。另外, 如果顏色值省略，WebKit中陰影是透明的。
grayscale(%)將圖像轉換為灰度圖像。值定義轉換的比例。值為100%則完全轉為灰度圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0；
hue-rotate(deg)給圖像應用色相旋轉。"angle"一值設定圖像會被調整的色環角度值。值為0deg，則圖像無變化。若值未設置，默認值是0deg。該值雖然沒有最大值，超過360deg的值相當於又繞一圈。
invert(%)反轉輸入圖像。值定義轉換的比例。100%的價值是完全反轉。值為0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。若值未設置，值默認是0。
opacity(%)轉化圖像的透明程度。值定義轉換的比例。值為0%則是完全透明，值為100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也相當於圖像樣本乘以數量。若值未設置，值默認是1。該函數與已有的opacity屬性很相似，不同之處在於通過filter，一些瀏覽器為了提升性能會提供硬體加速。
saturate(%)轉換圖像飽和度。值定義轉換的比例。值為0%則是完全不飽和，值為100%則圖像無變化。其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。若值未設置，值默認是1。
sepia(%)將圖像轉換為深褐色。值定義轉換的比例。值為100%則完全是深褐色的，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0；
url()URL函數接受一個XML文件，該文件設置了 一個SVG濾鏡，且可以包含一個錨點來指定一個具體的濾鏡元素。
例如：
filter: url(svg-url#element-id): url(svg-url#element-id)initial設置屬性為默認值。
inherit從父元素繼承該屬性。
2.6 CSS3動畫(animation)動畫是 CSS3 中最具顛覆性的特徵之一，可通過設置多個節點來精確的控制一個或者一組動畫，從而實現複雜的動畫效果。
動畫的基本使用：
1 定義動畫
2 調用定義好的動畫
定義動畫語法
@keyframes 動畫名稱 { 0% { width: 100px; } 100% { width: 200px }}使用動畫語法
div { /* 調用動畫 */ animation-name: 動畫名稱; /* 持續時間 */ animation-duration: 持續時間;}動畫序列
0% 是動畫的開始，100 % 是動畫的完成，這樣的規則就是動畫序列
在 @keyframs 中規定某項 CSS 樣式，就由創建當前樣式逐漸改為新樣式的動畫效果
動畫是使元素從一個樣式逐漸變化為另一個樣式的效果，可以改變任意多的樣式任意多的次數
用百分比來規定變化發生的時間，或用 from 和 to，等同於 0% 和 100%
動畫常見屬性
下面的表格列出了 @keyframes 規則和所有動畫屬性：
動畫簡寫方式
動畫簡寫方式
/* animation: 動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 起始與結束狀態 */
animation: name duration timing-function delay iteration-count direction fill-mode
知識要點
簡寫屬性裡面不包含 animation-paly-state
暫停動畫 animation-paly-state: paused; 經常和滑鼠經過等其他配合使用
要想動畫走回來，而不是直接調回來：animation-direction: alternate
盒子動畫結束後，停在結束位置：animation-fill-mode: forwards
代碼演示
animation: move 2s linear 1s infinite alternate forwards;
速度曲線細節
animation-timing-function: 規定動畫的速度曲線，默認是ease。
值描述linear動畫從頭到尾的速度是相同的。ease默認。動畫以低速開始，然後加快，在結束前變慢。ease-in動畫以低速開始。ease-out動畫以低速結束。ease-in-out動畫以低速開始和結束。cubic-bezier(n,n,n,n)在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。3 參考代碼3.1 HTML
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>加載動畫：公眾號AlbertYang</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div class="loader"> <div style="--x:0"></div> <div style="--x:1"></div> <div style="--x:2"></div> <div style="--x:3"></div> <div style="--x:4"></div> <div style="--x:5"></div> </div> </body></html>3.2 CSS
* { margin: 0; padding: 0; box-sizing: border-box;} body { display: flex; justify-content: center; align-items: center; background: #edf1f4; min-height: 100vh;} .loader { display: flex; flex-direction: row;} .loader div { position: relative; width: 40px; height: 200px; margin: 20px; overflow: hidden; border-radius: 50px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), #edf1f4); border: 2px solid #edf1f4; box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 20px #fff, inset -5px -5px 5px rgba(255, 255, 255, 0.5), inset 5px 5px 5px rgba(0, 0, 0, 0.05);} .loader div::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; border-radius: 50px; box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 20px #fff, inset -5px -5px 5px rgba(255, 255, 255, 0.5), inset 5px 5px 5px rgba(0, 0, 0, 0.05);} .loader div::before { content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 0.1), 0 420px 0 400px #2196f3; animation: animate 2.5s ease-in-out infinite; animation-delay: calc(var(--x) * -0.3s); transform: translateY(160px);} @keyframes animate { 0% { transform: translateY(160px); filter: hue-rotate(0deg); } 50% { transform: translateY(0px); filter: hue-rotate(180deg); } 100% { transform: translateY(160px); filter: hue-rotate(360deg); }}今天的學習就到這裡了，由於本人能力和知識有限，如果有寫的不對的地方，還請各位大佬批評指正。如果想繼續學習提高，歡迎關注我，每天學習進步一點點，就是領先的開始，加油。如果覺得本文對你有幫助的話，歡迎轉發，評論，點讚！！！