<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡模块</title>
<style media="screen" type="text/css">
*{
padding: 0px;
margin: 0px;
}
/*a:link{
color: red;
}
a:visited{
color: green;
}*/
/*a{
color: red;
}
a:hover{
color: orange;
}
a:active{
color:pink;
}*/
/*ul{
list-style: none;
width: 960px;
height: 40px;
background-color: red;
margin: 100px auto;
}
ul li {
float: left;
width: 120px;
line-height: 40px;
text-align: center;
background-color: green;
}
ul li a{
width: 120px;
height: 40px;
display: inline-block;
}
ul li a:link{
background-color: pink;
color: white;
text-decoration: none;
}
ul li a:visited{
color: green;
}
ul li a:hover {
color: red;
}
ul li a:active{
color: yellow;
}*/
/*div{
width: 300px;
height: 100px;
background-color: red;
transition-property: width, background-color;
transition-duration: 3s, 3s;
transition-delay: 2s;
transition: width 3s 2s, background-color 3s;
transition: all 3s ease 2s;
}
div:hover{
width: 600px;
background-color: blue;
}*/
/*ul{
width: 800px;
height: 600px;
background-color: green;
list-style: none;
border: 1px solid red;
}
ul li{
width: 50px;
height: 50px;
background-color: blue;
margin-top: 50px;
}
ul:hover li{
transition-property: margin;
transition-duration: 5s;
margin-left: 700px;
}
ul li:nth-child(1) {
transition-timing-function: linear;
}
ul li:nth-child(2) {
transition-timing-function: ease;
}
ul li:nth-child(3) {
transition-timing-function: ease-in;
}
ul li:nth-child(4) {
transition-timing-function: ease-out;
}
ul li:nth-child(5) {
transition-timing-function: ease-in-out;
}*/
/*div{
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
}
div span{
font-size: 80px;
margin-left: 5px;
margin-right: 5px;
transition: margin 3s;
}
div:hover span{
margin:0 30px;
}*/
ul{
width: 800px;
height: 300px;
margin:100px auto;
list-style: none;
overflow: hidden;
background-color: red;
border: 2px solid;
}
ul li{
width: 160px;
height: 300px;
float: left;
transition: width 0.5s;
}
ul li img{
width: 400px;
height: 300px;
}
ul:hover li {
width: 100px;
}
ul li:hover {
width: 400px;
}
</style>
</head>
<body>
<!-- <a href="https://www.mi.com">小米</a>
<a href="https://www.jd.com">京东</a> -->
<!-- <ul>
<li><a href="#">我是标题</a></li>
<li><a href="#">我是标题</a></li>
<li><a href="#">我是标题</a></li>
<li><a href="#">我是标题</a></li>
<li><a href="#">我是标题</a></li>
<li><a href="#">我是标题</a></li>
<li><a href="#">我是标题</a></li>
<li><a href="#">我是标题</a></li>
</ul> -->
<!-- <div class="">
</div> -->
<!-- <ul>
<li>linear</li>
<li>ease</li>
<li>ease-in</li>
<li>ease-out</li>
<li>ease-in-out</li>
</ul> -->
<!-- <div class="">
<span>I</span>
<span>am</span>
<span>learning</span>
<span>H5</span>
<span>.</span>
</div> -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
第158课 a标签伪类选择器
1、通过我们的观察，发现a标签存在一定的状态
a、默认状态，从未被访问过
b、被访问过的状态
c、鼠标长按状态
d、鼠标悬停在a标签上状态
2、什么是a标签的伪类选择器
a标签的伪类选择器是专门用来修改a标签不同状态的样式的
3、格式
:link 修改默认状态，从未被访问过下的样式
:visited 修改被访问过的状态下的样式
:active 修改鼠标长按状态下的样式
:hover 修改鼠标悬停在a标签上状态下的样式
第159课 a标签伪类选择器注意点
1、a标签的伪类选择器可以单独出现，也可一起出现
2、如果a标签的伪类选择器如果一起出现，
那么有严格的顺序要求编写的顺序link visited hover active，
否则有可能失效
3、如果默认状态的样式和被访问的过状态的样式一样，可以使用
a{
color:red;
}
代替定义两个伪选择器分别定义样式。
第160课 a标签伪类选择器-练习
1、在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面
2、在企业开发中和a标签盒子有关的属性都写在标签选择器中（显示模式／宽高度／padding／margin）
3、在企业开发中和a标签文字／背景相关的都写在伪类选择器中
第161课 过渡模块基本使用
:hover 悬停 这个伪类选择器可以使用在任何标签上
过渡 transition 三要素
1、必须要有属性发生变化
2、必须告诉系统哪个属性需要执行过渡效果
3、必须告诉系统过渡效果持续的时长
注意点
当多个属性需要同时执行过渡效果时用逗号隔开即可
transiton-property:width, background-color;
transtion-duration:5s, 5s;
第162课 过渡模块-其他属性
transtion-delay:2s;告诉系统延迟多少秒之后才开始过渡动画
transition-timing-function: ease; 告诉系统过渡动画的运动的运动速度变化
linear 均速
ease 逐渐慢下来
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
第163课 过渡模块-连写
transition: property duration timing-function delay;
注意点
1、如果想给 加过渡效果，只需要用逗号隔开即可
transition: property duration timing-function delay,property duration timing-function delay;
2、连写的时候，可以省略timing-function delay，因为已经满足过渡三要素
3、如果多个属性的运动速度／延迟的时间／持续时间都一样，
那么可以简写为transition:all 5s;
第164课 过渡模块-弹性效果
编写过渡套路
1、不要管过渡，先编写基本的界面
2、修改我们认为需要修改的属性
3、再回头去给被修改属性的那个元素添加过渡即可
第165课 过渡模块-手风琴效果
ul:hover li {
width: 140px;
}
ul li:hover {
width: 400px;
}
就近原则：谁离元素关系越近，谁就管用
