1000字范文 > CSS3新增属性——过渡和动画（2D属性 3D动画）

CSS3新增属性——过渡和动画（2D属性 3D动画）

时间：2023-12-03 19:26:50

CSS3

一、过渡

1. 属性

2. 花费时间

3. 运动曲线

4. 何时开始

二、2D属性

2. translate（移动）

2. rotate（旋转）

3. scale（缩放）

4.transform-origin（转换中心点）

综合写法

三、动画

1. 动画的使用

1）.定义动画（keyframes）

2）元素使用动画

2. 动画序列

3. 动画属性

4. 动画属性简写

四、3D动画

1. 三维坐标系

2. 3D移动 translate3d

3. 透视 perspective

4. 3D旋转

5. 3D呈现（transform-style：400px）

CSS3

CSS3的语法是建立在CSS原先版本基础上的，它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。CSS选择器中的大部分并不是在CSS3中新添加的，只是在之前的版本中没有得到广泛的应用。

一、过渡

我们可以在不使用Flash 动画或JavaScript的情况下,当元素从一种样式变换为另一种样时为元素添加效果。

过渡动画:是从一个状态渐渐的过渡到另外一个状态

我们现在经常和:hover 一起搭配使用。

transition: 要过渡的属性花费时间运动曲线何时开始;

1. 属性

想要变化的Css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以

2. 花费时间

单位是秒(必须写单位)比如0.5s

3. 运动曲线

默认是ease (可以省略)

linenr 匀速eare 逐渐慢下来eaer in 加速eaer out减速eae-in- out 先加速后减速

4. 何时开始

单位是秒(必须写单位)可以设置延迟触发，时间默认是0s ( 可以省略)

案例演示：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: pink;transition: all 1s linear .5s;}.box:hover {width: 400px;}</style></head><body><div class="box"></div></body></html>

二、2D属性

transform：实现元素的位移，旋转，缩放等效果

2. translate（移动）

可以改变元素在页面中的位置

transform：translate（x，y）； transform：translateX（n）； transform：translateY（n）；

注意：

定义2D转换中的移动,沿着X和Y轴移动元素translate最大的优点 :不会影响到其他元素的位置translate中的百分比单位是相对于自身的 translate:(50%,50%)对行内标签没有效果

因此，translate可以用来定位中心点

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

移动案例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {position: relative;margin-left: 800px;width: 500px;height: 500px;background-color: pink;}.son {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 200px;height: 200px;background-color: plum;}</style></head><body><div class="box"><div class="son"></div></div></body></html>

2. rotate（旋转）

让元素在二维平面内顺时针或者逆时针旋转

transform：rotate（度数）

rotate里面跟度数，单位是deg比如rotate(45deg)角度为正时,顺时针,负时,为逆时针默认旋转的中心点是元素的中心点

旋转案例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;border: 1px solid pink;margin: 100px auto;overflow: hidden;}div::after {content: '旋转';display: block;width: 100%;height: 100%;background-color: coral;transform: rotate(180deg);transform-origin: left bottom;transition: all 0.5s;}div:hover::after {transform: rotate(0deg);}</style></head><body><div></div></body></html>

3. scale（缩放）

控制元素的缩放

transform：scale（x，y）；

注意其中的x和y用逗号分隔transform:scale(1,1) :宽和高都放大一倍,相对于没有放大transform:scale(2,2) : 宽和高都放大了2倍transform:scale(2) : 只写一个参数,第二个参数则和第一个参数-样,相当于scale(2,2)transform:scale(0.5,0.5) :缩小sacle缩放最大的优势 :可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子

缩放案例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul li {float: left;width: 30px;height: 30px;margin: 10px;border: 1px solid pink;border-radius: 50%;text-align: center;line-height: 30px;list-style: none;cursor: pointer;}ul li:hover {transform: scale(1.5);}</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul></body></html>

4.transform-origin（转换中心点）

transfrom-origin：x y；

注意后面的参数 x和y用空格隔开x y默认转换的中心点是元素的中心点(50% 50%)还可以给x y设置像素或者方位名词( top bottom left right center )

综合写法

transform：translate() rotate() scale() ;

改变顺序回影响转换的效果（先旋转回改变坐标轴的方向）同时有位移和其他属性的时候，记得要将位移放到最前面

三、动画

animation：通过设置多个节点来精确控制一个或一组动画，实现复杂的动画效果。

相较于过渡，可以实现更多变化，控制，连续自动播放等

1. 动画的使用

1）.定义动画（keyframes）

keyframes前面一定要加@

@keyframes move {0% {width: 0px;}100% {width: 200px;}}

2）元素使用动画

/*调用动画*/
animation-name:动画名称;
/*持续时间*/
animation-duration:持续时间;

2. 动画序列

0% 是动画的开始，100%是动画的完成。这样的规则就是动画序列。在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。动画是使元素从一样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比来规定变化发生的时间,或用关键词"from"和"to" ,等同于0%和100%。

3. 动画属性

其中animation-timing-function属性拥有多种属性

linear动画从头到尾的速度是相同的。匀速ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in 动画以低速开始。ease -out 动画以低速结束。ease-in-out动画以低速开始和结束。steps(）指定了时间函数中的间隔数量(步长)

4. 动画属性简写

animation : 动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;
animation: myfirst 5s linear 2s infinite alternate;

简写属性里面不包含 animation-play-state暂停动画: animation-play-state: puased; 经常和鼠标经过等其他配合使用想要动画走回来, 而不是直接跳回来: animation-direction : alternate盒子动画结束后,停在结束位置: animation fill-mode : forwards

动画案例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@keyframes move {0% {transform: translate(0, 0);}25% {transform: translate(1000px, 0);}50% {transform: translate(1000px, 500px);}75% {transform: translate(0, 500px);}100% {transform: translate(0, 0);}}div {width: 100px;height: 100px;background-color: pink;animation: move;animation-duration: 8s;}</style></head><body><div></div></body></html>

四、3D动画

在学习3D动画前我们必须得先了解三维坐标系

1. 三维坐标系

x轴:水平向右

注意: x右边是正值,左边是负值

y轴:垂直向下

注意: y下面是正值,上面是负值

z轴:垂直屏幕

注意:往外面是正值,往里面是负值

2. 3D移动 translate3d

translform:translateX(100px) :仅仅是在x轴上移动 translform:translateY(100px) :仅仅是在Y轴上移动 translform:translateZ(100px) :仅仅是在Z轴上移动(注意: translateZ- 般用px单位 ) transform:translate3d(x,y,z) :其中x、y. z分别指要移动的轴的方向的距离，x,y,z不能省略

3. 透视 perspective

perspective是3D动画中非常重要的一个属性，它可以使我们看到的2D平面呈现出3D立体空间

特点：近大远小

perspective相当于是我们的眼睛，当我们的眼睛离看到的物体近的时候，物体会相较于元的时候大，等同于近视人群喜欢凑近看，因为凑近看呈现的状态大，看的清楚。

透视写在被观察元素的父盒子上

d :就是视距,视距就是一个物体距离人的眼睛到屏幕的距离。z:就是z轴,物体距离屏幕的距离, z轴越大(正值)我们看到的物体就越大。单位：px

4. 3D旋转

让元素在三位平面内沿x，y，z轴或者自定义轴进行旋转

transform:rotateX(45deg) :沿着x轴正方向旋转45度 transform:rotateY(45deg) :沿着y轴正方向旋转45deg transform:rotateZ(45deg) : 沿着Z轴正方向旋转45deg transform:rotate3d(x,y,z,deg) :沿着自定义轴旋转deg为角度(了解即可)

左手准则

左手的手拇指指向x轴的正方向

其余手指的弯曲方向就是该元素沿着x轴旋转的方向

3D旋转案例：

5. 3D呈现（transform-style：400px）

控制子元素是否开启三维立体环境

transform-style: flat 子元素不开启3d立体空间默认的 transform-style: preserve- 3d; 子元素开启立体空间

代码写给父级,但是影响的是子盒子

3D动画案例：

旋转木马

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {perspective: 1000px;}section {position: relative;width: 300px;height: 200px;margin: 100px auto;transform-style: preserve-3d;animation: move 8s linear infinite alternate;}section:hover {animation-play-state: paused;}@keyframes move {0% {transform: rotateY(0deg);}100% {transform: rotateY(100deg);}}section div {position: absolute;width: 100%;height: 100%;}section div:nth-child(1) {transform: translateZ(300px);}section div:nth-child(2) {transform: rotateY(60deg) translateZ(300px);}section div:nth-child(3) {transform: rotateY(120deg) translateZ(300px);}section div:nth-child(4) {transform: rotateY(180deg) translateZ(300px);}section div:nth-child(5) {transform: rotateY(240deg) translateZ(300px);}section div:nth-child(6) {transform: rotateY(300deg) translateZ(300px);}section div img {width: 100%;height: 100%;}</style></head><body><section><div><img src="images/dog.jpg" alt=""></div><div><img src="images/dog.jpg" alt=""></div><div><img src="images/dog.jpg" alt=""></div><div><img src="images/dog.jpg" alt=""></div><div><img src="images/dog.jpg" alt=""></div><div><img src="images/dog.jpg" alt=""></div></section></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。