对于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. [BZOJ] DZY Loves Math 系列 I && II

    为了让自己看起来有点事干 ,做个套题吧..不然老是东翻翻西翻翻也不知道在干嘛... \(\bf 3309: DZY \ Loves \ Math\) 令 \(h=f*\mu\) 很明显题目要求的就是\ ...

  2. vue+element UI递归方式实现多级导航菜单

    介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...

  3. Python实现自动化监控远程服务器

    最近发现Python课器做很多事情,在监控服务器有其独特的优势,耗费资源少,开发周期短. 首先我们做一个定时或者实时脚本timedtask.py,让其定时监控目标服务器,两种方式: 第一种: #!/u ...

  4. 模拟示例raid 5(5块磁盘 3块做raid 2块做备份 ) raid 10(5块磁盘) 修改版

    RAID5:需要至少三块(含)硬盘,兼顾存储性能.数据安全和储存成本. RAID10:需要至少四块(含)硬盘,兼具速度和安全性,但成本很高. raid 10(5块磁盘) 1.添加硬盘设备(添加5块) ...

  5. linux 系统移植uboot

    这里使用的版本为:u-boot-2014.04 查看并修改位置如下:u-boot-2014.04/include/configs/at91sam9x5ek.h(1)查看一下Linux内核在NandFl ...

  6. day7-字符串格式化

    msg='i am %s my hobby is %s' % ('lhf','alex') # # %代表标识,固定格式 s代表传入的为字符串,该字符串可接受任何类型 # # %d ,只能接收数字 p ...

  7. CAS3.5.2 Server登录后返回用户信息详细解决方案

    单点登录(Single Sign-On, 简称SSO)是目前比较流行的服务于企业业务整合的解决方案之一,SSO使得在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.大家在使用时CA ...

  8. [ISE使用] 使用ISE的过程中，遇到过的一些“软件上的问题”

    1.planahead打不开了. PlanAhead替代文件rdiArgs.bat的下载链接如下: http://www.eevblog.com/forum/microcontrollers/guid ...

  9. java高级——反射

    慕课网<反射——Java高级开发必须懂的>听课笔记 一.class类的使用 class ClassDemo { public static void main(String[] args) ...

  10. 判断DataGridView是否选中某行

    if (this.Drawing_GridView.SelectedColumns.Count == 0)//判断是否选中某行 { }