保藏本站 保藏本站
真钱棋牌网主页 - 软件测验 - 常用手册 - 站长东西 - 技能社区
主页 > CSS/HTML > 正文

主页 - PHP - 数据库 - 操作体系 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS指令 - jQuery - CSS款式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

《CSS3实战》笔记--突变规划(一)

根据CSS的突变与图片突变比较,最大的长处是便于修正,一起支撑无级缩放,过渡愈加天然。现在,完成CSS突变的只要根据Webkit和Gecko引擎的浏览器,根据Presto引擎的Opera浏览器暂时不支撑突变,根据Trident的IE尽管能够经过滤镜的办法完成,但并不发起。

Webkit引擎(Safari 4及以上版别)的CSS突变规划

根本语法:

-webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)

参数阐明:

<type>:界说突变类型,包括线性突变(linear)和径向突变(radial)。

<point>:界说突变起始点和完毕点坐标,即开端运用突变的x轴和y轴坐标,以及完毕突变的坐标。该参数支撑数值,百分比和关键字,如(0,0)或许(left,top)等。关键字包括top,bottom,left和right。

<radius>:当界说径向突变时,用来设置径向突变的长度,该参数为一个数值。

<stop>:界说突变色和步长。包括三个类型值,即开端的色彩,运用from (color value)函数界说;完毕的色彩,运用to(color value)函数界说:色彩步长,运用color-stop(value,color value)界说。color-stop()包括两个参数值,第一个参数值为一个数值或许百分比值,取值规模为0~1.0(或许0%~100%),第二个参数值表明恣意色彩值。

直线突变根本用法:

/*简略的线性突变背景色,从顶部到底部,从蓝色向赤色突变显现*/
background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red));

演示作用:
检查图片

/*从顶部到中心,再从中心到底部,从蓝色到绿色,再到赤色突变显现*/
background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(50%, green));

演示作用:
检查图片

/*规划二重突变,从顶部到底部,先是从蓝色到白色突变显现,再从黑色到赤色突变显现*/
background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.5, #fff), color-stop(0.5, #000));

演示作用:
检查图片

/*经过设置不同的步长值,然后规划多重突变作用,从顶部到底部,先是从蓝色到白色突变,再从百色到黑色突变,最终是从黑色到赤色突变显现*/
background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.4, #fff), color-stop(0.6, #000));

演示作用:
检查图片

小结:color-stop()函数包括两个参数值,第一个参数值指定角标方位,第二个参数指定色标色彩。一个突变能够包括多个色标,方位值为0~1之间的小数,或许0~100%之间的百分数,指定色标的方位份额。

径向突变的根本用法

/*同心圆(圆心坐标为200,100),内圆半径为10,外圆半径为100,内圆小于外圆半径,从内圆赤色到外圆绿色径向突变,超越外圆半径显现为绿色,内圆显现赤色*/
background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green));

作用显现:
检查图片

/*同心圆(圆心坐标为200,100),内圆半径为100,外圆半径为100,内圆小于外圆半径,从内圆赤色到外圆绿色径向突变。当内圆和外圆半径持平时,则突变无效*/
background: -webkit-gradient(radial, 200 100, 100, 200 100, 100, from(red), to(green));

演示作用:
检查图片

/*同心圆(圆心坐标为200,100),内圆半径为100,外圆半径为10,内圆大于外圆半径,从内圆赤色到外圆绿色径向突变,超出内圆半径显现为赤色,外圆显现绿色*/
background: -webkit-gradient(radial, 200 100, 100, 200 100, 10, from(red), to(green));

演示作用:
检查图片

/*非同心圆,内圆圆心和外圆圆心的间隔小于两圆半径的差,则显现上图作用,出现锥形径向突变作用。锥形的尖利性与两圆圆心间隔成正比*/
background: -webkit-gradient(radial, 120 100, 10, 200 100, 100, from(red), to(green));

演示作用:
检查图片

/*同心圆,在内圆到外圆中心90%的方位,即间隔外环内增加一个蓝色色标,规划多层径向突变,如下图所示。*/
background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));

演示作用:
检查图片

/*经过设置to()函数的色彩值为通明,能够规划发散的圆形作用*/
background: -webkit-gradient(radial, 200 100, 10, 200 100, 90, from(red), to(rgba(1,159,98,0)));

演示作用:
检查图片

/*经过设置to()函数的色彩值为通明,一起规划类似色,能够规划球形作用*/
background: -webkit-gradient(radial, 180 80, 10, 200 100, 90, from(#00C), to(rgba(1,159,98,0)), color-stop(98%, #0CF));

演示作用:
检查图片

/*经过为背景图界说多个径向突变,能够规划多个气泡作用,如下图所示*/
background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)), -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)), -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)), -webkit-gradient(radial, 300 110, 10, 300 100, 100, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)); -webkit-background-origin: padding-box; -webkit-background-clip: content-box;

演示作用:
检查图片

突变运用界说突变作用的边框

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的突变完成办法</title>
<style type="text/css">
div {
 border-width: 20px;
 width: 400px;
 height: 200px;
 margin: 20px;
 -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 20;
}
</style>
</head>

<body>
<div></div>
</body>
</html>

演示作用:
检查图片

界说填充内容作用

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的突变完成办法</title>
<style type="text/css">
.div1 {
 width:400px;
 height:200px;
 border:10px solid #A7D30C;
 background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
 float:left;
}
.div1::before {
 width:400px;
 height:200px;
 border:10px solid #019F62;
 content: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(#A7D30C), to(rgba(1, 159, 98, 0)), color-stop(90%, #019F62));
 display: block;
}
</style>
</head>

<body>
<div class="div1">透视框</div>
</body>
</html>

显现作用:
检查图片

界说列表图标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的突变完成办法</title>
<style type="text/css">
ul {
 list-style-image: -webkit-gradient(radial, center center, 4, center center, 8, from(#ff0000), to(rgba(0, 0, 0, 0)), color-stop(90%, #dd0000))
}
</style>
</head>

<body>
<ul>
 <li>新闻列表项1</li>
 <li>新闻列表项2</li>
 <li>新闻列表项3</li>
 <li>新闻列表项4</li> 
</ul>
</body>
</html>

演示作用:
检查图片

《CSS3实战》笔记--突变规划(二)
Gecko引擎的CSS突变规划直线突变根本语法-moz-linear-gradient([point||angle,]stop,stop[,stop]*)参数阐明:point:界说突变起始点,取值包括数值,百分比,也能够运用

《CSS3实战》笔记--突变规划(三)
IE浏览器引擎的CSS突变完成办法IE并不支撑CSS突变,可是供给了突变滤镜,能够用来完成简略的突变作用。根本语法该参数的参数阐明如下:enabled:设置

CSS3完成动态翻牌作用 仿百度贴吧3D翻牌一次动画特效
今日共享一个CSS3制造的翻牌作用,作用如下图所示,所过把把这个作用运用于相册肯定会很炫的。呵呵,超酷啊。一、HTML代码:由于是CSS3完成,所以

本周排行

更新排行

强悍的草根IT技能社区,这儿应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 ystekkfj.com. All Rights Rreserved  京ICP备05050695号