您的位置:首页> 前端教程> CSS3教程
文章导航

CSS 倾斜角度线性渐变

2018-7-20 01:05| 作者: admin| 查看: 1995| 评论: 0|来自: 蚂蚁部落

关于线性渐变的基本知识可以参阅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>
1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部