第十九章过渡模块

<!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>![](../image/o.gif)</li>
      <li>![](../image/o.gif)</li>
      <li>![](../image/o.gif)</li>
      <li>![](../image/o.gif)</li>
      <li>![](../image/o.gif)</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;
}

就近原则：谁离元素关系越近，谁就管用

第十九章 过渡模块

第158课 a标签伪类选择器

第159课 a标签伪类选择器注意点

第160课 a标签伪类选择器-练习

第161课 过渡模块基本使用

第162课 过渡模块-其他属性

第163课 过渡模块-连写

第164课 过渡模块-弹性效果

第165课 过渡模块-手风琴效果

推荐阅读更多精彩内容