对于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. 基于华为物联网IOT的应用开发 ---界面管理开发

    在前面随笔<基于华为物联网IOT的应用开发 --- 基于.net 的SDK封装>介绍过IOT中应用侧SDK的封装,主要就是基于华为IOT的应用侧封装,以便在应用系统中进行调用.应用侧SDK ...

  2. 【Spdy协议简介】

    一.SPDY协议诞生记 SPDY (SPDY 是 Speedy 的昵音,意思是更快)是 Google 开发的基于传输控制协议 (TCP) 的应用层协议 ,那么为什么要搞一个SPDY出来呢?距离万维网之 ...

  3. Java设计模式之模板方法模式(Template)

    前言: 我们在开发中有很多固定的流程,这些流程有很多步凑是固定的,比如JDBC中获取连接,关闭连接这些流程是固定不变的,变动的只有设置参数,解析结果集这些是根据不同的实体对象“来做调整”,针对这种拥有 ...

  4. 【实战】如何通过html+css+mysql+php来快速的制作动态网页（以制作一个博客网站为列）

    一.开发环境的搭建 (1)apache+php+mysql环境搭建 因为要用apache来做服务器,mysql作为数据库来存储数据,php来写代码以此实现网页与数据库的交互数据,所以需要下载上述软件, ...

  5. windows下安装Apache、php、mysql集成环境

    一.准备工作 本次安装的版本分别为:apache2.4  .php5.6 . mysql5.7 下载地址为:http://pan.baidu.com/s/1boQNIOn 密码:zarx 二.安装步骤 ...

  6. 分析facebook的AsyncDisplayKit框架，async-display使用async-transaction

    上一篇<分析facebook的AsyncDisplayKit框架中的Transaction的工作原理>介绍了fb的asdk的异步事务ASAsyncTransaction,本篇介绍其在asd ...

  7. ceph中rbd的增量备份和恢复

    ceph中rbd的增量备份和恢复 ceph的文档地址:Ceph Documentation ​ 在调研OpenStack中虚机的备份和恢复时,发现OpenStack和ceph紧密结合,使用ceph做O ...

  8. 20191031-6 beta week 1/2 Scrum立会报告+燃尽图 04

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9914 一.小组情况 队名:扛把子 组长:孙晓宇 组员:宋晓丽 梁梦瑶 韩昊 ...

  9. 《HelloGitHub》第 44 期

    兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编 ...

  10. Java流程控制之（一）条件

    目录 条件语句 单if情况 单if/else情况 if/else多分支情况 switch条件语句 条件语句+循环语句,直接甩图甩代码! 条件语句 Java希望在某个条件为真时执行相应的语句. 单if情 ...