过渡属性的简单应用

transition过渡属性

跟transfrom可不一样哦

transform是translate位移、scale缩放、ratate旋转、skew倾斜

transition：CSS属性空格转化用时空格过渡函数空格延迟时间;

CSS属性有很多，可以偷懒写个all

转化用时的意思就是这个过渡效果的时间你想要它花费多少秒

过渡函数包括：linear 匀速过渡 ； ease（默认 开头慢中间快结束慢 ；ease-in 开始慢，然后加速； ease-out 开始快，然后减速；ease-in-out 慢慢

延迟时间的意思是，你打算这个过渡效果在多久后开始，可以设置正数，等待设置的正数秒后开始过渡，也可以设置负数，负数就是直接快进到负多少秒之后开始过渡，相当于你把过渡的前几秒给砍掉了，比如说你过渡时间设置三秒，然后延迟设置个负二，它会直接从第三秒开始出现效果前两秒你看不到了。

啊嘞。。。不让发

说我太短了

啧

那本来补充前面文章的就写这边咯……

定位的补充说明

相对定位
层级提高，可以把标准文档流中的原来的浮动元素盖在下面
写标签元素的时候后面写的图会把前面写的样式覆盖
一般作为absolute的父级，不设置偏移量

----------------------------------------
绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位
元素位置发生偏移后，原来的位置不会被保留
设置绝对定位的元素脱离文档流
绝对定位的使用场景
一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景
下拉菜单，轮播图，定位广告图

------------------------------------------
fixed；固定定位的特性

没有给偏移量 那么就待在原来的位置
相对浏览器窗口来定位
偏移量不会随滚动条的移动而移动
固定定位的使用场景
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

透明度

opacity:x    x值为0~1，值越小越透明 
IE低的版本不支持

效果嘛，background 有个rgb对吧？rgba 也可以设置透明度，看起来那不能说一模一样，只能说完全相同
  filter:alpha(opacity=x)    x值为0~100，值越小越透明  

这个好像很老了，不推荐使用哦

---------------------------------------------------------------------------------------------------------------------------------
z-index属性值：整数，默认值为0
设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方
 

——————————————————————————————————————————————————————————————————

做个小练习吧~

要求是鼠标摸到图，图会动一下