CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。
CSS3 定义了两种类型的渐变(gradients):
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
径向渐变(Radial Gradients)- 由它们的中心定义
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>从上到下的线性渐变</title> <style> .grad{ background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <div class="grad" style="height: 200px;"></div> </body> </html>
效果图:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>一个带有彩虹颜色和文本的线性渐变</title> <style> .grad{ background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <div class="grad" style="height: 200px;"></div> </body> </html>
效果图:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>使用透明度</title> <style> .grad{ background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <div class="grad" style="height: 200px;"></div> </body> </html>
效果图:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>径向渐变</title> <style> .grad{ background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */ background: radial-gradient(circle, red, yellow, green); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <div class="grad" style="height: 200px; width: 300px;"></div> </body> </html>
效果图:
相关推荐
简单的背景渐变代码,使用H5和Css3实现,主要采用渐变函数
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解 大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更...我们从css3的渐变开始说起,这样关于Can
创意设计css3网页模板是一款大气时尚的渐变风格css3网站模板。_html网站模板_网页源码移动端前端_H5模板_自.rar
高光渐变蓝色商务风格CSS模板_高光 渐变 蓝色 按钮 商务 整站_html网站模板_网页源码移动端前端_H5模板_自.rar
绿色渐变人欧美商务企业模板_绿色 欧美 企业 渐变 css_html网站模板_网页源码移动端前端_H5模板_自适应响应.rar
灰蓝渐变宽屏_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip
非常实用的特效代码,可以完美运行,可以二次修改!
高光渐变蓝色商务风格CSS模板4076_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip
蓝色渐变商务CSS模板下载_蓝色 建筑_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar
蓝色水晶企业CSS模板_蓝色 水晶 企业 渐变 深蓝 光_html网站模板_网页源码移动端前端_H5模板_自适应响应式.rar
漂亮的水晶效果CSS模板_漂亮 头部 水晶 web20 企业 导航 渐变_html网站模板_网页源码移动端前端_H5模.rar
商务企业网站CSS模板45_企业 简洁 白色 线条 蓝色 渐变_html网站模板_网页源码移动端前端_H5模板_自适应.rar
商务企业网站CSS模板16_商务 企业 蓝色 天空 白云 大图 渐变_html网站模板_网页源码移动端前端_H5模板_.rar
商务企业网站CSS模板20_商务 企业 黑色 红色 渐变_html网站模板_网页源码移动端前端_H5模板_自适应响应式.rar
商务企业网站CSS模板58_商务 企业 黑色 渐变_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar
商务企业网站CSS模板32_商务 企业 棕色 漂亮 渐变 整体色_html网站模板_网页源码移动端前端_H5模板_自适.rar
HTML5 CSS3 淡入淡出动画效果的Tab菜单特效,圆角风格,同样带有渐变动画效果,整体风格我觉得相当的漂亮,来自国外CSS3达人网站的作品,代码简洁,TAB效果如示例截图所示。
非常实用的特效代码,可以完美运行,可以二次修改!
css3 svg技能展示圆形进度条动画特效