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

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

HTML部分:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title> 渐变——天际线</title>
  6.   <link rel="stylesheet" type="text/css" href="style.css">
  7. </head>
  8. <body>
  9.    <div class="text">
  10.       渐变——天际线
  11.     </div>
  12. </body>
  13. </html>

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

CSS部分：

  1. body{
  2.   margin: ;
  3.   padding: ;
  4.   font-family: "montserrat";
  5.   background-image: linear-gradient(125deg,#E4FFCD,#6DD5FA,#2980B9,#E4FFCD);  background-size: %;
  6.   animation: bganimation 15s infinite;
  7. }
  8.  
  9. .text{
  10.   color: white;
  11.   text-align: center;
  12.   text-transform: uppercase;
  13.   margin: 400px ;
  14.   font-size: 22px;
  15. }
  16.  
  17. @keyframes bganimation {
  18.   %{
  19.     background-position: % %;
  20.   }
  21.   %{
  22.     background-position: % %;
  23.   }
  24.   %{
  25.     background-position: % %;
  26.   }
  27. }

要点：

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

  •  background-image: linear-gradient（）；

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

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

  • background-position： 

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

  • 也可以试试这种桌布渐变：
  1. background:white;
  2.  
  3. background-image: linear-gradient(90deg,
  4.  
  5.                   rgba(,,,.) %, transparent ),
  6.  
  7.                   linear-gradient( 
  8.  
  9.                   rgba(,,,.) %, transparent );
  10.  
  11. 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. Visual Studio Online 的 FAQ：iPad 支持、自托管环境、Web 版 VS Code、Azure 账号等

    北京时间 2019 年 11 月 4 日,在 Microsoft Ignite 2019 大会上,微软正式发布了 Visual Studio Online 公开预览版!发布之后,开发者们都为之振奋.同 ...

  2. NOIP模拟 21

    可爱的Dybala走了..(当然只是暂时) 又考了大众分.从rank5到rank17一个分. T1 折纸 秒切,爽啊 天皇偷看我代码,结束看见我A了还很惊讶,说我代码有锅 好沙雕哦 就跟个2b似的. ...

  3. 拼多多后台开发面试真题：如何用Redis统计独立用户访问量

    众所周至,拼多多的待遇也是高的可怕,在挖人方面也是不遗余力,对于一些工作3年的开发,稍微优秀一点的,都给到30K的Offer,当然,拼多多加班也是出名的,一周上6天班是常态,每天工作时间基本都是超过1 ...

  4. 使用Typescript重构axios(八)——实现基础功能：处理响应data

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

  5. jquery手机端横屏判断方法

    jquery手机端横屏判断方法<pre>$(function() { var bodywidth = $('body').width(); var bodyheight = $('body ...

  6. C#动态多态性的理解

    C#动态多态性是通过抽象类和虚方法实现的. 抽象类的理解 用关键字abstract创建抽象类,用于提供接口的部分类的实现(理解:接口不能提供实现,抽象类中可以有实现,接口与抽象类一起使用,可以达到父类 ...

  7. 源码学习系列之SpringBoot自动配置（篇二）

    源码学习系列之SpringBoot自动配置(篇二)之HttpEncodingAutoConfiguration 源码分析 继上一篇博客源码学习系列之SpringBoot自动配置(篇一)之后,本博客继续 ...

  8. Apache httpd 2.4.27开启GZIP压缩功能

    转载自素文宅博客:https://blog.yoodb.com/yoodb/article/detail/1373 HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的文件压缩算法,现在的应 ...

  9. 【ABP】 动态菜单修改过程asp.netcore+vue

    无论用什么框架,第一件事情就是实现动态菜单,从数据库中读取菜单配置项输出前台,网上翻了一大堆翻译文档,也看了官方英文文档,关键点在于如何实现NavigationProvider和在前端调用abp.na ...

  10. Live CD

    Live CD,又译为自生系统,是事先存储于某种可移动存储设备上,可不特定于计算机硬件(non-hardware-specific)而启动的操作系统(通常亦包括一些其他软件),不需安装至计算机的本地外 ...