css3--transition动画

CSS3 transition动画

1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式

  • linear 匀速
  • ease 开始和结束慢速
  • ease-in 开始是慢速
  • ease-out 结束时慢速
  • ease-in-out 开始和结束时慢速
  • cubic-bezier(n,n,n,n)

4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

举例：

<style type="text/css">        
.box{
    width:100px;
    height:100px;
    background-color:gold;
    transition:width 300ms ease,height 300ms ease 300ms,background-color 300ms ease 600ms;            
}
.box:hover{
    width:300px;
    height:300px;
    background-color:red;
}
</style>
......
<div class="box"></div>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>transition动画</title>
 9 
10     <style type="text/css">
11         .box{
12             width:100px;
13             height:100px;
14             background-color:gold;
15 
16             /* transition:width 500ms ease 1s,height 500ms ease 500ms,background-color 500ms ease 1.5s,border-radius 500ms ease 2s; */
17             transition:all 500ms ease;
18         }
19 
20         .box:hover{
21             width:200px;
22             height:200px;
23             background-color:red;
24             border-radius:50px;
25         }
26 
27 
28         div{
29             width:100px;
30             height:50px;
31             background-color:blue;
32             margin-bottom:20px;
33         }
34 
35         div:nth-child(2){
36             transition:all 500ms linear;  /*  linear匀速 */
37         }
38 
39         div:nth-child(3){
40             transition:all 500ms ease;  /* ease开始和结束慢速  */
41         }
42 
43         div:nth-child(4){
44             transition:all 500ms ease-in;   /* ease-in开始是慢速  */
45         }
46 
47         div:nth-child(5){
48             transition:all 500ms ease-out;   /* ease-out结束时慢速  */
49         }
50 
51         div:nth-child(6){
52             transition:all 500ms ease-in-out;   /* ease-in-out开始和结束时慢速 */
53         }
54 
55         div:nth-child(7){
56             transition:all 500ms cubic-bezier(0.750, -0.425, 0.055, 1.480);  /* 曲线设置网站：https://matthewlein.com/ceaser */
57         }
58 
59         div:hover{
60             width:1000px;
61         }
62     </style>
63 </head>
64 <body>
65 
66 <div class="box"></div>
67 
68 <div>linear</div>
69 <div>ease</div>
70 <div>ease-in</div>
71 <div>ease-out</div>
72 <div>ease-in-out</div>
73 <div>cubic-bezier</div>
74 
75 </body>
76 </html>

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>图片文字遮罩</title>
 9 
10     <style type="text/css">
11         .box{
12             width:200px;
13             height:300px;
14             border:1px solid #000;
15             margin:50px auto 0;
16             position:relative;
17             overflow:hidden;  /* 先隐藏pic_info */
18         }
19 
20         .box img{
21             width:200px;
22             height:300px;
23         }
24 
25         .box .pic_info{
26             width:200px;
27             height:200px;
28             background-color:rgba(0,0,0,0.5);   /* 设置背景颜色透明度 */
29             color:#fff;
30 
31             position:absolute;  /* 将pic_info与box连接在一起 */
32             left:0px;
33             top:300px;
34 
35             transition:all 500ms ease;   /* ease开始和结束慢速 */
36 
37         }
38 
39         .box:hover .pic_info{   /* 鼠标移动至box，pic_info出现且距离box顶部100px */
40             top:100px;
41         }
42 
43         .box .pic_info p{
44             margin:30px;
45             line-height:30px;
46         }
47 
48     </style>
49 </head>
50 <body>
51 
52 <div class="box">
53     <img src="../images/location_bg.jpg" alt="pic">
54     <div class="pic_info"><p>图片说明：这是一个风景图图片说明：这是一个风景图图片说明：这是一个风景图</p></div>
55 </div>
56 
57 </body>
58 </html>

 

posted on 2019-11-25 21:18  cherry_ning  阅读(270)  评论(0)    收藏  举报

导航