CSS动画,2D和3D模块

CSS3提供了丰富的动画类属性,使我们可以不通过flash甚至JavaScript,就能实现很多动态的效果。它们主要分为三大类:transform(变换),transition(过渡),animation(动画)。其中transform又分为2D变换和3D变换,它赋予了我们不通过专业设计软件制作平面或者立体图形的能力。

 

一  过渡

 

  通过给元素设置transition属性设置它的过渡效果。过渡实际定义的是元素从一种状态变成另一种状态的过程,比如宽度从100px变成300px,背景颜色从red变成orange等等。

 1 div{
 2     width:200px;
 3     height:200px;
 4     background-color:red;
 5     transition-property:width,background-color;
 6     /*该属性指定需要变换的元素属性,不同属性用逗号隔开*/
 7     transition-duration:1s;
 8     /*该属性指定整个过程花费的时间,如需单独为每个变化的属性设置时间,请使用逗号隔开*/
 9     transition-timing-function:ease;
10     /*该属性设置变化的速度曲线,默认值即是ease,表示慢-快-慢,还有几个其他的取值:linear,匀速;ease-in,慢-快,ease-out,快-慢,ease-in-out,慢-快-慢,肉眼效果和ease相似*/
11     transition-delay:1s;
12     /*延迟时间*/
13 }  

  元素的属性设置好以后,需要某些操作触发了指定属性的变化才能看到效果,必如:hover,或者JS事件。

  另外,transition实际是一个复合属性,多个属性过渡可以简写:

1 div{
2     width:200px;
3     height:200px;
4     transition:width 2s 1s,background-color 2s;
5     /*transition-property和transition-duration是必须的,另外两个是可选的*/
6 }
7 div:hover{
8     width:400px
9 }

  当有多个属性需要设置过渡,并且持续事件,速度曲线,延迟时间均相同时,你可以如下简写:

1 div{
2     /*some code*/
3     transform:all 2s;
4     /*所有发生变化的属性都设置过渡效果*/
5 }

 

二  动画

 

  动画其实和过渡一样,都是用来给元素设置动态效果的,不同的是,过渡需要人为的触发才能被执行,而这里将要讲解的动画不需要人为触发。

  在给元素设置动画之前,我们首先应该创建一个动画效果,即开始是什么状态,结束是什么样的状态。

1 @keyframes sport{/*sport是动画的名称,可以自定义*/
2     from{
3         width:200px;
4     }
5     to{
6         width:400px;
7     }
8 /*除了使用from...to的方式,你还可以使用百分比创建更加丰富的动画过程,0%表示开始时,100%表示结束时*/
9 }

  创建好动画之后,你就可以为元素设置诸如动画持续时长,速度曲线,重复次数等属性了。

 1 div{
 2     animation-name:sport;
 3     /*规定元素需要执行的动画名称,即使用@keyframs创建的那个*/
 4     animation-duration:5s;
 5     /*规定动画完成一个周期所花费的秒或毫秒*/
 6     animation-timing-function:ease;
 7     /*规定动画的速度曲线,可选值同过渡*/
 8     animation-delay:3s;
 9     /*规定动画延迟时间*/
10     animation-iteration-count:5;
11     /*规定动画被播放的次数,infinite表示一直循环播放*/
12     animation-direction:alternate;
13     /*规定动画是否在下一周期逆向地播放,normal是默认取值,表示不逆向播放,逆向播放一次也会在animation-iteration-count属性值中减1*/
14     animation-play-state:paused;
15     /*规定动画是否正在运行或暂停,默认值是running,表示正在运行*/
16     animation-fill-mode:forwards;
17     /*规定动画结束后元素的状态,forwards,保持动画停止时的状态,backwards,回到开始时的状态,none,保持默认。一般没有指定该属性时,动画结束后会回到开始时的状态。不同浏览器可能有不同表现*/
18 }

 

三  2D变换

 

  通过给元素设置transform属性,可以对元素进行2D变换。很多地方把transform翻译成转换,该单词在英语中的含义是使改变,使变形。我更倾向于把它翻译成变换,通过CSS变换,我们可以对元素进行移动、缩放、转动、拉伸等操作。

 

  1,translate(x,y) 

1 div{
2     transform:translate(50px,100px);
3 }
4 /*div在水平方向移动50px,垂直方向移动100px*/

  translate方法接收两个参数,分别表示在水平和垂直正方向上的偏移量,可以接收负值,表示向反方向偏移。

 

  2,rotate(deg)

1 div{
2     transform:rotate(30deg);
3 }
4 /*顺时针方向旋转元素30度*/

  rotate方法接收一个参数,表示元素旋转的角度,可以接收负值,表示逆时针方向旋转。rotate方法实际是通过修改元素的坐标系来达到旋转元素的目的,比如:

1 div{
2     transform:rotate(45deg) translate(50px,0);
3     /*多属性复合形式写法*/
4 }
5 /*元素先旋转45度,然后向浏览器x轴正方向偏下45度的方向移动50px*/

  默认情况下,元素都是以自己的中心点为圆心旋转,我们可以通过transform-origin属性修改该参考点。

1 div{
2     width:200px;
3     height:200px;
4     transform:rotate(30deg);
5     transform-origin:0px 0px;/*以左上角为圆点旋转*/
6     /*取值200px 0px即以右上角为圆点旋转。改属性取值也可以是百分比或关键字。top,botton,left,right,center*/
7 }

  

  3,scale(x,y)

1 div{
2     transform:scale(2,3);
3 }
4 /*元素宽度放大2倍,高度放大3倍*/

  scale方法接收两个参数,分别表示元素宽高需要缩放的比例,如果参数介于0到1之间则表示缩小,如果小于0,实际效果相当于翻转元素,感兴趣的朋友可以自行测试,观察效果。

  

  4,skew(x,y)

1 div{
2     transform:skew(30deg,30deg);
3 }
4 /*元素在水平和垂直方向均倾斜30度*/

  skew方法接收两个参数,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。

 

四  3D变换

 

  要想使元素以3D效果呈现,你可以给元素的父元素添加transform-style属性

1 .father{
2     transform-style:preserve-3d;
3 }
4 .son{
5     /*some code*/
6 }

  transform-style属性的默认值是flat,即平面的意思。通过设置其值为preserve-3d即可让子元素以3D模式呈现。

  事实上,我们是通过配合使用rotate方法,最终实现3D立体效果的。

  我们知道,在2D空间,坐标轴只有x和y两根轴,而在3D空间,一共有x,y,z三根轴。我们上面讲解的rotate方法实际上都是围绕z轴在旋转,这也是该方法的默认方式。另外,其实我们还可以通过rotateX(),rotateY(),改变元素默认的旋转轴向。改变旋转轴向配合perspective属性使用效果更佳。

 1 .father{
 2     perspective:500px;
 3     /*perspective属性取值是一般是一个像素值,设置后可以实现旋转后元素近大远小的效果*/
 4 }
 5 .son{
 6     width:200px;
 7     height:200px;
 8     transform:rotateX(45deg);
 9 }
10 /*注意,perspective属性需要设置在旋转元素的祖先元素上,通常我们把它设置在其父元素上。*/

  下面是两个3D立方体的示例代码:

  HTML部分:

 1 <div class="D3">
 2     <ul>
 3         <li>1li>
 4         <li>2li>
 5         <li>3li>
 6         <li>4li>
 7         <li>5li>
 8         <li>6li>
 9     ul>
10     <ul>
11         <li>1li>
12         <li>2li>
13         <li>3li>
14         <li>4li>
15         <li>5li>
16         <li>6li>
17     ul>
18 div>

  CSS部分:

 1 body{
 2     background-color: #ccc;
 3     perspective: 800px;
 4 }
 5 .D3{
 6     width:550px;
 7     height: 200px;
 8     margin:100px auto;
 9 }
10 @keyframes sport{
11     from{
12         transform: rotateX(0deg) rotateY(0deg);
13     }
14     to{
15         transform: rotateX(360deg) rotateY(360deg);
16     }
17 }
18 .D3 ul{
19     width: 200px;
20     height: 200px;
21     position: relative;
22     transform-style: preserve-3d;
23     transform: rotateX(0deg) rotateY(0deg);
24     animation: sport 10s linear infinite alternate;
25     display: inline-block;
26     margin-left:50px;
27 }
28 .D3 ul li{
29     list-style: none;
30     width:200px;
31     height: 200px;
32     position: absolute;
33     opacity: 0.3;
34     font-size: 100px;
35     line-height: 200px;
36     text-align: center;
37 }
38 .D3 ul li:nth-child(1){
39     background-color: red;
40     transform:translateZ(100px);
41 }
42 .D3 ul li:nth-child(2){
43     background-color: blue;
44     transform: rotateX(90deg) translateZ(100px);
45 }
46 .D3 ul li:nth-child(3){
47     background-color: yellow;
48     transform: rotateX(180deg) translateZ(100px);
49 }
50 .D3 ul li:nth-child(4){
51     background-color: pink;
52     transform: rotateX(270deg) translateZ(100px);
53 }
54 .D3 ul li:nth-child(5){
55     background-color: purple;
56     transform: rotateY(90deg) translateZ(-100px);
57 }
58 .D3 ul li:nth-child(6){
59     background-color: green;
60     transform: rotateY(90deg) translateZ(100px);
61 }
62 /*还记得吗?rotate方法是通过改变坐标系来达到旋转的目的哦!*/

 

五  transform对其他元素的影响

 

  1,提高显示优先级

  我们知道,在标准文档流中,如果使用负的margin值可以使一个元素覆盖在另一个元素上,正常情况下是写在后面的元素覆盖前面的。但是设置了transform属性的元素会覆盖其他元素。

 1 .top{
 2     width: 100px;
 3     height: 100px;
 4     background-color: red;
 5     transform: rotate(0deg);
 6 }
 7 .bottom{
 8     width: 100px;
 9     height: 100px;
10     background-color: blue;
11     margin-top:-50px;
12 }
13 /*红色的会覆盖蓝色的div 50px*/

  

  2,改变fixed定位的相对对象

  通常情况下,使用了position:fixed;属性的元素都会相对浏览器窗口定位,不受滚动条的影响。但是当我们给其父元素设置了transform属性后,这一状况被改变了。

 1 .father{
 2     width: 500px;
 3     height: 500px;
 4     margin-left: 100px;
 5     margin-top: 100px;
 6     border: 1px solid #000;
 7     transform: rotate(0deg);
 8 }
 9 .son{
10     position: fixed;
11     top: 50px;
12     left:50px;
13     width: 100px;
14     height: 100px;
15     background-color: red;
16 }
17 /*.son不再以浏览器窗口作为参考点,而是以其父元素.father作为按参考点了*/

  

  3,改变absolute定位元素的宽度

  以前,如果一个元素设置了绝对定位,并且宽度设置为100%,那么该元素的实际宽度是第一个有定位属性的祖先元素的宽度,没有则是body的宽度。现在,如果第一个有定位属性的祖先元素和绝对定位元素之间,有一个设置了transform属性的元素,那么绝对定位元素的宽度继承链将在该transform祖先元素处被截断,最终绝对定位的元素宽度将继承自transform元素。

 1 .grand{
 2     width: 500px;
 3     height: 500px;
 4     border: 1px solid #000;
 5     position: absolute;
 6 }
 7 .father{
 8     width: 100px;
 9     height: 100px;
10     background-color: red;
11     transform:rotate(0deg);
12 }
13 .son{
14     width: 100%;
15     height: 200px;
16     position: absolute;
17     background-color: yellow;
18 }
19 /*.son的宽度不是500px,而变成了100px*/

  

  写在最后,transform是CSS3才引入的属性,不同浏览器对它的实现也可能有差异,上面介绍的内容并不能保证在所有浏览器上均有相同的表现,具体情况请大家自行测试(我仅在Chrome 76测试)。

 

你可能感兴趣的