在freeCodeCamp中应用视觉设计的课程中,介绍了一种通过使用CSS属性实现线性渐变效果。

1.线性渐变:

background:linear-gredient(gradient-direction,color1,color2,color3,...)

"gradient-direction"参数:指定了颜色转换开始的方向,使用度数表示,(ag:45deg);

后续的颜色:指定了使用的颜色顺序;

举个栗子:

 <style>

   div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
background:linear-gradient(35deg,#CCFFFF,#FFCCCC);
} </style> <div></div>

效果是这样的:

将渐变角度改成90deg时的效果是这样的:(垂直渐变)

2.使用CSS线性渐变创建条纹元素:

 background:repeating-linear-geadient(gradient-direction,color1  像素/百分比,color2  像素/百分比,...);

"gradient-direction"参数:指定了颜色转换开始的方向,使用度数表示,(ag:45deg);

后续的颜色:指定了使用的颜色顺序;

像素/百分比值:类似宽度,标记了发生转换的位置

举个栗子:

 <style>

   div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50 auto;
background: repeating-linear-gradient(
90deg,
yellow 0px,
blue 40px,
green 40px,
red 80px
);
}
</style> <div></div>

效果是这样的:

在这个例子中,渐变从0像素处的黄色开始,然后在距离开始40像素处混合为第二种颜色蓝色。由于下一个颜色停止也是在40像素,梯度立即改变;

将转换梯度换一个值(45deg)或许更明显,更换后的效果是这样的:

注:如果每两个颜色停止值都是相同的颜色,那么混合就不明显了,因为它位于相同的颜色之间,然后很难过渡到下一个颜色,所以最后得到的是条纹。

举个栗子:

 <style>

   div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50 auto;
background: repeating-linear-gradient(
45deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px
);
}
</style> <div></div>

效果就变成了黄黑条纹啦(如下图)

以上。

应用视觉设计——CSS实现线性渐变效果的更多相关文章

  1. 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. css3的线性渐变效果

    1.代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  3. 纯CSS的颜色渐变效果

    本例展示了一个纯css渐变的效果.其兼容IE6以上浏览器等各主流浏览器: 案例效果:查看演示 代码如下: css: *{margin:0;padding:0;} .linear{ width:100% ...

  4. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(3)线性渐变

    线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: .test{ background:linear ...

  5. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  6. CSS3中颜色线性渐变实战

    css3线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: CSS Code复制内容到剪贴板 .te ...

  7. 再说CSS3渐变——线性渐变

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

  8. CSS3渐变——线性渐变

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

  9. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

随机推荐

  1. Springboot:异步业务处理(十二)

    说明 当正常业务处理调用一个复杂业务或者耗时较长的请求时,客户等待时间会比较长,造成不好的用户体验,所以这时候需要用的异步处理 构建一个群发邮件的service接口及实现(模拟) 接口:com\spr ...

  2. python爬虫-User-Agent的伪造

    某些网站会识别python爬虫程序并阻断,通过构造User_Agent可以抵抗某些反爬虫机制 用fake-useragent这个库就能很好的实现 pycharm中安装步骤 产生随机的User-Agen ...

  3. php +go关键字实现协程

    来源: https://studygolang.com/articles/17631?fr=sidebar 今天在知乎浏览时忽然发现了一个有趣的东西,php竟然可以实现协程的实现,而且还是通过go关键 ...

  4. 20199308《Linux内核原理与分析》第十二周作业

    一.实验简介 竞态条件是指多个线程同时访问或者操作同一块数据,运行的结果依赖于不同线程访问数据的顺序.如果一个拥有root权限的程序存在竞态条件漏洞的话,攻击者可以通过运行一个平行线程与漏洞程序竞争, ...

  5. 2019-2020-1 20199329 第二周测试(环境:ubuntu64位)

    2019-2020-1 20199329 第二周测试(环境:ubuntu64位) 实验一 0.每个.c一个文件,每个.h一个文件,文件名中最好有自己的学号 1.用Vi输入图中代码,并用gcc编译通过 ...

  6. 如何给 Inno Setup 生成的安装包添加版本信息

    使用 Inno 已有的函数 GetFileVersion 获取 EXE 文件的版本 #define ApplicationName 'Application Name' #define Applica ...

  7. Silverlight Tools Beta2更新了中文语言支持

    1,似乎是微软偷偷摸摸更新的......刚才无意间发现,已经下载安装并测试,已在中文版的VS2008安装成功.注意下载页面的安装说明: http://www.microsoft.com/downloa ...

  8. 在 AutoLayout 和 Masonry 中使用动画

    动画是 iOS 中非常重要的一部分,它给用户展现出应用灵气的一面. 在动画块中修改 Frame 在原来使用 frame 布局时,在 UIView 的 animate block 中对 view 的布局 ...

  9. 数学--数论-- HDU 2601 An easy problem(约束和)

    Problem Description When Teddy was a child , he was always thinking about some simple math problems ...

  10. Jenkins 项目构建

    一:新建项目 (1)点击新建,输入项目名称--构建一个自由风格的软件项目,点击ok (2)构建触发器-----设置每两分钟执行一次 其中有5个参数 (*****) 第一个是代表分钟  一小时内的分钟数 ...