CSS动作

5.过渡 tansition  (由一个状态过渡到另外一个状态的过程)

            transition            过渡

                参数1：            过渡的时间,s代表秒，ms代表毫秒,1s=1000ms

                参数2：            过渡的属性，all代表所有的属性

                参数3：            过渡的方式，ease是默认的（减速）

                                linear            匀速

                                ease-in            加速

                                ease-out            减速

                                ease-in-out        先加速后减速

                                cubic-bezier        贝塞尔曲线

 

                                生成贝塞尔曲线http://cubic-bezier.com/

1. div{
2. width: 100px;
3. height: 100px;
4. background: red;
5. transition: 2s all cubic-bezier(.62,1.06,.67,-0.74);
6. }
7. div:hover{
8. width: 600px;
9. height: 100px;
10. background: blue;
11. }
13. <div></div>

 

1. transition: 1s width,2s height,3s background;

         这个过渡一共需要3秒，第一秒改变宽，第二秒改变高，第三秒改变背景

1. transition: 1s width,2s 2s height,3s 1s background;

     这个过渡一共需要四秒，第一秒改变宽，第二秒改变高用两秒，第三秒改变背景用一秒

 

6.transform    变换      只针对块元素有作用

 

                rotate(度数)            旋转      单位 deg

                     rotateX            X轴旋转

                     rotateY            Y轴旋转

 

                skew(度数)            倾斜       单位deg

                    skewX            X轴倾斜

                    skewY            Y轴倾斜

 

                scale(倍数)            缩放

                    scaleX            X轴缩放

                    scaleY            Y轴缩放

 

                translate(像素)        位移

                    translateX        X轴位移

                    translateY        Y轴位移

 

            transform执行的顺序是先写的后执行，后写的先执行

            如果没有将他们合并写在一起的话，那么只会执行最后写的那个动作。

1. transform: rotate(360deg);/*默认是垂直平面旋转*/
3. transform: skew(45deg); /*默认是X轴倾斜*/
4. transform: skewX(45deg);
5. transform: skewY(45deg);
6. transform: skew(30deg,30deg);
8. transform: scale(2);/*默认是xy都变化*/
9. transform: scaleX(2);
10. transform: scaleY(2);
11. transform: scale(2,3);
13. transform: translate(100px);/*默认状态是向X轴移动*/
14. transform: translateX(200px);
15. transform: translateY(150px);
16. transform: translate(-100px,-100px);
18. transform: scale(2) translate(100px) rotate(30deg) skew(45deg,45deg);

 

   6-1    改变基点

     transform-origin            变换的基点  

1. div{
2. width: 200px;
3. height: 200px;
4. background: red;
5. margin: 200px auto;
6. transition: 1s;
8. transform-origin: left center;
9. transform-origin: right bottom;
10. transform-origin: 20px 30px;
11. transform-origin: center center;
12. }
13. div:hover{
14. transform: rotate(360deg);
15. transform: scale(2);
16. transform: skew(45deg);
17. transform: translate(200px);
18. }
20. <div>kaivon</div>

 

 

 7.3D空间 

                把一个盒子转成一个3D空间，需要配合景深来使用

                transform-style: preserve-3d;   

                perspective: 800px;  

            景深的值越小效果越明显，不过一般取值800.

1. .box{
2. width: 100px;
3. height: 100px;
4. padding: 100px;
5. border: 5px solid #000;
6. margin: 100px auto;
7. transform-style: preserve-3d;
8. perspective: 100px;
9. }
10. .child{
11. width: 100px;
12. height: 100px;
13. background: red;
14. transition: 1s;
15. }
16. .box:hover .child{
17. transform: rotateX(180deg);
18. }
20. <divclass="box">
21. <divclass="child">kaivon</div>
22. </div>

 

8animation      动画        

            @keyframes name{ }    关键帧

                参数1：            运动的时间

                参数2：            关键帧的名字

                参数3：            过渡的方式，ease是默认的（减速）

                                          linear            匀速

                                          ease-in            加速

                                          ease-out            减速

                                          ease-in-out        先加速后减速

                                          cubic-bezier        贝塞尔曲线

 

                 生成贝塞尔曲线http://cubic-bezier.com/

                参数4：            重复的次数

                                         数字

                                         infinite        无限次

                参数5：            动画的顺序

                                        alternate        偶数次数会倒着走

                                         normal            正常顺序

 

       8-2  animation-play-state            播放与暂停

                                                           paused            暂停

                                                           running            播放     

 

1. .box{
2. width: 400px;
3. height: 400px;
4. border: 1px solid #000;
5. position: relative;
6. }
7. .box div{
8. width: 100px;
9. height: 100px;
10. background: red;
11. position: absolute;
12. left: 0;
13. top: 0;
15. animation: 3s move linear infinite normal;
16. }
17. .box:hover div{
18. animation-play-state: paused;
19. }
21. @keyframes move{
22. 0%{
23. left: 0;
24. top: 0;
25. }
26. 25%{
27. left: 300px;
28. top: 0;
29. }
30. 50%{
31. left: 300px;
32. top: 300px;
33. }
34. 75%{
35. left: 0;
36. top: 300px;
37. }
38. 100%{
39. left: 0;
40. top: 0;
41. }
42. }
45. <divclass="box">
46. <div></div>
47. </div>