考点
过渡动画，单词transition过渡动画的简写格式transition: 属性名过渡时间运行方式动画延迟transition:propertydurationliming-functiondelay例如：transition: width4sease0s;transition:all4slineal3s;过渡动画的运动方式，常用的有匀速，缓冲，请写出单词匀速，linear缓冲，ease过渡动画的时间，要设置时间为3秒钟，应该怎么写这个三秒3s过渡动画的时间，要设置时间为500豪秒，如何写这五百豪秒500ms根据描述写出样式：过渡动画，让宽度发生变化，持续时间四秒钟，匀速运动，没有延迟transition:width4slinear0s;根据描述写出样式：过渡动画，让全属性都变化，持续时间500豪秒，缓冲运动，3秒延迟transition:width500msease3s;
transition
用法
对于一个属性的简写transition: 属性 持续时间 速度 延迟对于多个属性的简写transition: 属性1 持续时间1 速度1 延迟1， 属性2 持续时间2 速度2 延迟2；对于全属性的变化（待核实）transition:all 持续时间 速度 延迟
读音的拆分
tran
si
tion
意义
transition动画的属性
property设置过度的属性
transition-property:属性
duration设置过渡的时间
丢锐醒
trannsition-duration：过渡时间过渡时间秒，s。 例如一秒，1s毫秒，ms，例如500毫秒，500ms
timing-function 过渡的运动方式
timing = time 的现在进行时
补充一个英语进行时的语法
动词+ing，代表正在进行
比如
吃eat是动词，正在吃，eating
笑lauth，正在笑，lauthing
同理
time，计时的意思
现在的分词 timeing
现在的分词另一种现态
以e结尾时，去掉e，加ing
timing
python中的现在分词
threading
thread+ing
import threading
t = threading.Thread
multiprocessing = multi多种的+process进程+ing现在分词
function
格式
transition-timing-function:方式方式两种一，linear，匀速。直线的意思，理解为速度值是不变的，直线的二，ease，缓冲。
delay 时间延迟
地雷
用法
transition-delay:延迟时间
连写
transition: 属性 过渡时间 运行速度 动画延迟
应用
需要两个状态
应用的时候，会由状态A变为状态B
代码
<style>div{width: 100px;height: 30px;background: red;transition:width 4s ease 0s;/*transition:all 4s ease 3s;*/}div:hover{width: 600px;background: blue;}</style><div>123</div>内容
效果
练习-
鼠标入图片时浮现出来说明文字
初步的样式
<style>.outter{width: 300px;height: 400px;background: red;}.img{width: 300px;height: 400px;background: green;}.info{width: 300px;height: 100px;background: black;color:gold;}</style><div class="outter"><div class="img"></div><div class="info">这是说明文字<br>这是详明的详情</div></div>123
效果
目标
让黑色的块脱离文档流
通过定位方式来脱离
三种定位方式
1相对定位
2绝对定位
3固定定位
经验方面
会把父容器设置一个相对定位，把子容器设置为一个绝对定位
好处
只需要把绝对定位的子容器进行重新定位就可
以父容器左上角作为x0y0的座标来定位
只有获得了定位属性的标签
才会具有left ,right,top ,bottom的属性
代码
<style>.outter{width: 300px;height: 400px;background: red;position: relative;}.img{width: 300px;height: 400px;background: green;}.info{width: 300px;height: 100px;background: black;color:gold;position: absolute;left:0;top:0;}</style><div class="outter"><div class="img"></div><div class="info">这是说明文字<br>这是详明的详情</div></div>123
效果
让黑色的块到底部去
给黑色的块设置一个top值
让这个值=父容器的高度
完整版
代码
<style>.outter{width: 300px;height: 400px;background: red;position: relative;overflow: hidden;}.img{width: 300px;height: 400px;background: green;}.info{width: 300px;height: 100px;background-color: rgba(0,0,0,0.2);color:gold;position: absolute;left:0;top:400px;transition:top 1s linear;/*opacity:0.2;*/}.outter:hover .info{top:300px;}</style><div class="outter"><div class="img"></div><div class="info">这是说明文字<br>这是详明的详情</div></div>123
效果
经验
设置透明度
1，如果只要背景颜色透明有变化，不影响文字
给定颜色属性的时候
使用rgba（）方式
例如
background-color: rgba(0,0,0,0.2);
2，如果希望一个标签里所有的内容都同时有透明度的变化
使用属性opacity
opacity:0.2;
技术点
黑色的文字说明块不见
并不是使用的display:none
而是设置一个父容器的overflow:hidden来实现的
