42、过渡

最新推荐文章于 2025-10-31 04:59:52 发布

原创最新推荐文章于 2025-10-31 04:59:52 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

50 篇文章

订阅专栏

本文深入讲解CSS中的过渡（transition）效果，包括transition-property、transition-duration、transition-timing-function和transition-delay等属性的使用方法，以及如何通过它们创建平滑的视觉效果，提升用户体验。

文章目录

介绍
过渡
- 练习

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

过渡

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
*{
    margin:0;
    padding:0
}
.box1{
    width:800px;
    height:800px;
    background-color:silver;
    overflow:hidden;
}
.box1 div{
    width:100px：
    height:100px;
    marging-bottom:100px;
}
.box2{
    background-color:#bfa;
  
   1、过渡（transition）
       - 通过过渡可以指定一个属性发生变化时的切换方式
       - 通过过渡可以创建一些非常好的效果，提升用户体验
    
      transition:all 2s;
    
   2、transition-property: 指定要过渡的属性
        多个属性间使用 , 隔开
        如果所有属性都需要过渡，则使用all关键字
        大部分属性都支持过渡效果（值可以计算的，颜色。。），注意过渡时必须从一个有效值
        向另外一个有效值过渡。（不能从auto 过渡）
    
    transition-property:width/all
    
    
  
  3、transition-duration: 指定过渡效果的持续时间
       时间单位 s 和 ms
       可以给属性分别指定过渡时间，使用逗号隔开
       
  
    transition-duration:2s 1s;
    
 4、transition-timing-function :过渡的时间函数
     指定过渡的执行方式
        可选值：
          ease 默认值 先加速再减速
          linear 匀速运动
          ease-in 加速运动 
          ease-out 减速运动
          ease-in-out 先加速后减速
          cubic-bezier() 来指定时序函数
          steps() 分步执行过渡效果
             可以设置 第二个值
                end：表示在时间结束时执行过渡（默认值）
                start: 在时间开始时执行过渡
       
     
     transition-timing-function:steps（2，end）
      
  5、transition-delay
         过渡效果的延迟，等待相应的时间后再执行过渡
      
      
    
  6、transition 过渡的简写属性，可以同时设置过渡的相关所有
        属性，只有一个要求，如果要写延迟，则第一个为持续时间，第二个为延迟时间
      
      transition:margin-left 2s
}
.box3{
    background-color:orange
}
.box1:hover .box2{
    width:200px;
    height:200px;
}

</style>
<body>
<div class="box1">
   <div class="box2"></div>
   <div class="box3"></div> 
</div>

</body>
</html>

练习

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.box1{
    height:71px;
    /*一个兔子的宽度*/
    width:132px;
    background-image:url("");
    background-position:0 0;
    transition:2s steps(3)
}
。
.box1:hover{
    background-position:-396px 0
}
</style>
<body>
<div class="box1">

</div>

</body>