day0526CSS3 简介及文本与多列

day0526CSS3的背景、2d-3d转换及过渡动画

1.CSS3背景

2.2D变换

3.3D变换

4.过渡动画

一.css3的背景

1.线性背景（线性渐变颜色）

linear-gradient(方向,颜色1,颜色2…)

<div class="linear">
	线性渐变背景
</div>
<style type="text/css">
	.linear{
		width: 300px;
		height: 80px;
		line-height: 80px;
		border: 1px solid green;
		text-align: center;
		/* 线性渐变色参数:方向to left,to right,to right bottom,to right top...*/
		/* 方向指明最后颜色所在的位置 */
		background: linear-gradient(to right top,green,red,blue);
		color: black;
	}
</style>

2.径向背景(径向渐变颜色)

raduis-gradient(圆心位置，类型，颜色1,颜色2…)

径向渐变背景

三.过渡动画 1.元素样式渐变 格式：transition:时长 属性 快慢

第一个动画

实战练习

提示：课程源码在"作业"文件夹中

1.参考课程源码，完善轮播图效果

要求：添加四个指示器，切换到某个图片时是亮的其它为灰色，手动与自动均切换，效果如下

2.分别创建三个div元素练习线性渐变,径向渐变与背景图片操作

3.设计4个div,宽度和高度都为100px,颜色自定义

第1个div向右移动50px,向下移动30px

第2个div的变形起始点为100px,100px(右下角),顺时针旋转108度

第3个div的变形起始点为0px,100px(左下角),宽度变为1.5倍,高度变为2倍

第4个div的变形起始点为0px,0px(左上角),水平方向倾斜-45度

4.尝试编写标准的登录注册界面

335)]

2.分别创建三个div元素练习线性渐变,径向渐变与背景图片操作

3.设计4个div,宽度和高度都为100px,颜色自定义

第1个div向右移动50px,向下移动30px

第2个div的变形起始点为100px,100px(右下角),顺时针旋转108度

第3个div的变形起始点为0px,100px(左下角),宽度变为1.5倍,高度变为2倍

第4个div的变形起始点为0px,0px(左上角),水平方向倾斜-45度

4.尝试编写标准的登录注册界面