CSS3 转换、过渡和动画

╰+攻爆jí腚メ 2023-06-05 05:45 7阅读 0赞

一、转换

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>

（二）3D转换

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

1、属性

perspective：模拟人眼到3D视图的距离，取值为数值

意义：

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>

更多专业前端知识，请上 **【猿2048】www.mk2048.com**