前端課程——漸變
- 2020 年 4 月 9 日
- 筆記
漸變
什麼是漸變
CSS漸變是CSS3的Image模塊中新增的內容。利用CSS漸變替代在HTML頁面中引入漸變效果的圖片，這樣減少HTML頁面加載的時間，減小帶寬的佔用。 由於CSS漸變是由瀏覽器直接生成，在HTML頁面縮放時的效果要比圖片更好，使得可以更靈活、便捷地調整HTML頁面布局。
線性漸變
線性漸變由一個軸(基準線)定義的，並且軸上每個點都具有獨立的顏色。
lincar-gradient()函數構建垂直於基準線的漸變效果,漸變的顏色取決於與之垂直相交的基準線上的色點。 基準線由包含漸變效果容器元素的中心點和一個角度來定義的。基準線上的顏色值則由不同的點來定義，包括起始點、終止點以及兩者之間可選的中間點(中間點可以有多個) 起始點是基準線和容器元素的頂點與基準線垂直線的相交點來定義。 終止點是基準線和容器元素最近頂點與基準線垂直線的相交點來定義。 漸變的0度是從下到上的，增加角度會使漸變順時針旋轉。
CSS linear gradient()函數用於創建一個表示兩種或多種顏色線性漸變的圖片。具體語法結構如下: linear-gradient(<angle> | <S ide-or-corner>, <color-stop>, <color-stop> +) 上述語法的參數說明:
- 第一個參數用於定義線性漸變的方向，並且定義漸變顏色的終止位置。
- angle:通過角度來定義漸變的方向。0度表示漸變方向從下向上，90度表示漸變從左向右。其角度按照順時針方向增加。
- side- or corner:通過關鍵字定義漸變的方向。具有兩個關鍵字，一個表示水平位置(left或right)，一個表示垂直位置(top或bottom) 。關鍵字的先後順序無影響，並且都是可選的。
- 第二個參數、第三個參數用於定義漸變顏色的起始點和終止點。
代碼
<!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-sizing: border-box; } div{ position: absolute; top: 10px; width: 200px; height: 200px; border: 1px solid gray; } /* 第一個基本漸變 */ .box1{ left: 10px; /* 第一個參數：設置漸變的方向 第二個參數。第三個參數···設置漸變的顏色 */ background: linear-gradient(0,blue,red); } /* 第二個基本漸變 */ .box2{ left: 220px; background: linear-gradient(45deg,blue,red); } /* 第三個基本漸變 */ .box3{ left: 430px; background: linear-gradient(90deg,blue,red); } .box4{ left: 640px; background: linear-gradient(90deg,blue,red,yellow); } /* 使用rgba設置 */ .box5{ left: 850px; background: linear-gradient(90deg,rgba(255,255,255,0),red,yellow); } .box6{ left: 1060px; background: linear-gradient(90deg,rgba(255,255,255,0),red); } /* 關鍵字設置角度 */ .box7{ top: 220px; left: 10px; background: linear-gradient(to left,blue,red); } .box8{ top: 220px; left: 220px; background: linear-gradient(to left bottom,blue,red); } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div> <div class="box7"></div> <div class="box8"></div> </body> </html>
漸變兼容性問題(新的語法，因為老語法已廢棄)：
.box8{ -webkit-background: linear-gradient(to left bottom,blue,red); -moz-background: linear-gradient(to left bottom,blue,red); -ms-background: linear-gradient(to left bottom,blue,red); -o-background: linear-gradient(to left bottom,blue,red); }
頭像濾鏡效果
<!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-sizing: border-box; } .box1{ width: 200px; height: 200px; border-radius: 50%; } img{ width: 200px; float: left; border-radius: 50%; } .lvjing{ position: relative; width: 100%; height: 100%; background: linear-gradient(to right,rgba(255,154,158,.7),rgba(250,208,196,.7)); border-radius: 50%; } </style> </head> <body> <div class="box1"> <img src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile1/imgbed/2020/02/24/20200224111924.jpg" alt=""> <div class="lvjing"></div> </div> </body> </html>
徑向漸變
徑向漸變由其中心點、邊緣形狀輪廓、位置以及顏色結束點定義的。
- 徑向漸變的中心點至邊緣形狀以及其延伸的部分是由連續縮放的若干同心輪廓組成的。
- 顏色結束點用於設定虛擬漸變射線的變化方式，由中心點水平變化至右側。顏色結束點由百分比設定，中心點為0%，終止點為100%。終止點為漸變射線與邊緣形狀相交點的漸變半徑。
- 邊緣形狀只能是圓形或者橢圓形。
語法radial-gradient(shape at position,clor-stop,color-stop+)
shape:表示設置的漸變形狀,默認表示橢圓position:表示設置起點的坐標值- 第一個值: 表示水平方向的值
- 第二個值: 表示垂直方向的值
size: 表示設置漸變形狀的大小- 圓形
- 該值為原型的半徑
- 橢圓形
- 值為段半徑和長半徑
- 圓形
color-stop:表示漸變的顏色,可以多個- 其後也可跟位置 例如
#212121 50% 50%
- 其後也可跟位置 例如
代碼
<!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-sizing: border-box; } div { position: absolute; top: 10px; width: 400px; height: 200px; border: 1px solid gray; } .box1 { left: 10px; /* */ background: radial-gradient(blue,red); } /* 形狀為圓形 */ .box2 { left: 420px; background: radial-gradient(circle,blue,red); } .box3 { left: 830px; background: radial-gradient(ellipse,blue,red); } .box4{ top: 220px; left: 10px; background: radial-gradient(ellipse at 0%,blue,red); } .box5{ top: 220px; left: 420px; background: radial-gradient(ellipse at 50%,blue,red); } .box6{ top: 220px; left: 830px; background: radial-gradient(ellipse at 100%,blue,red); } .box7{ top: 430px; left: 10px; background: radial-gradient(ellipse at 50% 0%,blue,red); } .box8{ top: 430px; left: 420px; background: radial-gradient(circle 215px at 50%,blue,red); } .box9{ top: 830px; left: 420px; background: radial-gradient(ellipse 200px at 100%,blue,red); } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div> <div class="box7"></div> <div class="box8"></div> </body> </html>
小球案例
<!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; border-radius: 50%; border: 1px solid gray; background: radial-gradient(circle at 25% 25%,#DFFFDF,#00DB00,#28ff28); } </style> </head> <body> <div class="box"></div> </body> </html>
重複漸變
repeating-linear-gradient() 函數和 repeating-radial-gradient() 函數來實現重複的漸變效果.
重複線性漸變
repeating-linear-gradient(<angle> | <side-or-corner>, <color-stop>, <color-stop> +)
- 第一個參數用於定義線性漸變的方向，並且定義漸變顏色的終止位置。
- auangle：通過角度來定義漸變的方向。0度表示漸變方向從下向上，90度表示漸變從左向右。其角度按照順時針方向增加。
- side-or-corner：通過關鍵字定義漸變的方向。具有兩個關鍵字，一個表示水平位置（left或right），一個表示垂直位置（top或bottom）。關鍵字的先後順序無影響，並且都是可選的。
- auangle：通過角度來定義漸變的方向。0度表示漸變方向從下向上，90度表示漸變從左向右。其角度按照順時針方向增加。
- 第二個參數、第三個參數用於定義漸變顏色的起始點和終止點。
/* 一個由下至上的重複線性漸變, 從藍色開始，40%後變綠， 最後漸變到紅色 */ repeating-linear-gradient(0deg, blue, green 40%, red);
重複漸變須在顏色後邊設置起始位置，否則與線性漸變相同。
重複徑向漸變
repeating-radial-gradient([ [ <shape> ] || <extent-keyword> ] [ at <position> ]?)
上述語法的參數說明：
- shape：用於定義徑向漸變的形狀，包含circle（圓形）和ellipse（橢圓形）。
- extent-keyword：用於定義徑向漸變的邊緣形狀的位置。
- position：用於定義徑向漸變的中心點位置。
- color-stop：用於定義徑向漸變的顏色終止點。
與重複線性漸變相似，需加上位置。也就是顏色後加上結束位置。
/* 一個由下至上的重複線性漸變, 從藍色開始，40%後變綠， 最後漸變到紅色 */ repeating-linear-gradient(0deg, blue, green 40%, red);
利用重複漸變實現唱片效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>重複徑向漸變實現唱片效果</title> <style> .radial-gradient { position: relative; width: 262px; height: 262px; border-radius: 50%; background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px); background-size: 50% 100%, 100% 50%, 100% 100%; } .radial-gradient::after { position: absolute; top: 50%; left: 50%; margin: -35px; border: solid 1px #d9a388; width: 68px; height: 68px; border-radius: 50%; box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33; background: #b5ac9a; content: ''; } </style> </head> <body> <div class="radial-gradient"></div> </body> </html>
