CSS3 傾斜角度線性漸變

admin發表於2018-07-20
CSSS3

關於線性漸變的基本知識可以參閱CSS3 linear-gradient()線性漸變一章節。

先看一下線性漸變的標準語法:

[CSS] 純文字檢視 複製程式碼
linear-gradient([ [ [<angle> | to [top | bottom] || [left | right] ],]? <color-stop>[,<color-stop>]+)

垂直或者水平的漸變相對簡單，看如下程式碼:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:150px;
  height:150px;
  margin:20px;
}
.left{
  background:linear-gradient(to left,red,blue);
}
</style>
</head>
<body>
<div class="left"></div>
</body>
</html>

上面的程式碼實現紅色至藍色由右到左漸變效果。

線性漸變也可以通過angle引數規定來規定傾斜的漸變效果，看如下程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:150px;
  height:150px;
  margin:20px;
}
.left{
  background:linear-gradient(10deg,red,blue);
}
</style>
</head>
<body>
<div class="left"></div>
</body>
</html>

程式碼演示了10deg的線性漸變效果，下面介紹一下角度的具體細節。

圖示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201807/20/010617fied8l6eus747ovy.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

結合圖示介紹一下角度說:

（1）.0deg表示垂直向上漸變。

（2）.正數表示以元素中心順時針旋轉。

（3）.從最近的頂點發出且與漸變線垂直的直線與漸變線的相交點就是漸變的起始點和結束點。

（4）.漸變的初始點是漸變開始顏色的實色，漸變的結束點是漸變結束顏色的實色。

看一個動態漸變效果:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:150px;
  height:80px;
  margin:20px;
}
.antzone{
  background:linear-gradient(0deg,red,blue);
}
</style>
<script>
window.onload = function () {
  var odiv = document.getElementsByTagName("div")[0];
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    var timer = null;
    var count = 0;
    timer = setInterval(function () {
      if (count == 360) {
        clearInterval(timer);
      }
      count = count + 1;
      odiv.style.background = "linear-gradient(" + count + "deg,red,blue)";
    }, 100)
  }
}
</script>
</head>
<body>
<div class="antzone"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

結合JavaScript演示了一個動態漸變效果，有助於理解。

to top, to bottom, to left 和 to right這些值會被轉換成角度0度、180度、270度和90度。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:150px;
  height:80px;
  margin:20px;
}
.top{
  background:linear-gradient(to top, red,blue );
}
.bottom{
  background:linear-gradient(to bottom, red,blue );
}
.left{
  background:linear-gradient(to left, red,blue );
}
.right{
  background:linear-gradient(to right, red,blue );
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>

相關文章