PHP全站开发工程师-第09章 CSS3特效&动画

CSS3 过渡transition

1. 过渡属性

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

实例：demo01

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>变换</title>
		<style>
			div {
				width: 100px;
				background: blue;
				
				
			}
			div:hover {
				width: 200px;
				background-color: red;
				-moz-transition: width 2s ease-in-out 0s,background-color 2s ease-in-out 1s;
				-webkit-transition: width 2s ease-in-out 0s,background-color 2s ease-in-out 1s;
				transition: width 2s ease-in-out 0s,background-color 2s ease-in-out 1s;
			}
			img {
				width: 100%;
			}
		</style>
	</head>

	<body>
		<p><b>注意：</b>无法在 IE9 及更早 IE 版本上工作。</p>
		<div><img src="image/avatar.jpg" /></div>
	</body>

</html>

PHP全站开发工程师-第09章 CSS3特效&动画

CSS3 转换transform

1. 转换属性

Property	描述	CSS
transform	适用于2D或3D转换的元素	3
transform-origin	允许您更改转化元素位置	3

2. 2D 转换

2D 转换方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。（选修）
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

translate(?px) 位置变换

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

rotate(?deg) 旋转

PHP全站开发工程师-第09章 CSS3特效&动画

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

scale(x,y) 尺寸改变

PHP全站开发工程师-第09章 CSS3特效&动画

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

skew(?deg,?deg) 倾斜

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

3. 3D转换

3D 转换方法

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

CSS3 transform-origin 属性

transform-origin: x-axis y-axis z-axis;

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值： left center right length %
y-axis	定义视图被置于 Y 轴的何处。可能的值： top center bottom length %
z-axis	定义视图被置于 Z 轴的何处。可能的值： length

实例：demo02

HTML:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>

	<body>
		<h1>Css3 Transform</h1>
		<!-- Rotate-->
		<div class="card">
			<div class="box rotate">
				<div class="fill"></div>
			</div>
			<p>rotate(45deg) </p>
		</div>
		<div class="card">
			<div class="box rotateX">
				<div class="fill"></div>
			</div>
			<p>rotateX(45deg)</p>
		</div>
		<div class="card">
			<div class="box rotateY">
				<div class="fill"></div>
			</div>
			<p>rotateY(45deg)</p>
		</div>
		<div class="card">
			<div class="box rotateZ">
				<div class="fill"></div>
			</div>
			<p>rotateZ(45deg) </p>
		</div>
		<!-- scale-->
		<div class="card">
			<div class="box scale">
				<div class="fill"></div>
			</div>
			<p>scale(2)</p>
		</div>
		<div class="card">
			<div class="box scaleX">
				<div class="fill"></div>
			</div>
			<p>scaleX(2) </p>
		</div>
		<div class="card">
			<div class="box scaleY">
				<div class="fill"></div>
			</div>
			<p>scaleY(2) </p>
		</div>
		<!-- skew-->
		<div class="card">
			<div class="box skew">
				<div class="fill"></div>
			</div>
			<p>skew(45deg, 45deg) </p>
		</div>
		<div class="card">
			<div class="box skewX">
				<div class="fill"></div>
			</div>
			<p>skewX(45deg)</p>
		</div>
		<div class="card">
			<div class="box skewY">
				<div class="fill"></div>
			</div>
			<p>skewY(45deg)</p>
		</div>
		<!-- translate-->
		<div class="card">
			<div class="box translate">
				<div class="fill"></div>
			</div>
			<p>translate(45px) </p>
		</div>
		<div class="card">
			<div class="box translateX">
				<div class="fill"></div>
			</div>
			<p>translateX(45px)</p>
		</div>
		<div class="card">
			<div class="box translateY">
				<div class="fill"></div>
			</div>
			<p>translateY(45px)</p>
		</div>
		<div class="card">
			<div class="box matrix">
				<div class="fill"></div>
			</div>
			<p> matrix(2, 2, 0, 2, 45, 0)</p>
		</div>
		<h4>Perspective : 100</h4>
		<div class="perspective-100">
			<div class="card">
				<div class="box rotateX">
					<div class="fill"></div>
				</div>
				<p>rotateX(90deg)</p>
			</div>
			<div class="card">
				<div class="box rotateY">
					<div class="fill"></div>
				</div>
				<p>rotateY(45deg)</p>
			</div>
		</div>
		<h4>Perspective : 200</h4>
		<div class="perspective-200">
			<div class="card">
				<div class="box rotateX">
					<div class="fill"></div>
				</div>
				<p>rotateX(90deg)</p>
			</div>
			<div class="card">
				<div class="box rotateY">
					<div class="fill"></div>
				</div>
				<p>rotateY(45deg)</p>
			</div>
		</div>
		<!-- transform origin-->
		<h2>Transform origin</h2>
		<div class="card">
			<div class="box rotate">
				<div class="fill to-100-0-0"></div>
			</div>
			<p>transform-origin : 100% 0 0 <br/>rotate(45deg)</p>
		</div>
		<div class="card">
			<div class="box rotate">
				<div class="fill to-0-100-0"></div>
			</div>
			<p>transform-origin : 0 100% 0<br/>rotate(45deg)</p>
		</div>
		<div class="card perspective-200">
			<div class="box rotateX">
				<div class="fill to-0-100-0"></div>
			</div>
			<p>transform-origin : 0 100% 0<br/>rotateX(45deg)</p>
		</div>
		<div class="card perspective-200">
			<div class="box rotateX">
				<div class="fill to-100-0-0"></div>
			</div>
			<p>transform-origin : 0 100% 0<br/>rotateX(45deg)</p>
		</div>
		<div class="card perspective-200">
			<div class="box rotateY">
				<div class="fill to-0-100-0"></div>
			</div>
			<p>transform-origin : 0 100% 0 <br/>rotateY(45deg)</p>
		</div>
		<div class="card perspective-200">
			<div class="box rotateY">
				<div class="fill to-100-0-0"></div>
			</div>
			<p>transform-origin : 100% 0 0<br/>rotateY(45deg)</p>
		</div>
		<div class="card">
			<div class="box scale">
				<div class="fill to-100-0-0"></div>
			</div>
			<p>transform-origin : 100% 0 0<br/>scale(2)</p>
		</div>
		<div class="card">
			<div class="box scale">
				<div class="fill to-0-100-0"></div>
			</div>
			<p>transform-origin : 0 100% 0<br/>scale(2)</p>
		</div>
		<div class="card">
			<div class="box scaleX">
				<div class="fill to-100-0-0"></div>
			</div>
			<p>transform-origin : 100% 0 0<br/>scaleX(2)</p>
		</div>
		<div class="card">
			<div class="box scaleX">
				<div class="fill to-0-100-0"></div>
			</div>
			<p>transform-origin : 0 100% 0<br/>scaleX(2)</p>
		</div>
		<div class="card">
			<div class="box scaleY">
				<div class="fill to-100-0-0"></div>
			</div>
			<p>transform-origin : 100% 0 0<br/>scaleY(2)</p>
		</div>
		<div class="card">
			<div class="box scaleY">
				<div class="fill to-0-100-0"></div>
			</div>
			<p>transform-origin : 0 100% 0<br/>scaleY(2)</p>
		</div>
	</body>

</html>

CSS:

*,
*:after,
*:before {
	box-sizing: border-box;
}

body {
	background: #F5F3F4;
	margin: 0;
	padding: 10px;
	font-family: 'Open Sans', sans-serif;
	text-align: center;
}

h1 {
	color: #4c4c4c;
	font-weight: 600;
	border-bottom: 1px solid #ccc;
}

h2,
h4 {
	font-weight: 400;
	color: #4d4d4d;
}

.card {
	display: inline-block;
	margin: 10px;
	background: #fff;
	padding: 15px;
	min-width: 200px;
	box-shadow: 0 3px 5px #ddd;
	color: #555;
}

.card .box {
	width: 100px;
	height: 100px;
	margin: auto;
	background: #ddd;
	cursor: pointer;
	box-shadow: 0 0 5px #ccc inset;
}

.card .box .fill {
	width: 100px;
	height: 100px;
	position: relative;
	background: #03A9F4;
	opacity: .5;
	box-shadow: 0 0 5px #ccc;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}

.card p {
	margin: 25px 0 0;
}

.rotate:hover .fill {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.rotateX:hover .fill {
	-webkit-transform: rotateX(45deg);
	transform: rotateX(45deg);
}

.rotateY:hover .fill {
	-webkit-transform: rotateY(45deg);
	transform: rotateY(45deg);
}

.rotateZ:hover .fill {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.scale:hover .fill {
	-webkit-transform: scale(2, 2);
	transform: scale(2, 2);
}

.scaleX:hover .fill {
	-webkit-transform: scaleX(2);
	transform: scaleX(2);
}

.scaleY:hover .fill {
	-webkit-transform: scaleY(2);
	transform: scaleY(2);
}

.skew:hover .fill {
	-webkit-transform: skew(45deg, 45deg);
	transform: skew(45deg, 45deg);
}

.skewX:hover .fill {
	-webkit-transform: skewX(45deg);
	transform: skewX(45deg);
}

.skewY:hover .fill {
	-webkit-transform: skewY(45deg);
	transform: skewY(45deg);
}

.translate:hover .fill {
	-webkit-transform: translate(45px, 1em);
	transform: translate(45px, 1em);
}

.translateX:hover .fill {
	-webkit-transform: translateX(45px);
	transform: translateX(45px);
}

.translateY:hover .fill {
	-webkit-transform: translateY(45px);
	transform: translateY(45px);
}

.matrix:hover .fill {
	-webkit-transform: matrix(2, 2, 0, 2, 45, 0);
	transform: matrix(2, 2, 0, 2, 45, 0);
}

.perspective-100 .box {
	-webkit-perspective: 100px;
	perspective: 100px;
}

.perspective-200 .box {
	-webkit-perspective: 200px;
	perspective: 200px;
}

.to-100-0-0 {
	-webkit-transform-origin: 100% 0 0;
	transform-origin: 100% 0 0;
}

.to-0-100-0 {
	-webkit-transform-origin: 0 100% 0;
	transform-origin: 0 100% 0;
}

PHP全站开发工程师-第09章 CSS3特效&动画

4. CSS3 动画

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-,-ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。


@keyframes	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-
animation	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长

CSS3的动画属性

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3

实例：demo03

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				animation: myfirst 5s;
				-webkit-animation: myfirst 5s;
			}
			
			@keyframes myfirst {
				0% {
					background: red;
					left: 0px;
					top: 0px;
				}
				25% {
					background: yellow;
					left: 200px;
					top: 0px;
				}
				50% {
					background: blue;
					left: 200px;
					top: 200px;
				}
				75% {
					background: green;
					left: 0px;
					top: 200px;
				}
				100% {
					background: red;
					left: 0px;
					top: 0px;
				}
			}
			
			@-webkit-keyframes myfirst
			/* Safari and Chrome */
			
			{
				0% {
					background: red;
					left: 0px;
					top: 0px;
				}
				25% {
					background: yellow;
					left: 200px;
					top: 0px;
				}
				50% {
					background: blue;
					left: 200px;
					top: 200px;
				}
				75% {
					background: green;
					left: 0px;
					top: 200px;
				}
				100% {
					background: red;
					left: 0px;
					top: 0px;
				}
			}
		</style>
	</head>

	<body>

		<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

		<div></div>

	</body>

</html>

实例：demo04

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>菜鸟教程(runoob.com)</title>
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				animation-name: myfirst;
				animation-duration: 5s;
				animation-timing-function: linear;
				animation-delay: 2s;
				animation-iteration-count: infinite;
				animation-direction: alternate;
				animation-play-state: running;
				-webkit-animation-name: myfirst;
				-webkit-animation-duration: 5s;
				-webkit-animation-timing-function: linear;
				-webkit-animation-delay: 2s;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-direction: alternate;
				-webkit-animation-play-state: running;
			}
			
			@keyframes myfirst {
				0% {background: red;left: 0px;top: 0px;}
				25% {background: yellow;left: 200px;top: 0px;}
				50% {background: blue;left: 200px;top: 200px;}
				75% {background: green;left: 0px;top: 200px;}
				100% {background: red;left: 0px;top: 0px;}
			}
			
			@-webkit-keyframes myfirst{
				0% {background: red;left: 0px;top: 0px;}
				25% {background: yellow;left: 200px;top: 0px;}
				50% {background: blue;left: 200px;top: 200px;}
				75% {background: green;left: 0px;top: 200px;}
				100% {background: red;left: 0px;top: 0px;}
			}
		</style>
	</head>

	<body>

		<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

		<div></div>

	</body>

</html>

CSS3 多媒体查询

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想：取代了查找设备的类型，CSS3 根据设置自适应显示。

媒体查询可用于检测很多事情，例如：

viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏，竖屏) 。
分辨率

目前很多针对苹果手机，Android手机，平板等设备都会使用到多媒体查询。

1. 多媒体查询语法

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@medianot|onlymediatypeand (expressions) {CSS代码...; }

如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。

除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持MediaQueries的设备但能够读取MediaType类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
all: 所有设备，这个应该经常看到。

你也可以在不同的媒体上使用不同的样式文件：

<linkrel="stylesheet" media="mediatypeand|not|only (expressions)" href="print.css">

2. CSS3 多媒体类型

值	描述
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

实例：

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色

实例：demo05

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>媒体查询</title>
		<style>
			ul {
				list-style-type: none;
			}
			
			ul li a {
				color: green;
				text-decoration: none;
				padding: 3px;
				display: block;
			}
			
			@media screen and (min-width: 240px) and (max-width: 320px),(min-width: 700px) {
				ul li a {
					padding-left: 30px;
					color: blue;
					background: url(image/email-icon.png) left center no-repeat;
				}
			}
			
			@media screen and (min-width: 320px) and (max-width: 480px) {
				ul li a {
					color: red;
				}
				ul li a:before {
					content: "邮箱:";
					font-style: italic;
					color: #666666;
				}
			}
			
			@media screen and (min-width: 480px) and (max-width: 640px) {
				ul li a:before {
					content: "邮箱:";
					font-style: italic;
					color: lightcoral;
				}
				ul li a:after {
					content: " (" attr(data-email) ")";
					font-size: 12px;
					font-style: italic;
					color: #666666;
				}
			}
			@media screen and (min-width: 640px) {
				ul li a:before {
					content: "邮箱:";
					font-style: italic;
					color: lightcoral;
					padding-left: 30px;
					background: url(image/email-icon.png) left center no-repeat;
				}
				ul li a:after {
					content: " (" attr(data-email) ")";
					font-size: 12px;
					font-style: italic;
					color: #666666;
				}
			}
		</style>
	</head>

	<body>
		<ul>
			<li><a data-email="johndoe@qq.com" href="mailto:johndoe@qq.com">张三</a></li>
			<li><a data-email="marymoe@qq.com" href="mailto:marymoe@qq.com">李四</a></li>
			<li><a data-email="amandapanda@qq.com" href="mailto:amandapanda@qq.com">王五</a></li>
		</ul>
	</body>

</html>

效果图

PHP全站开发工程师-第09章 CSS3特效&动画

CSS3 渐变（Gradients）

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

1. 线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

语法

background:linear-gradient(direction direction, color stop1, color stop2, ...);

线性渐变 - 从上到下（默认情况下）

实例：demo06

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>渐变</title>
		<style>
			#grad1 {
				height: 200px;
				background: -webkit-linear-gradient(left top,red 20%, blue 80%);
				background: -o-linear-gradient(left top,red 20%, blue 80%);
				background: -moz-linear-gradient(left top,red 20%, blue 80%);
				background: linear-gradient(left top,red 20%, blue 80%);
				/* 标准的语法（必须放在最后） */
			}
		</style>
	</head>

	<body>

		<h3>线性渐变 - 从上到下</h3>
		<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

		<div id="grad1"></div>

		<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

	</body>

</html>

使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

background:linear-gradient(angle, color stop1, color stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变。

但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg将创建一个从下到上的渐变。

#grad{

background: -webkit-linear-gradient(180deg, red 30px, blue 120px);

background: -o-linear-gradient(180deg, red 30px, blue 120px);

background: -moz-linear-gradient(180deg, red 30px, blue 120px);

background: linear-gradient(180deg, red 30px, blue 120px);

}

2. 重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

#grad{

background:-webkit-repeating-linear-gradient(red, yellow10%, green20%);

background: -o-repeating-linear-gradient(red, yellow10%, green20%);

background:-moz-repeating-linear-gradient(red, yellow10%, green20%);

background: repeating-linear-gradient(red, yellow10%, green20%);

}

3. 径向渐变

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

径向渐变的实例：

语法

background:radial-gradient(position position, shape size,startColor size, ..., lastColor size);

径向渐变 - 颜色结点均匀分布（默认情况下）

设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：

closest-side
farthest-side
closest-corner
farthest-corner

#grad1{

background: -webkit-radial-gradient(60%55%, closest-side,blue,green,yellow,black);

background: -o-radial-gradient(60%55%, closest-side,blue,green,yellow,black);

background: -moz-radial-gradient(60%55%, closest-side,blue,green,yellow,black);

background: radial-gradient(60%55%, closest-side,blue,green,yellow,black);

}

重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

#grad{

background:-webkit-repeating-radial-gradient(red, yellow10%, green15%);

background: -o-repeating-radial-gradient(red, yellow10%, green15%);

background:-moz-repeating-radial-gradient(red, yellow10%, green15%);

background: repeating-radial-gradient(red, yellow10%, green15%);

}

秒客网

PHP全站开发工程师-第09章 CSS3特效&动画

CSS3 过渡transition

1. 过渡属性

CSS3 转换transform

1. 转换属性

2. 2D 转换

2D 转换方法

rotate(?deg) 旋转

skew(?deg,?deg) 倾斜

3. 3D转换

3D 转换方法

CSS3 transform-origin 属性

4. CSS3 动画

浏览器支持

CSS3的动画属性

CSS3 多媒体查询

1. 多媒体查询语法

2. CSS3 多媒体类型

实例：

CSS3 渐变（Gradients）

语法

使用角度

2. 重复的线性渐变

3. 径向渐变

语法

设置形状

不同尺寸大小关键字的使用

重复的径向渐变

相关文章