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 线性渐变实例的更多相关文章

  1. IT兄弟连 HTML5教程 CSS3属性特效 渐变3

    4  径向渐变 CSS3径向渐变是圆形或椭圆形渐变.颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合.但相对线性渐变要比径向渐变复杂的多. 径向渐变的格式如下: radial-gradient ...

  2. IT兄弟连 HTML5教程 CSS3属性特效 渐变1

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  3. IT兄弟连 HTML5教程 CSS3属性特效 小结及习题

    本章小结 CSS3新增了许多属性,CSS3样式新增了一种颜色模式rgba用来制作透明色,比CSS的颜色模式多了一个透明度的设置.文字的CSS3特效有文字阴影.文字描边.文字排版和文字省略等.另外,CS ...

  4. IT兄弟连 HTML5教程 CSS3属性特效 倒影

    在Web制作中,有些时候需要实现一些倒影的效果.在传统网页中,我们只能使用photoshop事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发效率.而CSS新增了Reflections ...

  5. IT兄弟连 HTML5教程 CSS3属性特效 文字描边

    用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...

  6. IT兄弟连 HTML5教程 CSS3属性特效 动画-animation

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...

  7. IT兄弟连 HTML5教程 CSS3属性特效 CSS3背景

    CSS3规范中对背景这一部分,新加入了一些有用的功能,如可以设置多个背景图片.可以指定背景大小.设置背景渐变等功能.CSS3规范中定义的背景属性新增了background-clip.backgroun ...

  8. IT兄弟连 HTML5教程 CSS3属性特效 3D变换3

    5  3D旋转 在三维变形中,我们可以让元素在任何轴旋转.为此,CSS3新增了三个旋转函数:rotateX().rotateY()和rotateZ().使用rotateX()函数允许一个元素围绕X轴旋 ...

  9. IT兄弟连 HTML5教程 CSS3属性特效 3D变换2

    3  perspective-origin景深基点 perspective-origin景深基点属性时3D变形中另一个重要属性,主要用来决定perspective属性的源点角度.它实际上设置了X轴和Y ...

随机推荐

  1. 在flink中使用jackson JSONKeyValueDeserializationSchema反序列化Kafka消息报错解决

    在做支付订单宽表的场景,需要关联的表比较多而且支付有可能要延迟很久,这种情况下不太适合使用Flink的表Join,想到的另外一种解决方案是消费多个Topic的数据,再根据订单号进行keyBy,再在逻辑 ...

  2. phpStorm自动生成___jb_tmp___文件

    把这个去掉就可以了

  3. 01Shell入门02-echo和printf

    输出方式 小知识 echo echo -e 可以控制字体颜色和背景颜色输出 示例 echo -e "\033[41;36m Hello world \033[0m" [root@h ...

  4. 3分钟了解ServiceStage 应用智能化运维【华为云分享】

    [摘要] 微服务云应用平台(ServiceStage)是面向企业及开发者的一站式DevOps平台服务,支持基于微服务的应用开发.治理.部署及运维监控的全生命周期管理,并提供大规模容器集群管理及中间件服 ...

  5. 在modelarts上部署backend为TensorFlow的keras模型

    最近老山在研究在modelarts上部署mask-rcnn,源代码提供的是keras模型.我们可以将keras转化成savedModel模型,在TensorFlow Serving上部署,可参考老山的 ...

  6. TypeError: 'list' object cannot be interpreted as an integer

    TypeError: 'list' object cannot be interpreted as an integer 类型错误,不能将list对象转换为一个整数. 错误代码,例如如下例子: arg ...

  7. luogu P5514 [MtOI2019]永夜的报应

    题目背景 在这世上有一乡一林一竹亭,也有一主一仆一仇敌. 有人曾经想拍下他们的身影,却被可爱的兔子迷惑了心神. 那些迷途中的人啊,终究会消失在不灭的永夜中-- 题目描述 蓬莱山 辉夜(Kaguya)手 ...

  8. React-native ESLint & Prettier & Pre-commit Hook配置

    目录 前言 一 eslint 1.1. 局部安装eslint 1.2 初始化配置文件 1.3 安装步骤 1.3.1 ESLint 风格 选Use a popular style guide 1.3.2 ...

  9. PDF怎么删除页面?教你两个超级好用的方法

    在日常办公中,由于工作需要我们有时候会对PDF文件中的内容进行二次编辑,可能需要删除PDF文件中的一些页面.那么PDF怎么删除页面呢?小伙伴们还在为这个问题苦恼吗?那么今天小编就来教大家两个超级好用的 ...

  10. 摄像头CMOS和CCD的比较

    转载自网络,在此做一下总结,仅供参考: 1.CCD每曝光一次,在快门关闭后进行像素转移处理,将每一行中每一个像素(pixel)的电荷信号依序传入“缓冲器”中,由底端的线路引导输出至 CCD 旁的放大器 ...