CSS3 转换、过渡和动画

最新推荐文章于 2022-01-18 21:49:41 发布

筱羅卜

最新推荐文章于 2022-01-18 21:49:41 发布

阅读量421

点赞数 1

文章标签： css3 动画 Tranform Transition

本文链接：https://blog.csdn.net/summer_WXX/article/details/65627260

版权

一、转换

1、属性：transform

取值：none/transform-function(转换函数)

注意：如果要实现多个转换函数的话，可以用空格分开若干transform-function

2、转换的原点

默认情况，原点在元素的中心处，width*50%，height*50%

更换原点-属性：transform-origin：数值/百分比/关键字(top/bottom/left/right)

取值：按照当前元素的左上点为(0,0)

一个值：所有轴的位置

两个值：第一个值表示x轴上的值，第二个表示y轴

三个值：x,y,z

转换主要分为两类：2D转换和3D转换

（一）2D转换

1、位移：位置移动

函数：translate()

取值：数值/百分比(可为负)

一个值：x轴

两个值：x轴,y轴

单向位移函数：translateX(),translateY()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3-2D变换之位移</title>
 6     <link rel="stylesheet" href="demo05.css">
 7 </head>
 8 <body>
 9     <div id="d1"></div>
10     <div id="d2"></div>
11 </body>
12 </html>

 1 @charset "utf-8";
 2 
 3 div{
 4     width: 200px;
 5     height: 200px;
 6     position: absolute;
 7     top: 100px;
 8     left: 200px;
 9 }
10 #d1{
11     border: 1px dotted #000;
12 }
13 #d2{
14     border: 1px solid #000;
15     background-color: #f00;
16     opacity: 0.5;
17     /*2D变换之位移*/
18     transform: translate(50px,50px);
19 }

2、缩放：改变元素尺寸

函数：scale()

取值：

一个值：x轴和y轴同样的缩放比例

两个值：分别表示x轴和y轴的缩放比例

可取值：

默认值为 1

放大：大于1的数值，可以取小数

缩小：0-1的数值

单向缩放函数：scaleX(x),scaleY(y)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3-2D变换之缩放</title>
 6     <link rel="stylesheet" href="demo06.css">
 7 </head>
 8 <body>
 9     <div id="d1"></div>
10     <div id="d2"></div>
11 </body>
12 </html>

@charset "utf-8";

div{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 100px;
    left: 200px;
}
#d1{
    border: 1px dotted #000;
}
#d2{
    border: 1px solid #000;
    background-color: #f00;
    opacity: 0.5;
    /*2D变换之缩放*/
    transform: scale(0.8,0.5);    /*缩小*/
    /*transform: scale(1.2);    放大*/
}

3、旋转：围绕着一个圆心(转换原点)发生旋转的操作

函数：rotate(nxdeg)

n：符号，可正(顺时针)可负(逆时针)

x：旋转角度的数值

deg:角度单位

注意：旋转是连同坐标轴一起转

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3-2D变换之旋转</title>
 6     <link rel="stylesheet" href="demo07.css">
 7 </head>
 8 <body>
 9     <div id="d1"></div>
10     <div id="d2">Web前端</div>
11 </body>
12 </html>

 1 @charset "utf-8";
 2 
 3 div{
 4     width: 200px;
 5     height: 200px;
 6     position: absolute;
 7     top: 100px;
 8     left: 200px;
 9 }
10 #d1{
11     border: 1px dotted #000;
12 }
13 #d2{
14     border: 1px solid #000;
15     background-color: #f00;
16     opacity: 0.5;
17     /*定义新原点*/
18     transform-origin: 100% 100%;
19     /*2D变换之旋转*/
20     transform: rotate(30deg);
21 }

4、倾斜：让元素围绕着x轴或y轴，按照一定的角度产生倾斜效果

函数：skew(nxdeg)

单向缩放函数：skewX(),skewY()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3-2D变换之倾斜</title>
 6     <link rel="stylesheet" href="demo08.css">
 7 </head>
 8 <body>
 9     <div id="d1"></div>
10     <div id="d2">Web前端</div>
11 </body>
12 </html>

 1 @charset "utf-8";
 2 
 3 div{
 4     width: 200px;
 5     height: 200px;
 6     position: absolute;
 7     top: 100px;
 8     left: 200px;
 9 }
10 #d1{
11     border: 1px dotted #000;
12 }
13 #d2{
14     border: 1px solid #000;
15     background-color: #f00;
16     opacity: 0.5;
17     /*2D变换之倾斜*/
18     transform: skew(45deg,15deg);
19 }

（二）3D转换

元素可以沿着z轴，发生各种转换的效果

1、属性

perspective：模拟人眼到3D视图的距离，取值为数值,以px为单位

意义：

1、定义距离

2、标识元素可以完成3D转换

注意：该属性要设置在父元素上。即设置完成后，该元素的子元素能够发生3D转换，自身元素是不可以的。

浏览器兼容性：

-webkit-perspective

-moz-perspective

-o-perspective

2、3D - 位移

函数：translateZ(z),translate3D(x,y,z)

3、3D - 旋转

函数：

rotateX(deg)

rotateY(deg)

rotateZ(deg)

rotate3D(x,y,z,deg)

x,y,z取值为0和1,0表示该轴不选择，1表示该轴按照deg的角度进行旋转

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3-3D变换之旋转</title>
 6     <link rel="stylesheet" href="demo09.css">
 7 </head>
 8 <body>
 9     <div id="parent">
10         <div id="son">Better late than never.</div>
11     </div>
12 </body>
13 </html>

 1 @charset "utf-8";
 2 
 3 #parent{
 4     width: 300px;
 5     height: 300px;
 6     border: 1px solid #ddd;
 7     padding: 10px;
 8     margin: 80px 0 0 150px;
 9     /*设置子级元素，允许发生3D转换*/
10     perspective: 100px;
11     -webkit-perspective: 100px;
12 }
13 #son{
14     text-align: center;
15     width: 200px;
16     height: 200px;
17     line-height: 200px;
18     margin: auto;
19     border: 1px solid #000;
20     background-color: #ddd;
21     margin-top: 50px;
22     /*3D旋转*/
23     transform: rotateX(45deg); /*x轴旋转*/
24     /*transform: rotateY(30deg);*/ /*y轴旋转*/
25     /*transform: rotateZ(60deg);*/ /*Z轴旋转*/
26     transform: rotate3d(1,1,1,30deg); /*整体旋转*/
27 }

二、过渡：元素的一个状态到另一个状态的平缓过渡

1、过渡相关属性(要素)

a、过渡属性：transition-property

能够实现过渡效果的CSS属性:

颜色：文本颜色，背景颜色

取值为数值：宽度、高度、字体大小

转换属性：transform

渐变属性：background:linear-gradient ....

visibility:

阴影：

透明度：

b、过渡时间：transition-duration

整个过渡的效果将在多长时间内完成，以秒(s)或毫秒(ms)作为单位

注意：默认值为0，整个过渡中，必须要设置transition-duration属性，否则没有过渡效果

c、过渡时间曲线函数：transition-timing-function

取值：

ease：默认值，慢速开始，快速变快，慢速结束

linear：匀速

ease-in：慢速开始，加速效果

ease-out：快速开始，减速效果

ease-in-out：慢速开始和结束，中间先加速再减速

d、过度的延迟：transition-delay

过渡效果什么时候开始，以秒(s)或毫秒(ms)作为单位

e、过渡的综合属性：

transition：property duration timing-function delay

将以上四个过渡属性放在一起，后面两个可以省略

2、触发过渡效果

a、用户的行为(点击、悬浮)

b、:hover, :active ...

3、过渡属性定义在什么地方

div{

width: 100px;

}

div:hover{

width: 300px;

}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>过渡</title>
 6     <style>
 7         #d1{
 8             width: 100px;
 9             height: 30px;
10             background-color: #bfb;
11             /*定义过渡效果*/
12             /*在此处定义过渡效果，恢复时仍然有效果*/
13             /*transition-property: width;
14             transition-duration: 1s;
15             transition-timing-function: linear;
16             transition-delay: 100ms;*/
17         }
18         #d1:hover{
19             width: 300px;
20             height: 30px;
21             background: #bfb;
22             /*定义过渡效果*/
23             transition: width 1s ease-in 100ms;
24         }
25         img{
26             /*若将过渡效果定义在此处，则恢复时依然能看到效果            */
27         }
28         img:hover{
29             transform: translate(200px) rotate(720deg);
30             transition: transform 1s linear 100ms;
31         }
32     </style>
33 </head>
34 <body>
35     <div id="d1"></div>
36     <img src="Images/star.jpg">
37 </body>
38 </html>

过渡+3D旋转效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡+3D旋转</title>
    <style>
        #parent{
            width: 200px;
            height: 200px;
            padding: 50px;
            border: 1px solid #ddd;
            perspective: 100px;
            margin: 10px auto;
        }
        #son{
            width: 100px;
            height: 100px;
            background-color: #ccc;
            border: 1px solid #ddd;
            margin: 30px auto;
            transition: transform 5s linear 2s;
        }
        #son:hover{
            transform: rotate3d(1,1,1,360deg);
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="son">360°旋转</div>
    </div>
</body>
</html>

三、动画

1、在多个状态之中，做平缓过渡的效果

2、浏览器兼容性

-webkit- 谷歌

-moz- 火狐

-o- 欧鹏

3、创建使用动画步骤

A、声明动画

a、起名

b、使用 @keyframes 声明动画的关键帧

关键帧：特殊时间点上的状态

B、使用动画

属性：animation

通过以上属性调用动画的名称

设置相关操作

4、声明动画

通过 @keyframe 声明动画

语法：@keyframes 动画名称

{

from | 0%{

//动画开始的状态，CSS属性

width:0px;

}

[percent{

//动画的中间状态

}]

10%{

width:10px;

}

20%{

width:20%;

}

to | 100%{

//动画结束的状态

width:100px;

}

5、调用动画

属性

a、animation-name：动画名称

b、animation-duration：动画完成一个周期所需要的时间(s|ms为单位)

c、animation-timing-function：动画执行过程中的时间速度曲线函数

取值：ease,linear,ease-in,ease-out,ease-in-out

d、animation-delay：播放动画之前的延迟

e、animation-iteration-count：动画播放次数

取值：

定数值：播放指定次数

infinite：无限次

f、animation-direction：动画播放方向

取值：

normal：正常，从头到尾

alternate：轮播，在奇数次上正向播放，在偶数次上逆向播放

g、animation：动画的综合属性

animation：name duration timing-function delay iteration-count direction;(后四个可省略)

h、animation-fill-mode：动画播放前后元素的状态

取值：

none：默认，不改变默认行为

forwards：动画完成后，保持在最后一个帧的状态

backwards：动画显示之前，保持在第一个关键帧的状态

both：结合了forwards和backwards的状态

i、animation-play-state：设置动画播放状态

取值：

paused：暂停

running：播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画练习 - 钟表</title>
    <style>
        #circle{
            width: 500px;
            height: 500px;
            border: 3px solid #00f;
            border-radius: 50%;
            margin: auto;
        }
        #hour{
            float: left;
            height: 125px;
            border: 4px solid #bbf;
            position: relative;
            top: 125px;
            left: 250px;
            transform-origin: 0 125px;
            animation: hours 3600s linear 0s infinite;
        }
        #second{
            float: left;
            height: 200px;
            border: 2px solid #00f;
            position: relative;
            top: 54px;
            left: 244px;
            transform-origin: 0 200px;
            animation: seconds 60s linear 0s infinite;
        }
        /*声明动画*/
        @keyframes hours{
            from{
                transform: rotate(0deg);
                /*transform-origin: 0 125px;*/
            }
            25%{
                transform: rotate(90deg);
            }
            50%{
                transform: rotate(180deg);
            }
            75%{
                transform: rotate(270deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
        @keyframes seconds{
            from{
                transform: rotate(0deg);
                /*transform-origin: 0 200px;*/
            }
            25%{
                transform: rotate(90deg);
            }
            50%{
                transform: rotate(180deg);
            }
            75%{
                transform: rotate(270deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div id="circle">
        <b id="hour"></b>
        <b id="second"></b>
    </div>    
</body>
</html>