Week3 Day5 渐变过渡

今日总结:通过一天的学习，学习了浏览器前缀，线性渐变，径向渐变，重复性渐变和过渡的知识点，并且自己练习了几个效果。

浏览器前缀

很多css3属性 最初的预览版没有形成最终的正式版，但是浏览器为了对这些新属性形成支持，主流浏览器提供属于自己的语法规则 “浏览器前缀”

-webkit- 谷歌、苹果 浏览器前缀
-moz- 火狐浏览器前缀
-ms- IE浏览器前缀
-o- 欧鹏浏览器

注：
添加浏览器前缀 -> 兼容模式
不添加浏览器前缀 -> 标准模式

线性渐变

首先需要连接的问题是
渐变是什么: 是背景色在多个颜色之间平稳的过渡。

线性渐变：
从一个方向到另一个方向的颜色的变化。

标准模式的语法（不添加浏览器前缀）：
background: linear-gradient(direction, color-stop1, color-stop2, …);
说明：
direction：默认为to bottom，即从上向下的渐变；
stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

兼容模式语法（添加浏览器前缀）：
background:linear-gradient( direction, color-stop1, color-stop2,。。。)

说明： direction： 不能添加to 默认指的是 从哪个方向开始

渐变方向：
1：to left \ to right \ to top
2: 对角着渐变
to left top \ to right bottom

3: 渐变线角度的变化
例如：标准模式 ： 40deg 40度
兼容模式 ： 90 - 40

线性渐变：颜色的分布：
linear-gradient(方向, 颜色1 20%，颜色2 30%，颜色3 )

到20%这个位置仍然是颜色1 出了20% 开始向颜色2渐变
线性渐变如图所示：

径向渐变

径向渐变：
从一个点到四周的颜色的过渡变化。

语法：（必须加浏览器前缀）
background: radial-gradient(center, shape, size, start-color, …, last-color);
说明：
center：渐变起点的位置，可以为百分比，默认是图形的正中心。
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。

关于径向渐变的大小：
closest-side 最近边
farthest-side 最远边
closest-corner 最近角
farthest-corner 最远角

重复性渐变

重复性渐变：

1、重复性线性渐变
background:repeating-linear-gradient();
2、重复性径向渐变
background:repeating-radial-gradient();

过渡

过渡：

1. transition-property：检索或设置对象中的参与过渡的属性
2. transition-duration：检索或设置对象过渡的持续时间
3. transition-delay：检索或设置对象延迟过渡的时间
4. transition-timing-function：检索或设置对象中过渡的动画类型
   动画的运动类型：
   默认的不是匀速 ，默认的是ease

简写属性：
transition:过渡的属性(all) 过渡的时间 延迟时间 动画的类型（linear 匀速）

注：transition 必须通过事件触发！（鼠标滑过）改变css属性的值。
例如利用所学知识做出的类似手风琴一样的效果
首先通过所学知识浮动定位等，将5张图片做成如下效果：

而当我鼠标放在每一张图片上是，他就会展开，并把其他图片挤到边上。

代码实现：
CSS

HTML