IT兄弟连 HTML5教程 CSS3属性特效 渐变2 线性渐变实例
3 线性渐变实例
一、颜色从顶部向底部渐变
制作从顶部到底部直线渐变有三种方法,第一种是起点参数不设置,因为起点参数的默认值为“top”;第二种方法起点参数设置为“top”;第三种起点参数使用“-90deg”关键词。为top_bottom设置从顶部向底部的渐变,三种方法的CSS代码如下:
第一种方法:
第二种方法:
第三种方法:
上述三种css设置运行的效果相同,top_bottom的背景变为从白色到黑色的自上而下形成线性渐变。在浏览器中查看效果如图1所示:
图1 顶部到底部的线性渐变
同样,我们可以将起点参数设置为bottom、left、right,依次是从底部向顶部渐变,从左边向右边渐变和从右边向左边渐变。
二、颜色从左下角向右上角渐变
制作从左下角到左上角直线渐变有两种方法,第一种是起点参数设置为“bottom left”;第二种起点参数使用“45deg”关键词。为left_bottom设置从顶部向底部的渐变,CSS代码如下:
第一种方法:
第二种方法:
上述两种css设置运行的效果相同,left_bottom的背景变为从左下角到右上角形成线性渐变。在浏览器中查看效果如图2所示:
图2 左下角到右上角的线性渐变
三、多色线性渐变
前面向大家演示的效果仅是一些简单的线性渐变(两色渐变),其实在实际中,渐变不仅仅是只有两种颜色,会有多色。接下来,我们一起来看一个从左向右的五彩渐变,代码如下:
将包含上述代码的html文件在浏览器中查看,渐变效果如图3所示:
图3 五色渐变
四、自定义线性渐变
那么问题来了,如何实现下图的渐变效果?
通过上图可以注意到,颜色从0%的不透明度开始,第一个色标的位置位于0%,其透明度为0%,第二个色标位置为80%的不透明度,位置位于8%。我们可以通过渐变工具从CSS声明中捕捉相关数据,我们可以实现自定义线性渐变,CSS代码如下:
将替换了CSS代码的html在浏览器中查看,渐变效果如图4所示:
图4 自定义线性渐变
上图再证明,一个渐变可以包含多个色标,位置值为0~1之间的小数,或者0~100%之间的百分数,指定色标的位置比例,其用法与Photoshop中的值线渐变工具用法相似。
五、进度条
应用CSS3线性渐变,我们还可以实现进度条效果。制作进度条,我们需要使用到repeating-linear-gradient参数。repeating-linear-gradient的含义是用重复的线性渐变创建图像。repeating-linear-gradient()的语法与linear-gradient()相同。实现进度条效果,代码如下:
首先构造一个进度条,当鼠标移入进度条时,进度条开始运动,在浏览器中查看效果如图5所示:
图5 进度条
IT兄弟连 HTML5教程 CSS3属性特效 渐变2 线性渐变实例的更多相关文章
- IT兄弟连 HTML5教程 CSS3属性特效 渐变3
4 径向渐变 CSS3径向渐变是圆形或椭圆形渐变.颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合.但相对线性渐变要比径向渐变复杂的多. 径向渐变的格式如下: radial-gradient ...
- IT兄弟连 HTML5教程 CSS3属性特效 渐变1
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- IT兄弟连 HTML5教程 CSS3属性特效 小结及习题
本章小结 CSS3新增了许多属性,CSS3样式新增了一种颜色模式rgba用来制作透明色,比CSS的颜色模式多了一个透明度的设置.文字的CSS3特效有文字阴影.文字描边.文字排版和文字省略等.另外,CS ...
- IT兄弟连 HTML5教程 CSS3属性特效 倒影
在Web制作中,有些时候需要实现一些倒影的效果.在传统网页中,我们只能使用photoshop事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发效率.而CSS新增了Reflections ...
- IT兄弟连 HTML5教程 CSS3属性特效 文字描边
用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...
- IT兄弟连 HTML5教程 CSS3属性特效 动画-animation
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...
- IT兄弟连 HTML5教程 CSS3属性特效 CSS3背景
CSS3规范中对背景这一部分,新加入了一些有用的功能,如可以设置多个背景图片.可以指定背景大小.设置背景渐变等功能.CSS3规范中定义的背景属性新增了background-clip.backgroun ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换3
5 3D旋转 在三维变形中,我们可以让元素在任何轴旋转.为此,CSS3新增了三个旋转函数:rotateX().rotateY()和rotateZ().使用rotateX()函数允许一个元素围绕X轴旋 ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换2
3 perspective-origin景深基点 perspective-origin景深基点属性时3D变形中另一个重要属性,主要用来决定perspective属性的源点角度.它实际上设置了X轴和Y ...
随机推荐
- Linux基本架构
Linux linux设计思想 1.程序应该小而专一,程序应该尽量的小,且只专注于一件事上,不要开发那些看起来有用但是90%的情况都用不到的特性: 2.程序不只要考虑性能, 程序的可移植性更重要,sh ...
- MySQL 库、表、记录、相关操作(3)
MySQL 库.表.记录.相关操作(3) 单表查询 """ 增: insert [into] [数据库名.]表名[(字段1[, ..., 字段n])] values (数 ...
- 点击查看大图滑动预览(h5,pc通用)
点击预览大图并滑动观看,支持手机端和pc端,具体功能如下图: 一. touchTouch 的js和css 以及jquery依赖库 <link rel="stylesheet" ...
- Nginx访问日志、日志切割、静态文件不记录日志和过期时间
6月8日任务 12.10 Nginx访问日志12.11 Nginx日志切割12.12 静态文件不记录日志和过期时间 12.10 Nginx访问日志 除了在主配置文件nginx.conf里定义日志格式外 ...
- c语言作业07
问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/8655 我在 ...
- Docker 构建私有仓库
Docker Hub 目前Docker官方维护了一个公共仓库Docker Hub,其中已经包含了数量超过15000的镜像.大部分需求都可以通过在Docker Hub中直接下载镜像来实现. 可以在htt ...
- 工作流Activity组件值数据传递获取问题
如图:先简单说一下大致过程 通过具体的菜单节点,加载具体的指令组件.本着低耦合的原件,需要将核查组件从指令组件重拆分出来,作为单独的组件根据业务需要拖拽到指令组件中.但是具体业务方面核查组件一方面需要 ...
- Exponial
Description Everybody loves big numbers (if you do not, you might want to stop reading at this point ...
- cs5642-v3各配置文件测试图片对比
寄存器功能强大,可以配置很多参数,每个参数出来的图像都不同 我们以cs5642-v3的两个配置进行了对比测试 测试准备 配置文件:ov5642_960p_RAW和OV5642_YUV_VGA 测试摄像 ...
- Java关于赋值
下面的程序有问题吗?如果有问题说明一下, 如果没有问题猜测一下运行结果: public static void main(String[] args){ short s = 1; s=s+1; Sys ...