您的位置：首页 > 网站优化 > css  >  css3中渐变效果实现示例

css3中渐变效果实现示例

 更新时间：2016年10月2日 16:18  点击：2004
渐变效果在css中我们必须使用js来配合实现了现在我们可以直接使用css来实现渐变效果了，下面我们来看一篇css3中渐变效果实现示例吧。

渐变效果是backround-image属性的一个值，语法格式如下：

background-image:linear-gradient(方位, 起始色, 末尾色);

其中，方位为可选参数，起始色与末尾色为必选参数，如果不指定方位参数，默认的渐变由上往下。

方位支持的值： to top、to top right、to right、to bottom、to bottom left、to left、to top left等，除此之外，方为还支持角度单位deg。

 代码如下 复制代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <title>渐变效果实例</title>

 <style type="text/css">
  #d1{
   width: 250px;
   height: 250px;
   text-align: center;
   line-height: 250px;
   <!--未配置方位参数，默认由上往下-->
   background-image: linear-gradient(green,red)
  }
  #d2{
   width: 250px;
   height: 250px;
   text-align: center;
   line-height: 250px;
   <!--配置了方为参数，从左上到右下-->
   background-image: linear-gradient(to bottom right,green,red)
  }
  #d3{
   width: 250px;
   height: 250px;
   text-align: center;
   line-height: 250px;
   <!--使用角度方位，45°渐变，0°=to top，45°=to top right，可以是负值，负值渐变方向与正值相对图形的中垂线左右翻转-->
   background-image: linear-gradient(45deg,green,red)
  }
 </style>
</head>
<body>
 <div id="d1">
  www.111cn.net
 </div>
 <br>
 <div id="d2">
  www.111cn.net
 </div>
 <br>
 <div id="d3">
  www.111cn.net
 </div>
</body>
</html>

显示效果：

www.111cn.net
www.111cn.net
www.111cn.net
0×2.多色渐变
可以在linear-gradient内部配置多个颜色值来实现多色渐变效果，请看下面的实例：

 代码如下 复制代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <title>多色渐变效果实例</title>

 <style type="text/css">
  #d1{
   width: 250px;
   height: 250px;
   text-align: center;
   line-height: 250px;
   <!--使用4色渐变，默认情况下四种颜色将平均分配，红色和绿色的基准线在两端，本例div宽度为250px，那么黄色基准线的位置大约在83.33px的位置-->
   background-image: linear-gradient(to right,red,yellow,blue,green);
  }
  #d2{
   width: 250px;
   height: 250px;
   text-align: center;
   line-height: 250px;
   <!--在颜色后跟随像素单位或百分数能够改变基准线位置，绿色的基准线原本在250px处，也就是div的边线上，现在调整到200px处，由于绿色右边没有其他颜色属性，所以不会发生渐变-->
   background-image: linear-gradient(to right,red 0px,yellow 20px,blue 166.66px,green 200px);
  }
  #d3{
   width: 250px;
   height: 250px;
   text-align: center;
   line-height: 250px;
   <!--使用百分数设置基准线-->
   background-image: linear-gradient(to right,red,yellow 50%,blue 70%,green);
  }
 </style>
</head>
<body>
 <div id="d1">
  www.111cn.net
 </div>
 <br>
 <div id="d2">
  www.111cn.net
 </div>
 <br>
 <div id="d3">
  www.111cn.net
 </div>
</body>
</html>

显示效果：

www.111cn.net
www.111cn.net
www.111cn.net
0×3.透明渐变
渐变配合rgba颜色选择器可以实现图像的层次效果，请看下面的实例：

 代码如下 复制代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <title>透明渐变效果实例</title>

 <style type="text/css">
  #d1{
   width: 250px;
   height: 250px;
   text-align: center;
   line-height: 250px;
   <!--配置背景为红色-->
   background-color: red;
   <!--在背景色的基础上，由下往上配置透明渐变，下方为0.7的黑色透明，上方黑色完全透明，这样就相当于在原本红色背景的基础上覆盖了一层由下往上渐变的黑色效果-->
   background-image: linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0));
  }
 </style>
</head>
<body>
 <div id="d1">
  www.111cn.net
 </div>

</body>
</html>

显示效果：

www.111cn.net
0×4.平铺渐变
配合基准线的设置，平铺渐变能够实现从起始的颜色基准线位置到结束的颜色基准线位置的重复平铺，请看下面的实例：

 代码如下 复制代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <title>平铺渐变效果实例</title>

 <style type="text/css">
  #d1{
   width: 250px;
   height: 250px;
   text-align: center;
   line-height: 250px;
   <!--本例使用了三色渐变，红色为起始色，蓝色为结束色，设置结束色的基准线在div方块从上往下20%处，因为使用的是平铺渐变，剩余的80%会使用相同的颜色重复填充-->
   background-image: repeating-linear-gradient(red,yellow,blue 20%);
  }
 </style>
</head>
<body>
 <div id="d1">
  www.111cn.net
 </div>

</body>
</html>

显示效果：

www.111cn.net
0×5.放射性渐变
放射性渐变与普通渐变稍有区别，顾名思义，这种渐变会呈现放射性效果，而不是线性效果，先来看几个概念。

1）放射源形状

circle 圆形；
ellipse 椭圆形（默认值）；

2）发散方向

at top 从顶部中央发散；
at left 从左侧中央发散；
at right 从右侧中央发散；
at bottom 从底部中央发散；
at center 从图形中心点发散（默认值）；
at top right 从顶部右边发散；
at top left 从顶部左边发散；
at bottom left 从底部左边发散；
at bottom right 从底部右边发散；

3）放射源半径

closest-side 指定径向渐变的半径长度为从圆心到离圆心最近的边；
closest-corner 指定径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边；
farthest-corner 指定径向渐变的半径长度为从圆心到离圆心最远的角；

4）配置语法

background-image: radial-gradient([放射源形状] [发散方向] [放射源半径] [指定放射半径],[颜色值1],[颜色值2],[颜色值3],[颜色值N]);

除了颜色值1和2是必选参数外，其他都是可选参数。

下面用一个实例来演示上面这些概念：

 代码如下 复制代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <title>放射渐变效果实例</title>

 <style type="text/css">
  #d1{
   width: 250px;
   height: 250px;
   text-align: center;
   line-height: 250px;
   <!--默认的放射性渐变，从图形中心点向外渐变，渐变颜色支持双色和多色，本例使用了三种颜色-->
   background-image: radial-gradient(green,red,yellow);
  }
  #d2{
   width: 250px;
   height: 250px;
   text-align: center;
   line-height: 250px;
   <!--配置渐变中心点的位置为顶部中央，并且配置放射性图形为圆形（默认为椭圆形）-->
   background-image: radial-gradient(circle at top,green,red,yellow);
  }
  #d3{
   width: 250px;
   height: 400px;
   text-align: center;
   line-height: 400px;
   <!--配置放射半径以哪条边为参考，本例故意将div的高设置成400px，并且使用从圆心到离圆心最远的边作为放射半径-->
   background-image: radial-gradient(farthest-side,green,red,yellow);
  }
  #d4{
   width: 250px;
   height: 250px;
   text-align: center;
   line-height: 250px;
   <!--设置放射半径为80px-->
   background-image: radial-gradient(80px,green,red);
  }
  #d5{
   width: 250px;
   height: 250px;
   text-align: center;
   line-height: 250px;
   <!--设置放射半径为80px，并使用平铺渐变-->
   background-image: repeating-radial-gradient(80px,green,red,yellow);
  }
 </style>
</head>
<body>
 <div id="d1">
  www.111cn.net
 </div>
 <br>
 <div id="d2">
  www.111cn.net
 </div>
 <br>
 <div id="d3">
  www.111cn.net
 </div>
 <br>
 <div id="d4">
  www.111cn.net
 </div>
 <br>
 <div id="d5">
  www.111cn.net
 </div>
</body>
</html>

[!--infotagslink--]

相关文章

  • Painter绘制红衣喝酒男水粉画效果教程

    今天小编在这里就来给Painter的这一款软件的使用者们来说一说绘制红衣喝酒男水粉画效果的教程，各位想知道具体绘制步骤的使用者，那么下面就快来跟着小编一起看一看教程...2016-09-14

  • php语言实现redis的客户端

    php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25

  • photoshop用各种素材合成闪电侠效果制作教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说说利用各种素材合成闪电侠效果的制作教程，各位想知道具体制作步骤的使用者们，那么下面就快来跟着小编一起看...2016-09-14

  • jQuery+jRange实现滑动选取数值范围特效

    有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15

  • JS实现的简洁纵向滑动菜单(滑动门)效果

    本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21

  • Illustrator渐变网格工具绘制可爱的卡通小猪教程分享

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说渐变网格工具绘制可爱的卡通小猪的教程，各位想知道具体制作方法的使用者们，那么下面就快来跟着小编一...2016-09-14

  • 美图秀秀把普通照片快速转换成卡通效果教程

    今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下把普通照片快速转换成卡通效果的教程，各位想知道具体制作步骤的使用者们，那么下面就快阿里跟着小编一起看一...2016-09-14

  • JS实现双击屏幕滚动效果代码

    本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考，具体如下：这里演示双击滚屏效果代码的实现方法，不知道有觉得有用处的没，现在网上还有很多还在用这个特效的呢，代码分享给大家吧。运行效果截图如下：在线演...2015-10-30

  • jQuery+slidereveal实现的面板滑动侧边展出效果

    我们借助一款jQuery插件：slidereveal.js，可以使用它控制面板左右侧滑出与隐藏等效果，项目地址：https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15

  • photoshop调出时尚个性青色人像照片效果调色教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说说调出时尚个性青色人像照片效果的调色教程，各位想知道到底该怎么调色的，那么下面就快来跟着小编一起看一看...2016-09-14

  • PHP+jQuery翻板抽奖功能实现

    翻板抽奖的实现流程：前端页面提供6个方块，用数字1-6依次表示6个不同的方块，当抽奖者点击6个方块中的某一块时，方块翻转到背面，显示抽奖中奖信息。看似简单的一个操作过程，却包含着WEB技术的很多知识面，所以本文的读者应该熟...2015-10-21

  • SQLMAP结合Meterpreter实现注入渗透返回shell

    sqlmap 是一个自动SQL 射入工具。它是可胜任执行一个广泛的数据库管理系统后端指印, 检索遥远的DBMS 数据库等，下面我们来看一个学习例子。 自己搭建一个PHP+MYSQ...2016-11-25

  • JS实现响应鼠标点击动画渐变弹出层效果代码

    这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28

  • PHP实现今天是星期几的几种写法

    复制代码 代码如下: // 第一种写法 $da = date("w"); if( $da == "1" ){ echo "今天是星期一"; }else if( $da == "2" ){ echo "今天是星期二"; }else if( $da == "3" ){ echo "今天是星期三"; }else if( $da == "4"...2013-10-04

  • ps怎么制作图片阴影效果

    ps软件是现在很多人比较喜欢的，有着非常不错的使用效果，这次文章就给大家介绍下ps怎么制作图片阴影效果，还不知道制作方法的赶紧来看看。 ps图片阴影效果怎么做方法/...2017-07-06

  • ps立体倒影效果制作方法

    ps软件是现在很多人比较喜欢使用的，有着非常不错的功能。这次文章就给大家介绍下ps立体倒影效果制作方法，还不知道怎么制作的赶紧来看看。 最终效果&#8195;&#8195;1...2017-07-06

  • 原生js实现fadein 和 fadeout淡入淡出效果

    js里面设置DOM节点透明度的函数属性：filter= "alpha(opacity=" + value+ ")"（兼容ie）和opacity=value/100（兼容FF和GG）。 先来看看设置透明度的兼容性代码： 复制代码 代码如下: function setOpacity(ele, opacity) { if (...2014-06-07

  • 利用Photoshop打造科幻片中的人物粒子化消失效果

    本文章分享一篇关于Photoshop打造科幻片中的人物粒子化消失效果，教程重点是画笔的应用，人物身上产生的碎块，颗粒等都是用自定或下载的笔刷来完成，制作之前最好先下载一些...2016-09-14

  • ps制作立体文字效果教程

    ps软件是现在非常受大家喜欢的一款软件，有着非常不错的制作效果。下面文章就给大家介绍下ps制作立体文字效果教程，感兴趣的一起来看看。 ps文字立体效果怎么做最终...2017-07-06

  • jQuery实现的文字hover颜色渐变效果实例

    这篇文章主要介绍了jQuery实现的文字hover颜色渐变效果,以完整实例形式分析了jQuery实现文字颜色渐变效果的相关技巧,涉及jQuery插件jquery-ui-1.8.16.custom.min.js的使用,需要的朋友可以参考下...2016-02-23