day19-CSS-过渡模块

a标签的伪类选择器

• 用来修改a标签不同状态的样式

a标签的状态

• 1.默认状态，未被访问a:link{}
• 2.被访问过状态a:visited{}
• 3.鼠标悬停在a标签的状态a:hover{}
• 4.鼠标长按状态a:active{}
• 注意点
  • 1️⃣这些伪类选择器可以单独出现也可以一起出现
  • 2️⃣若4个状态一起编写必须按照顺序：默认->被访问->鼠标悬停->鼠标长按
  • 3️⃣默认状态和被访问样式一样则可以简写成a{}
  • 4️⃣a伪类选择器最好写在标签选择器的后面
  • 5️⃣和a标签盒子相关属性都写在标签选择器中（显示模式、高度宽度、padding、margin）
  • 6️⃣a标签文字、背景相关的都写在伪类选择器中
• 补充
  • ①：hover这个伪类选择器也可以用在其他标签上---缺点：变化十分过程生硬

过渡模块

• transition-property:width，其他属性；需要过渡的属性
• transition-duration:5s，其他属性的持续时间；过渡持续的时间

过渡三要素

• 1.必须有属性发生变化
• 2.必须告诉系统哪个属性需要变化
• 3.变化持续的时长
• 注意点
  • 多个属性都有过渡效果时，用逗号隔开

过渡模块其他属性

• transition-delay：告诉系统延迟多少秒执行过渡动画
• transition-timing-function：过渡动画的运行速度不同
  • 匀速linear 逐渐减速ease 加速ease-in 减速ease-out 先加速后减速ease-in-out

连写模式

• transition：过渡属性 过渡时长 运动速度 延迟时间，其他属性的四个要素；
• 注意点
  • 1️⃣多个属性以逗号隔开
  • 2️⃣连写时候运动速度和延迟时间可以省略，由于过渡三要素满足
  • 3️⃣若多个属性的运动速度、延迟时间、持续时间都一样则可以简写transition:all 0s;

过渡模块-弹性效果

• 可以将文字套上span在修改每个span的margin左右

如何编写过渡

• step1:先编写好基本界面
• step2:修改需要修改的属性
• step3:再去给被修改的属性添加过渡

练习-手风琴效果

• ul:hover
  • 修改每个li让其变窄
• ul li:hover --- 优先级高于上面
  • 悬停在特点li时该li变宽，其余的li显示上面效果