首页 > 其他分享> 文章详细

过渡transition

2022-03-02 20:03:43 阅读：208 来源： 互联网

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

（一）过渡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>

效果：

box1鼠标一移出父盒子，瞬间回到原位，没有返回的过渡效果
Box2鼠标移出父盒子，由一个过渡的效果回到原位
Box3过渡盒子一移出鼠标就开始返回，过渡盒子一在鼠标上就开始右移，这样反复来回，致使盒子抖动，且需要鼠标跟着盒子移动盒子才能移动。

（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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

过渡transition