23.CSS-过渡模块

最新推荐文章于 2024-07-25 16:45:46 发布

山楂不甜

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量106

点赞数

分类专栏： css 笔记文章标签： css html html5 css3

原文链接：https://blog.csdn.net/weixin_44713430/article/details/100046632

版权

笔记同时被 2 个专栏收录

60 篇文章 1 订阅

订阅专栏

css

31 篇文章 2 订阅

订阅专栏

文章目录

过渡模块

过渡模块

1.过渡三要素

必须要有属性发生变化；
必须告诉系统哪个属性需要执行过渡效果；
必须告诉系统过渡效果持续时长。

2.注意点

当多个属性需要同时执行过渡效果时用逗号隔开即可。
例如：

/*告诉系统哪个属性需要过渡效果和效果持续的时间*/
transition-property: width,background-color;
transition-duration: 5s,5s;

3.其他属性

transition-timing-function 属性规定过渡效果的速度曲线。
取值：
ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
transition-delay属性告诉系统延迟多少秒之后才开始过渡动画。

4.连写格式

transition: 过渡属性过渡时长运动速度延迟时间;

注意点：

和分开写一样，如果想给多个属性添加过渡效果也是用逗号隔开；
连写的时候可以省略后面两个参数，因为只要编写了前面两个，就已经满足了过渡三要素；
如果多个属性运动的速度/延迟时间/持续时间都一样，那么可以简写为 transition: all 5s；表示所有发生变化的属性都要过渡5s。

编写过渡套路：

不要管过渡，先编写基本的界面；
修改我们认为需要修改的属性；
再回过头给被修改属性的那个元素添加过渡即可。

手风琴效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>92-过渡模块-手风琴效果</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      width: 960px;
      height: 300px;
      margin: 100px auto;
      border: 1px solid #000;
      overflow: hidden;
    }
    ul:hover li{
        width: 100px;
    }
    ul li:hover{
        width: 460px;
    }
    ul li{
      list-style: none;
      width: 160px;
      height: 300px;
      /*background-color: red;*/
      float: left;
    /*border: 1px solid #000;
      box-sizing: border-box;*/
        transition: width 0.5s;
    }
  </style>
</head>
<body>
<ul>
  <li><img src="images/ad1.jpg" alt=""></li>
  <li><img src="images/ad2.jpg" alt=""></li>
  <li><img src="images/ad3.jpg" alt=""></li>
  <li><img src="images/ad4.jpg" alt=""></li>
  <li><img src="images/ad5.jpg" alt=""></li>
  <li><img src="images/ad6.jpg" alt=""></li>
</ul>
</body>
</html>

山楂不甜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
23.CSS-过渡模块

文章目录过渡模块1.过渡三要素2.注意点3.其他属性4.连写格式手风琴效果过渡模块1.过渡三要素必须要有属性发生变化；必须告诉系统哪个属性需要执行过渡效果；必须告诉系统过渡效果持续时长。2.注意点当多个属性需要同时执行过渡效果时用逗号隔开即可。例如：/*告诉系统哪个属性需要过渡效果和效果持续的时间*/transition-property: width,background-color;transition-duration: 5s,5s;3.其他属性transition-
复制链接

扫一扫

专栏目录