目錄
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
5分鐘實作漂亮的加載影片，CSS實作加載影片
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 |
| 版本: | CSS3 |
| JavaScript 語法: | 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 |
| 版本: | CSS3 |
| JavaScript 語法: | 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 |
| 影片支持: | 是， |
| 版本: | CSS3 |
| JavaScript 語法: | 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屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬體加速，
|
| 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濾鏡，且可以包含一個錨點來指定一個具體的濾鏡元素， 例如： |
| 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);
}
}
今天的學習就到這里了，由于本人能力和知識有限，如果有寫的不對的地方，還請各位大佬批評指正，如果想繼續學習提高，歡迎關注我，每天學習進步一點點，就是領先的開始，加油，如果覺得本文對你有幫助的話，歡迎轉發，評論，點贊！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/242332.html
標籤：AI