有趣的css3实战案例剖析—（背景动态渐变）
对于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实战案例剖析—（背景动态渐变）的更多相关文章
- 有趣的css3实战案例剖析——（水纹波动）
对于css3的学习,更多的是在于对新特性和基础理论的熟悉, 这篇文章通过一个案例带领大家了解css3里一些理论知识,也将一些技巧加以总结,从而提高大家的开发效率: 本次案例为(水纹波动),不用js写动 ...
- CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)
CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...
- Linux操作系统之更改启动菜单的背景图实战案例
Linux操作系统之更改启动菜单的背景图实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.制作图像并上传到服务器 1>.使用window 10操作系统自带的画图工具 ...
- 有趣的CSS3背景 斜条纹
今天逛的时候发现了一个有趣的css3实现的背景效果,代码实现 .noaccess { position: absolute; width: 300px; height: 100px; z-index: ...
- Salesforce学习之路-developer篇（五）一文读懂Aura原理及实战案例分析
1. 什么是Lightning Component框架? Lightning Component框架是一个UI框架,用于为移动和台式设备开发Web应用程序.这是一个单页面Web应用框架,用于为Ligh ...
- HTML+CSS小实战案例
HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...
- CSS3魔法堂：背景渐变（Gradient）
一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变 1. 线性渐变 示例——七彩虹 ...
- CSS3实战开发 表单发光特效实战开发
首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"& ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
随机推荐
- NOIP模拟 5
考试的时候相当浮躁,而且脑子并不工作 T1看了几眼,觉得没思路,先skip T2一打眼,满足条件的最大值,二分!(然后就死了,根本没想有没有单调性) T3找了半天规律,一开始自己手模的K3都过不了样例 ...
- 命运Ⅰ&命运Ⅱ
upd:为啥下面的相关博文都是各种退役记(这TM怎么就相关了) 竟然被卡线了,16名,我这几次考试也是炸到了一定境界了... 前三次模拟总榜rk1,第一次分机房rk4,第二次分机房rk11,第三次分机 ...
- day 1 晚上 P2824 [HEOI2016/TJOI2016]排序 线段树
#include<iostream> #include<cstdio> #include<cstdlib> #include<cmath> #inclu ...
- Vue 2.x 3.x 配置项目开发环境跟线上环境
先找到package.json (这是nuxt版的vue 可能会跟一般vue不一样 当然总体上差不多的) "scripts": { "dev": " ...
- js获取文件里面的所有文件名
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Asciinema：你的所有操作都将被录制
如何实现类似于Jumpserver koko一样的终端录制回放功能呢?本文介绍一个神器 asciinema 是一款开源免费的终端录制工具,它可以将命令行输入输出的任何内容加上时间保存在文件中,同时还提 ...
- [LC]234题 Linked List Cycle （回文链表）（链表）
①中文题目 请判断一个链表是否为回文链表. 示例 1: 输入: 1->2输出: false示例 2: 输入: 1->2->2->1输出: true进阶:你能否用 O(n) 时间 ...
- nyoj 214-单调递增子序列(二) (演算法，PS：普通的动态规划要超时)
214-单调递增子序列(二) 内存限制:64MB 时间限制:1000ms Special Judge: No accepted:11 submit:35 题目描述: 给定一整型数列{a1,a2..., ...
- hdu 2255 奔小康赚大钱 (KM)
奔小康赚大钱Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- 插入订单并且输出订单号的sql存储过程
--插入订单-- create proc InsertOrders ( @OrderNumber varchar(300), @OrderState varchar(30), @OrderType v ...