快来看看:CSS3实现动画的三种方式

2023-08-23 0 250

原副标题:快来看一看:CSS3同时实现动画电影的四种形式

css动画电影是原素从一类式样过渡阶段到另一类式样的操作过程。常用的动画电影效用许多,比如说,移位、转动、翻转等,css同时实现动画电影的形式有下列三种:

1、transition:同时实现蓝紫色动画电影

2、transform:同时实现变革动画电影

3、animation:同时实现自订动画电影

一、同时实现蓝紫色动画电影

1. 句法

transition:property duration timing-function delay;

2.子特性如是说

transition-property:核对须要变动的css特性;

transition-duration:顺利完成过渡阶段效用须要的天数基层单位(s或是ms);

transition-timing-function:选定过渡阶段表达式,明确规定效用的速率抛物线;

transition-timing-function具体内容的值能看上面的表单:

快来看看:CSS3实现动画的三种方式

transition-delay:动画电影效用的延后促发天数(基层单位ms或是s)。

并并非大部份特性都能过渡阶段,比如说display: none 到 display: block。

3.上面让我们看一个完整的例子

html代码如下:

<div class=”box”></div>

css代码如下:

<style>

.box{

width: 200px;

height: 200px;

background: #6697ea;

transition-property: width,height,background-color,border-radius;

transition-duration: 2s;

transition-timing-function: ease-in;

transition-delay: 500ms;

/*简写*/

/*transition: all 2s ease-in 500ms;*/

}

.box:hover{

width: 300px;

height: 300px;

background: #cbb3d5;

border-radius: 50%;

}

</style>

效用如下:

快来看看:CSS3实现动画的三种方式

二、同时实现变革动画电影

transform特性应用于2D 或 3D转换。该特性允许我们能够对原素进行转动、翻转、倾斜、移动这四类操作。

1. 转动(rotate):主要分为2D转动和3D转动。

1.1 2D转动

transform:rotate(45deg); //顺时针转动45度

1.2 3D转动

围绕原地到(x,y,z)的直线进行3D转动

transform:rotate(x,y,z,angle);

x,y,z:分别表示 X、Y 和 Z 轴方向,都不能省略; angle:设置对象设置对象的转动角度,不能省略; rotateX(angle),沿着X轴进行3D转动;rotateY(angle),沿着Y轴进行3D转动;rotateZ(angle),沿着Z轴进行3D转动; 一个参数 “角度”,基层单位 deg 为度的意思,正数为顺时针转动,负数为逆时针转动。

快来看看:CSS3实现动画的三种方式

2. 翻转(scale):一般用于原素的大小收缩设定。主要分为2D翻转和3D翻转。

2.1 2D翻转

transform:scale(0.5);

transform:scale(0.5,2);

一个参数时:表示水平和垂直同时翻转该倍率。 两个参数时:第一个参数选定水平方向的翻转倍率,第二个参数选定垂直方向的翻转倍率 。

2.2 3D缩放

transform:scale3d(x,y,z);

transform:scaleX(x);

transform:scaleY(y);

transform:scaleZ(z);

x,y,z为翻转比例。

3. 倾斜(skew):主要用于对原素的式样倾斜。

transform:skew(30deg);

transform:skew(30deg,30deg);

一个参数时:表示水平方向的倾斜角度。 两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度 。 skew 的默认原点 transform-origin 是这个物件的中心点。

4.移动(translate):主要用于将原素移动。主要分为2D转动和3D转动。

4.1 2D移动

transform:translate(45px);

transform:translate(45px,150px);//沿着X轴和Y轴同时移动

一个参数时:表示水平方向的移动距离。 两个参数时:第一个参数表示水平方向的移动距离,第二个参数表示垂直方向的移动距离。

4.2 3D移动

transform:translateX(45px);//仅仅在X轴移动

transform:translateY(45px);//仅仅在Y轴移动

transform:translateZ(45px);//仅仅在Z轴移动

transform:translate3d(x,y,z);//在X,Y,Z轴上都移动

transformZ的直观表现形式是大小变动,实质是XY平面相对于视点的远近变动(说远近就一定会说到离什么参照物远或近,在这里参照物是perspective属性)。 x和y能是长度值,也能是百分比,百分比是相对于其本身原素水平方向的宽度和垂直方向的高度;z只能设置长度值。

5.基准点 transform-origin

在使用 transform 方法进行文字或图像的变形时,是以原素的中心点为基准点进行的 。使用 transform-origin 特性,能改变变形的基准点 。 用法: transform-origin: 10px 10px; 表示相对左上角原点的距离,基层单位 px,第一个参数表示相对左上角原点水平方向的距离,第二个参数表示相对左上角原点垂直方向的距离; 两个参数除了能设置为具体内容的像素值,其中第一个参数能选定为 left、center、right,第二个参数能选定为 top、center、bottom。

6.一般配合transition过度使用。transform不支持inline原素,使用之前把它变为block。

为方便演示,能看如下效用:

快来看看:CSS3实现动画的三种方式

三、同时实现自订动画电影

为了同时实现更灵活的动画电影效用,css3还提供了自订动画电影的功能,关键帧动画电影@keyframes通常搭配 animation 特性一起使用,首先学习怎么定义关键帧动画电影

1.@keyframes 规则

@keyframes 规则用于创建动画电影 。在 @keyframes 中明确规定某项 CSS 式样, 就能创建由当前式样逐渐改为新式样的动画电影效用 。 必须定义动画电影的名称和时长 。如果忽略时长, 则动画电影不会允许, 因为默认值是 0。 请用百分比来明确规定变动发生的天数, 或用关键词 “from” 和 “to”, 等同于 0% 和 100% 。

2.animation特性

name:须要绑定到选择器的keyframe名称。 duration:顺利完成该动画电影须要花费的天数,秒或毫秒。 timing-function:跟transition-linear一样。 delay:设置动画电影在开始之前的延后。 iteration-count:设置动画电影执行的次数,infinite为无限次循环。 direction:是否轮询反向播放动画电影。normal,默认值,动画电影应该正常播放;alternate,动画电影应该轮流反向播放。

3.上面让我们看一个完整的例子

html代码如下:

<div class=”head”>

<div class=”eyes-one”></div>

<div class=”eyes-two”></div>

<div class=”smile”></div>

</div>

css代码如下:

.head {

-webkit-animation-name: up-down;

animation-name: up-down;

-webkit-animation-duration: 1s;

animation-duration: 1s;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

width: 50.2vmin;

height: 50.2vmin;

background: #ffffff;

overflow: hidden;

border-radius: 50%;

background: #4b96ca;

}

.head .eyes-one, .head .eyes-two {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

width: 14.5vmin;

height: 14.5vmin;

background: white;

border-radius: 50%;

overflow: auto;

position: absolute;

}

.head .eyes-one {

-webkit-animation-name: bounce;

animation-name: bounce;

-webkit-animation-duration: 1.4s;

animation-duration: 1.4s;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

top: -9.5vmin;

left: 2.5vmin;

}

.head .eyes-one:before {

content: “”;

position: absolute;

width: 9.2vmin;

height: 9.2vmin;

background: #1f2033;

top: 1.8vmin;

left: 0.9vmin;

border-radius: 50%;

}

.head .eyes-two {

-webkit-animation-name: bounce;

animation-name: bounce;

-webkit-animation-duration: 1.4s;

animation-duration: 1.4s;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

top: -9.5vmin;

left: -31.5vmin;

}

.head .eyes-two:before {

content: “”;

position: absolute;

width: 9.2vmin;

height: 9.2vmin;

background: #1f2033;

top: 1.8vmin;

left: 3.9vmin;

border-radius: 50%;

}

.head .smile {

-webkit-animation-name: bounces;

animation-name: bounces;

-webkit-animation-duration: 1.4s;

animation-duration: 1.4s;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

width: 8vmin;

height: 2vmin;

background: none;

left: -13.5vmin;

top: 11.8vmin;

border-bottom: 1vmin solid black;

border-left: 1vmin solid black;

border-right: 1vmin solid black;

border-radius: 0 0 15vmin 15vmin;

}

@-webkit-keyframes up-down {

0% {top: 2vmin;}

25% {top:0vmin;}

50% {top: 2vmin;}

75% {top: 0vmin;}

100% {top: 2vmin;}

}

@keyframes up-down {

0% {top: 2vmin;}

25% {top:0vmin;}

50% {top: 2vmin;}

75% {top: 0vmin;}

100% {top: 2vmin;}

}

@-webkit-keyframes bounce {

0% {top: -2vmin;}

25% {top: -12vmin;}

50% {top: -2vmin;}

75% {top: -12vmin;}

100% {top: -2vmin;}

}

@keyframes bounce {

0% {top: -2vmin;}

25% {top: -12vmin;}

50% {top: -2vmin;}

75% {top: -12vmin;}

100% {top: -2vmin;}

}

@-webkit-keyframes bounces {

0% {top: 15vmin;}

25% {top: 5vmin;}

50% {top: 15vmin;}

75% {top: 5vmin;}

100% {top: 15vmin;}

}

@keyframes bounces {

0% {top: 15vmin;}

25% {top: 5vmin;}

50% {top: 15vmin;}

75% {top: 5vmin;}

100% {top: 15vmin;}

}

总结

其实大家看完会发现,css3动画电影能同时实现许多有趣的效用,有兴趣的同学能试着去写写

责任编辑:

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务