1. Webkit引擎的CSS3径向渐变语法
        Webkit引擎下的老版本语法：-webkit-gradient([<type>],[<position> || <angle>,]?[<shape> ||<size>,]?<color-stop>,<color-stop>[,<color-stop>]*); //Safari Chrome这两款浏览器支持的版本，浏览器Chrome4-9 和Safari4-5版本支持
        Webkit引擎新式语法：-webkit-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);//Safari Chrome这两款浏览器支持的版本，Chrome10.0+和Safari5.1+支持

2. Gecko引擎的CSS3的径向渐变语法
        -moz-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*); //Firefox浏览器支持的版本
        Gecko引擎的Firefox浏览器中Firefox3.6+版本支持径向渐变。

3. Presto引擎的CSS3径向渐变语法
        -o-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);        //Opera浏览器支持的版本
        Presto引擎中的Opear11.6开始支持径向渐变。

4. Trident引擎的CSS3径向渐变语法
        -ms-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*); //IE10以上的版本

5. W3C标准径向渐变语法
        radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+); //标准径向渐变

.linear{

width:100%;

height:600px;

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red);  /*IE 6 7 8*/

background: -ms-linear-gradient(top, #fff,  #0000ff);        /* IE 10 */

background: -moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/

background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff));      /* Safari 4-5, Chrome 1-9*/

background: -webkit-linear-gradient(top, #fff, #0000ff);   /*Safari5.1 Chrome 10+*/

background: -o-linear-gradient(top, #fff, #0000ff);  /*Opera 11.10+*/

}

流星效果

safari和ie9以下无效

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meteor</title>
<style>
*{
padding:0;
margin:0;
}
body{
background-color:#000;
overflow:hidden;
}
.author{
color:#fff;
font:18px/1.5 "微软雅黑";
animation:change 4s infinite;
}
.star{
width:4px;
height:4px;
background-color:#fff;
display:block;
position:absolute;
top:110px;
right:800px;
border-radius:4px;
animation:star 1s infinite linear;
opacity:0;
}
.star:after{
position:relative;
display:block;
top:-49px;
left:23px;
border:2px solid #fff;
border-width:0 0 0 1px;
width:100px;
height:100px;
content:"";
transform:rotate(45deg);
}
.blue{
background-color:lightskyblue;
top:60px;
right:600px;
animation-delay:0.25s;
}
.blue:after{
width:200px;
height:200px;
top:-99px;
left:43px;
border:2px solid lightskyblue;
border-width:0 0 0 1px;
}
.pink{
background-color:lightpink;
top:160px;
right:500px;
animation:starPink 1s infinite linear;
animation-delay:0.5s;
}
.pink:after{
width:133px;
height:133px;
top:-65px;
left:29px;
border:2px solid lightpink;
border-width:0 0 0 1px;
}
.yellow{
background-color:yellow;
top:127px;
right:261px;
animation:starYellow 1s infinite linear;
animation-delay:0.75s;
}
.yellow:after{
width:209px;
height:164px;
top:-65px;
left:29px;
border:2px solid yellow;
border-width:0 0 0 1px;
}
@keyframes change{
0%{
color:#fff;
}
25%{
color:lightskyblue;
}
50%{
color:lightpink;
}
75%{
color:yellow;
}
}
@keyframes star{
0%{
opacity:0;
transform:scale(0) translate(0,0);
}
50%{
opacity:1;
transform:scale(1) translate(-200px,200px);
}
100%{
opacity:0;
transform:scale(1) translate(-400px,400px);
}
}
@keyframes starPink{
0%{
opacity:0;
transform:scale(0) translate(0,0);
}
50%{
opacity:1;
transform:scale(1) translate(-300px,300px);
}
100%{
opacity:0;
transform:scale(1) translate(-600px,600px);
}
}
@keyframes starYellow{
0%{
opacity:0;
transform:scale(0) translate(0,0);
}
50%{
opacity:1;
transform:scale(1) translate(-300px,300px);
}
100%{
opacity:0;
transform:scale(1) translate(-600px,600px);
}
}
</style>
</head>
<body>
<span class="author">by Scott</span>
<span class="star"></span>
<span class="star blue"></span>
<span class="star pink"></span>
<span class="star yellow"></span>
</body>
</html>

关于css3背景图片渐变的规则的更多相关文章

  1. css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  2. 从零开始学习前端开发 — 17、CSS3背景与渐变

    一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...

  3. CSS3背景，渐变

    1,有利于代码维护,有利于使用debug进行调试打断点.2,后面三个都存在计算,所以分开写最好.背景复合属性最好的写法,background:#abcdef url() no-repeat 50px ...

  4. CSS3背景与渐变

    一.CSS3 背景图像区域 background-clip(指定背景绘制区域) ackground-clip: border-box / padding-box / content-box; /*没有 ...

  5. css3背景颜色渐变属性

    https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...

  6. 让低版本IE支持css3背景图片缩放属性background-size

    IE7,8中不支持背景图片的缩放.下面的代码可以帮你实现兼容 background: url(/content/img/yuehuibtn.png);//css3代码 background-size: ...

  7. CSS3背景图片（多重背景、起始位置、裁剪、尺寸）

    一.多重背景图片 ①CSS3允许我们在一个元素上添加多个图片 ②多重背景可以把多个图片资源添加到background属性上,用逗号隔开,然后用background-position把他们定位到你想要的 ...

  8. css3背景颜色渐变

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  9. css3基础-选择器+边框与圆角+背景与渐变

    Css3选择器相关: section > div直接子元素选择器 div + article相邻兄弟选择器(在元素之后出现) div ~ article通用兄弟选择器(在元素之后出现) 属性选择 ...

随机推荐

  1. input type=”file“ change事件只执行一次的问题

    js解决办法 HTML:<input id="file",type="file" onchange="upload()" /> ...

  2. C++继承与组合

    转自https://blog.csdn.net/caoyan_12727/article/details/52337297 类的组合和继承一样,是软件重用的重要方式.组合和继承都是有效地利用已有类的资 ...

  3. 沃通SSL证书、代码签名证书应用于机器人安全防护

    近两年,扫地机器人.智能音箱等消费级机器人产品逐渐走入大众生活的中.随着人工智能技术的迅猛发展,预计2023年全球消费级机器人市场规模将达到150亿美元.然而,产业的迅猛发展却伴随着安全防护的缺失,安 ...

  4. Disconf使用简单Demo

    创建配置文件 在敲Demo之前,需要在Disconf上创建自己的APP,然后在APP的某个环境下创建配置文件,如下面截图中的流程,这里就简单创建了一个redis.properties,内容是redis ...

  5. 【vue】v-if和v-show的区别

    今天来捋一下vue中的v-if与v-show的区别 先来看一下vue官方文档对他们的解释 2.从实现方式来看: v-if是当依赖的值变为false时,直接让元素消失,html代码也会消失,相当于直接在 ...

  6. 《代码敲不队》第八次团队作业：Alpha冲刺 第五天

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 代码敲不队 作业学习目标 掌握软件编码实现的工程要求. 团队项目github仓库地址链接 GitH ...

  7. JavaScript(DOM编程二)

    文档加载完毕之后,在Window.onload方法中创建元素节点,添加到DOM文档中 代码演示: <html> <head lang="en"> <m ...

  8. 数据库-mongodb有哪些命令工具

    MongoDB                  系统文件说明 1.mongo.exe              命令行客户端工具 2.mongod.exe            数据库服务程序 3. ...

  9. 第二篇：SpringBoot配置详解

    SpringBoot 是为了简化 Spring 应用的创建.运行.调试.部署等一系列问题而诞生的产物,自动装配的特性让我们可以更好的关注业务本身而不是外部的XML配置,我们只需遵循规范,引入相关的依赖 ...

  10. springMVC3.0（文件上传，@RequestMapping加參数,@SessionAttributes,@ModelAttribute，转发，重定向，数值获取，传參，ajax,拦截器)

    1.项目包结构例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhbg==/font/5a6L5L2T/fontsiz ...