其他分享
首页 > 其他分享> > 过渡transition

过渡transition

作者：互联网

（一）过渡transition

在对元素进行样式的改变时有时候想要让她的过程进行的缓慢些，形成一个动画效果，因此可以使用transition属性。

（1）transition-property属性：指定需要进行过渡效果的属性（是css属性）。

Transition-property的属性值可以是任意css属性，而且可以写多个属性，只需要用逗号隔开即可，若是有过多的需要过渡的属性，可以用all。

（2）transition-duration属性：过渡效果所需的时长，单位是秒（s）/毫秒（ms）。

Demo1：小div当鼠标移入时往右移300px，同时移入移出位置的变化都有一个过渡效果。



<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .out {
            width: 300px;
            height: 200px;
            border: 1px solid #f0f;
            margin: 10px auto;
        }
        .out>div {
            width: 100px;
            height: 100px;
        }
        .posi {
            position: relative;
        }
        .posi>div {
            /*  */
            /* 要移动div，使用定位移动 */
            position: absolute;
            /* 初始位置 */
            left: 0;
            top: 0;
        }
        .posi:hover>div {
            /* 悬浮后位置 */
            left: 300px;
        }
        /* 过渡在父元素身上 */
        .box1>div {
            background-color: #ff0;
        }
        .box1:hover>div {
            transition: left 2s;
        }
        /* 过渡在需要过渡的元素身上 */
        .box2>div {
            background-color: blueviolet;
            transition: left 2s;
        }
        /* 不是在父元素上鼠标悬浮使子元素过渡效果下位移，而是对子元素鼠标悬浮进行位移会产生的效果 */
        .box3{
            position: relative;
        }
        .box3>div {
            position: absolute;
            background-color: rgb(55, 224, 97);
            left: 0;
            transition: left 2s;
        }
        .box3>div:hover{
            left: 300px;
        }
       
    </style>
</head>


<body>
    <div class="out posi box1">
        <div>过渡在需要过渡效果的父盒子身上</div>
    </div>
    <div class="out posi box2">
        <div>过渡在需要过渡效果的元素身上</div>
    </div>
    <div class="out ex box3">
        <div>
            鼠标悬浮在子元素身上
        </div>
    </div>
   
</body>


</html>


 



 


效果：


    

  1. box1鼠标一移出父盒子，瞬间回到原位，没有返回的过渡效果
    2. 

  2. Box2鼠标移出父盒子，由一个过渡的效果回到原位
    3. 

  3. Box3过渡盒子一移出鼠标就开始返回，过渡盒子一在鼠标上就开始右移，这样反复来回，致使盒子抖动，且需要鼠标跟着盒子移动盒子才能移动。
    4. 



 


（3）transition-timing-function属性：过渡的速度曲线（速度函数）。控制过渡效果在元素身上的变化速度。


属性值：


①ease：以慢速起步，接着加速，后减速结束（cubic-bezier(0.25,0.1,0.25,1)）。


②ease-in：慢速起步慢慢加速直到结束（等于 cubic-bezier(0.42,0,1,1)）。


③ease-out：快速起步，接着开始逐渐减速（等于 cubic-bezier(0,0,0.58,1)）。


④ease-in-out：慢速起步逐渐加速，最后慢速结束（等于 cubic-bezier(0.42,0,0.58,1)）。


⑤linear：规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。


⑥贝塞尔曲线cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。


⑦步骤steps（n）：把过渡效果分成五部，一步一步跳过来




 


 


（4）transition-delay属性：延迟执行过渡效果的时间。单位秒(s)/毫秒(s)


（5）transition属性：过渡的复合属性，简写属性。


属性值顺序：过度的属性 过渡时长  过渡的速度方式 过度的延迟时间。（前一个秒数是过渡时长，后一个秒数是延迟时长）


注意：


①若是只有发生鼠标悬浮等操作时要发生过渡效果，则写在元素要做出对应操作的选择器中，若是操作结束也想要元素效果慢慢回到原来的样子就把过渡写在需要过渡的元素身上，而不写在操作上。


②请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。


③display属性没有过渡效果


④若是需要过渡的元素


DEMO1:方块变椭圆并往右移动300px


 



 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <style>
 9         .box{
10             width: 500px;
11             height: 200px;
12             border: 1px solid #f00;
13         }
14         .box>div{
15             width: 100px;
16             height: 100px;
17             background-color: rgb(157, 143, 170);
18             transition:  all 3s;
19         }
20         .box:hover div{
21             background-color: rgb(245, 140, 149);
22             width: 200px;
23             border-radius: 50%;
24             margin-left: 300px;
25         }
26     </style>
27 </head>
28 <body>
29     <div class="box">
30         <div></div>
31     </div>
32 </body>
33 </html>



 




DEMO2：在图片中，当鼠标悬浮时，从下往上移一段文字覆盖图片，但是能看到底部图片，同时鼠标移入移出都有一个过渡效果。



 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <style>
 9         .box{
10             width: 300px;
11             height: 300px;
12             border: 1px solid rgb(90, 62, 247);
13             position: relative;
14             overflow: hidden;
15         }
16         img{
17             width: 300px;
18             height: 300px;
19         }
20         p{
21             width: 300px;
22             height: 300px;
23             background-color: rgba(255, 252, 82, 0.4);
24             position: absolute;
25             top: 300px;
26             left: 0;
27             margin: 0;
28             transition: top 3s;
29         }
30         .box:hover p{
31             top:0 ;
32         }
33     </style>
34 </head>
35 <body>
36     <div class="box">
37         <img src="../过渡/images/haha.webp" alt="">
38         <p>
39             曾经我也是靠脸吃饭的<br>
40             真的。。。<br>
41             直到有一天<br>
42             我快饿死了<br>
43             才好好工作的
44         </p>
45     </div>
46 </body>
47 </html>





 


标签：效果,transition,300px,过渡,div,属性	

来源： https://www.cnblogs.com/false-information/p/15956818.html