对于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. [考试反思]1014csp-s模拟测试73：侵蚀

    嗯...还是没有改变那个现状 依旧只是打满了暴力,虽说T2打的的确比暴力好很多,但是因为出题人没有设分所以和暴力等同. 离上面的分差还是大的很,下面还是追的很紧 而且进几场的排名也是连续下滑... 虽 ...

  2. NOIP模拟测试19考试反思

    这次考试是存在很大问题的,(如果不是T1T2出乎意料地A了,鬼知道会发生什么) T2A是情理之中,考试的时候测的极限数据跑的很快(无论m什么范围),但是T1真的...... T3没有分配太多的时间+没 ...

  3. <深圳千锋学习>day01

    2019.11.11     深圳千锋H5前端学习笔记

  4. git 合并代码

    分支 dev 及衍生分支 dev-ctj 一.rebase 1.git checkout dev-ctj 2.git rebase -i head~num[num 是本分支的提交数,多个提交数先合并为 ...

  5. jquery鼠标点击穿透的解决方法

    jquery鼠标点击穿透的解决方法 <pre><div class="showcontainer" style="background:#000;dis ...

  6. ACGallery I: Sequence diagram for reading photos:

    AC Photo Gallery is an open-source web app, which designed to organize photos/albums. Codes on Githu ...

  7. 深度剖析Javascript执行环境、作用域链

    一.执行环境 执行环境(也叫做执行上下文,Execution Context)是Javascript中最为重要的一个概念.执行环境定义了变量或函数有权访问其他数据,决定了它们各自的行为.每个执行环境都 ...

  8. 队列+BFS（附vector初试）

    优先队列的使用: include<queue>//关联头文件 struct node{ int x,y; friend bool operator < (node d1,node d ...

  9. 024.掌握Pod-部署MongoDB

    一 前期准备 1.1 前置条件 集群部署:Kubernetes集群部署参考003--019. glusterfs-Kubernetes部署:参考<附010.Kubernetes永久存储之Glus ...

  10. 20191010-4 alpha week 1/2 Scrum立会报告+燃尽图 02

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/8747 一.小组情况 组长:迟俊文 组员:宋晓丽 梁梦瑶 韩昊 刘信鹏 队名 ...