对于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. Scrapy爬虫day1——环境配置

    安装 Scrapy pip install scrapy 配置虚拟环境 mkvirtualenv Spider 创建项目 在Spider的虚拟环境中运行 scrapy startproject Boo ...

  2. ElasticSearch（一）：基本概念

    ElasticSearch(一):基本概念 学习课程链接<Elasticsearch核心技术与实战> 基本概念示意图 索引与文档更偏向于开发人员的视角,属于逻辑上的一种概念:节点与分片更偏 ...

  3. Spring Cloud gateway 六 Sentinel nacos存储动态刷新

    微服务当前这么火爆的程度,如果不能学会一种微服务框架技术.怎么能升职加薪,增加简历的筹码?spring cloud 和 Dubbo 需要单独学习.说没有时间?没有精力?要学俩个框架?而Spring C ...

  4. 2018年7月份JAVA开源软件TOP3

    微信开发 Java SDK Weixin Java Tools 评分: 9.6 介绍: 信开发 Java 开发工具包(SDK),支持包括微信支付.微信开放平台.小程序.企业号/企业微信.公众号(包括服 ...

  5. PWM呼吸灯

    1.PWM简介       PWM是 Pulse Width Modulation 的缩写,中文意思就是脉冲宽度调 制,简称脉宽调制.它是利用微处理器的数字输出来对模拟电路进行控 制的一种非常有效的技 ...

  6. python经典面试算法题1.4：如何对链表进行重新排序

    本题目摘自<Python程序员面试算法宝典>,我会每天做一道这本书上的题目,并分享出来,统一放在我博客内,收集在一个分类中. 1.4 对链表按照如下要求重新排序 [微软笔试题] 难度系数: ...

  7. php ffmpeg视频和序列帧转化

    php ffmpeg视频和序列帧转化 <pre>$cmd=shell_exec("ffmpeg -i ".__DIR__ . "/shipin1.mp4 -r ...

  8. ADO.NET学习心得《一》

    大家好,我是代号六零一,很高兴又开始重启博客了,为了更好的加深自己的记忆和复习,今天开始坚持写写心得体会,刚开始学习ADO.NET的时候也是一脸懵逼的,代码只有动手敲打才会知道其实并不难,只要多敲几遍 ...

  9. Python 基础 三 反射

    Python 基础 三 反射 今天我们先介绍一下反射这个概念,啥是反射?反射就是自己检测自己.在我们Python的面向对象中的反射是啥意思呢?就是通过字符串的形式操作对象相关的属性.python中的一 ...

  10. 关于设备与canvas画不出来的解决办法

    连续四天解决一个在三星手机上面画canvas的倒计时饼图不出来的问题,困惑了很久,用了很多办法,甚至重写了那个方法,还是没有解决,大神给的思路是给父级加 "overflow: visible ...