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.尝试编写标准的登录注册界面