对于css3的学习，更多的是在于对新特性和基础理论的熟悉，这篇文章通过一个案例带领大家了解css3里一些理论知识，也将一些技巧加以总结，从而提高大家的开发效率；

本次案例为（背景颜色渐变），运用css3就能实现北京颜色渐变的效果；

HTML部分:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title> 渐变——天际线</title>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

   <div class="text">

      渐变——天际线

    </div>

</body>

</html>

实现背景颜色渐变不需要在HTML（结构）部分做任何操作 这里加了一行字，方便显示效果；

CSS部分：

body{

  margin: ;

  padding: ;

  font-family: "montserrat";

  background-image: linear-gradient(125deg,#E4FFCD,#6DD5FA,#2980B9,#E4FFCD);  background-size: %;

  animation: bganimation 15s infinite;

}

.text{

  color: white;

  text-align: center;

  text-transform: uppercase;

  margin: 400px ;

  font-size: 22px;

}

@keyframes bganimation {

  %{

    background-position: % %;

  }

  %{

    background-position: % %;

  }

  %{

    background-position: % %;

  }

}

要点：

一部分内容在之前的（水纹波动）以及提到过：https://www.cnblogs.com/LinWenQuan/p/11908979.html

  •  background-image: linear-gradient（）；

linear-gradient() 函数用于创建一个线性渐变的 "图像"。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

其中的“125deg” 是设置渐变的倾斜角度；

  • background-position： 

属性设置背景图像的起始位置。

  • 也可以试试这种桌布渐变：
background:white;

background-image: linear-gradient(90deg,

                  rgba(,,,.) %, transparent ),

                  linear-gradient( 

                  rgba(,,,.) %, transparent );

background-size: 30px 30px;

有趣的css3实战案例剖析—（背景动态渐变）的更多相关文章

  1. 有趣的css3实战案例剖析——（水纹波动）

    对于css3的学习,更多的是在于对新特性和基础理论的熟悉, 这篇文章通过一个案例带领大家了解css3里一些理论知识,也将一些技巧加以总结,从而提高大家的开发效率: 本次案例为(水纹波动),不用js写动 ...

  2. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  3. Linux操作系统之更改启动菜单的背景图实战案例

    Linux操作系统之更改启动菜单的背景图实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.制作图像并上传到服务器 1>.使用window 10操作系统自带的画图工具 ...

  4. 有趣的CSS3背景 斜条纹

    今天逛的时候发现了一个有趣的css3实现的背景效果,代码实现 .noaccess { position: absolute; width: 300px; height: 100px; z-index: ...

  5. Salesforce学习之路-developer篇（五）一文读懂Aura原理及实战案例分析

    1. 什么是Lightning Component框架? Lightning Component框架是一个UI框架,用于为移动和台式设备开发Web应用程序.这是一个单页面Web应用框架,用于为Ligh ...

  6. HTML+CSS小实战案例

    HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...

  7. CSS3魔法堂：背景渐变（Gradient）

    一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变   1. 线性渐变 示例——七彩虹 ...

  8. CSS3实战开发 表单发光特效实战开发

    首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"& ...

  9. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

随机推荐

  1. [考试反思]1001csp-s模拟测试(b)：逃离

    如你所见,b组题,除了NC乱入直奔T2抢了我一个首杀以外A层学过FFT的人都没有参加. 竞争压力很小,题又简单,所以就造就了6个AK. 然而并不计入总分,我仍然稳在第二机房. T1lyl16分钟切掉我 ...

  2. NOIP模拟 15

    因为OJ停机,正好写(tui)个总结(boke) 题解不想写了. 前两题题意没看懂,其实比较简单. 最后一题神仙,想放弃. (迪神貌似又在疯狂骂自己) (我这么辣鸡我...) (下面开始跑题) 这两天 ...

  3. 使用Typescript重构axios(十)——异常处理：增强版

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  4. lucas定理（模板题题解）

    题目很简单,很暴力,就是组合数,没有其他的. 但是直接暴力会炸wow 我们可以利用Lucas定理来分解字问题. Lucas定理:C(n,m)(mod p)=C(n%p,m%p)*C(n/p,m/p)( ...

  5. 一文教您如何通过 Java 压缩文件，打包一个 tar.gz Filebeat 采集器包

    欢迎关注笔者的公众号: 小哈学Java, 专注于推送 Java 领域优质干货文章!! 个人网站: https://www.exception.site/essay/create-tar-gz-by-j ...

  6. Java高性能反射工具包ReflectASM

    ReflectASM 使用字节码生成的方式实现了更为高效的反射机制.执行时会生成一个存取类来 set/get 字段,访问方法或创建实例.一看到 ASM 就能领悟到 ReflectASM 会用字节码生成 ...

  7. lrd 模拟 总结

    觉得是时候总结一下达哥的考试了!达哥的考试我就没有考好过,就之前达哥的考试都是人家ak我爆零,然后这次也不例外,我总是想在考场上尝试一些新的东西,其实就是作死行为,有的时候这种行为可以为我带来收益但是 ...

  8. docker初解

    1 什么是容器 容器就是在隔离的环境中运行的一个进程,如果进程停止,容器就会退出. 隔离的环境拥有自己的系统文件,ip地址,主机名等 容器是一种软件打包技术 程序:代码,命令进程:正在运行的程序容器的 ...

  9. 《计算机网络 自顶向下方法》 第2章 应用层 Part1

    常见的应用层协议有哪些?  HTTP(HyperText Transfer  Protocol):超文本传输协议 FTP(File Transfer Protocol):文件传输协议 SMTP(Sim ...

  10. 手把手教你用netty撸一个ZkClient

    原文地址: https://juejin.im/post/5dd296c0e51d4508182449a6 前言 有这个想法的缘由是前一阵子突发奇想, 想尝试能不能直接利用js连接到zookeeper ...