导图社区 Web前端基础Day17
这是一个关于Web前端基础Day17的思维导图,包含transform 转换(变化)、animate动画库等。
编辑于2024-05-01 00:08:22Day17
1、animation动画 自定义动画 | 关键帧动画 | 帧动画
★运用: 步骤一:定义动画: @keyframes 动画名{ 动画关键步骤{ 样式描述;} } 步骤二:使用(谁使用添加给谁),值与值空格隔开 animation: name【名字】 duration【动画时间 | 完成时间】 timing-function【速度曲线 | 时间曲线】 delay【延迟时间】 iteration-count【播放次数】 direction【动画播放的方向】 fill-mode【规定动画停止后的状态】 play-state;【检索或设置动画的状态】
1.1、概述 通过 CSS3,我们能够创建动画,如果要在 CSS3 中创建动画,需要使用 @keyframes 规则。
1.2、定义动画 关键帧 @keyframes 规则通过在动画序列中定义关键帧的样式来控制CSS动画序列中的中间步骤。 每个 @keyframes 规则包含多个关键帧,也就是一段样式块语句,每个关键帧有一个百分比值作为名称,代表在动画进行中,在哪个阶段触发这个帧所包含的样式。 from,to表示开始、结束状态,也可以使用0%,100%定义。
语法: @keyframes 动画名{ 动画关键步骤{ 样式描述; } }
例1: @keyframes slidein { from { left:0; } to { left:50px; } }
例2: @keyframes slidein { 0% { left:0;} 50%{ left:50px; } 100% { left:100px; } }
注意: 如果一个关键帧规则没有指定动画的开始或结束状态,浏览器将使用元素的现有样式作为起始/结束状态。 如果某一个关键帧出现了重复的定义,且重复的关键帧中的 CSS 属性值不同,则以最后一次定义的属性为准。
1.3、动画属性
1.3.1、animation-name 作用:指定元素应用动画系列,每个名称代表一个由@keyframes定义的动画序列。 取值: 默认none,规定无动画效果 @keyframes定义动画名称
1.3.2、animation-duration 属性 作用:定义动画持续的时间需要多少秒(s)或毫秒(ms)完成 取值: 单位:以秒或毫秒计 默认值为0,需要设置该属性,否则不会播放动画
1.3.3、animation-timing-function 作用:定义动画的时间函数 取值: linear 动画从头到尾的速度是相同的 ease 默认值。动画以低速开始,然后加快,在结束前变慢 ease-in 动画以低速开始 ease-out 动画以低速结束 ease-in-out 动画以低速开始和结束
贝赛尔曲线:https://cubic-bezier.com
1.3.4、animation-delay 作用:定义置动画在启动前的延迟间隔 取值: 以秒或毫秒计 默认值是 0 允许负值(-2s 使动画马上开始,但跳过 2 秒进入动画)
1.3.5、animation-iteration-count 作用:定义动画播放次数 取值: n 定义动画播放次数的数值 infinite 规定动画应该无限次播放
1.3.6、animation-direction 作用:定义动画运动的方向 取值: normal:正常方向 reverse:反方向运行 alternate:动画先正常运行再反方向运行,并持续交替运行 alternate-reverse:动画先反运行再正方向运行,并持续交替运行
1.3.7、animation-play-state 作用:检索或设置对象动画的状态 取值: running:运动 paused: 暂停
1.3.8、animation-fill-mode 作用:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式 取值: none默认值 forwards 动画进场前停在开始状态 backwards 动画结束后停在结束状态 both 以上两者
1.3.9、animation简写 animation 属性用来指定一组或多组动画,每组之间用逗号相隔。 值与值空格隔开 animation: name duration timing-function delay iteration-count direction fill-mode play-state; 默认值:none 0 ease 0 1 normal 多组值语法:每组之间用逗号相隔 注意:两个时间,前面时间持续时间,后面的时间延迟时间
2、transform 转换(变化)
2.1、概述 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行位移、旋转、缩放或倾斜。初始值是none。
★2.2、2D转换
2.2.1、概述 什么是2d转换 使用CSS3 2D变换功能,可以对二维空间中的元素执行基本的变换操作,例如移动,旋转,缩放和倾斜。 注:变换后的元素不会影响周围的元素,但可以像绝对定位的元素一样将它们重叠。但是,变换后的元素在其默认位置(未变换)仍会在布局中占用空间。
2d位移:translate(x,y) 写法: transform:translate(x,y) transform:trnaslateX(x) transform:trnaslateY(y) ★/* 执行顺序(从后往前):先执行旋转,在位移 */ transform: translateX(500px) rotate(45deg); ★/* 先执行位移时会收到旋转角度的影响 */ transform: rotate(45deg) translateX(500px) ;
取值: px %:相对于自身来计算
应用:绝对居中(定位:margin负值|margin:auto; 弹性盒; 定位+位移)
2d缩放:scale(x,y) 写法: transform:scale(x,y) transform:scaleX(x) transform:scaleY(y)
取值: 0-1之间表示缩小 大于1表示放大 负值:先进行元素翻转,再放大缩小元素
2d倾斜:skew(x,y) 写法: transform:skew(x,y) transform:skewX(x) transform:skewY(y)
取值:单位是deg
2d旋转: transform:rotate()
取值:单位是deg 正值是顺时针旋转,负值是逆时针旋转
注意: 变换后的元素不会影响周围的元素,但可以像绝对定位的元素一样将它们重叠。但是,变换后的元素在其默认位置(未变换)仍会在布局中占用空间。 行级元素不支持
2、3变换基点位置: transform-origin
概述:transform-origin属性 定义变形原点(基点)
默认基点位置是在中心点 50% 50% transform-origin:水平位置 垂直位置; 取值: px %: 左上角是0% 0% 右下角是100% 100% 关键词:水平 left right center 垂直 top bottom center 注: 如果只给一个,另一个是center
2.4、3d变换
2.4.1、什么是3d转换 定义元元素在三维空间移动、缩放、旋转
3d旋转 1、transform: rotateX(angle);- 作用:沿着 X 轴旋转。 2、transform:rotateY() 作用:沿着 y 轴旋转 3、transform:rotateZ() 作用:沿Z轴旋转 - 取值: - 角度:单位deg - 正值顺时针,负值逆时针
3d位移 translateZ( ) 作用:沿Z轴位移 取值:px 不允许百分比值
3d缩放:scaleZ( ) 作用:沿Z轴缩放 取值: 默认值为1 使用0~1之间的值缩小元素, 使用超过1的值放大元素。
★3d空间:transform-style 指定嵌套元素是怎样在三维空间中呈现 取值: flat子元素将不保留其 3D 位置。 preserve-3d 子元素将保留其 3D 位置。 注:具有两个作用,首先使子元素具有透视效果,其次使子元素保留父元素的3D位置如果不需要嵌套3D元素,就不需要这个属性
★ perspective属性【给父元素设置】 作用:定义 3D 元素距视图的距离,用来设置用户和元素3D空间Z平面之间的距离 取值: number 元素距离视图的距离,以像素计。 none 默认值。与 0 相同。不设置透视。 注意:当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身
3d函数【3d简写】
3d位移: tranlate3d(X,Y,Z) ---- translate(100px,200px,300px) translateX(100px) translateY(200px) translateZ(300px)
3d缩放: Scale3d(x,y,z) ---- Scale3d (1.5,2,0.5) scaleX(1.5) scaleY(2) scaleX(0.5)
3d旋转: rotate3d(tx,ty,tz,角度) tx,ty,tz 矢量值
其中两上为0,另一个值只有0与非0的区别 rotate3d(0,0,1,30deg) 沿Z轴旋转30deg rotateZ(30deg) rotate3d(1,0,0,30deg) 沿X轴旋转30deg rotateX(30deg) rotate3d(0,1,0,30deg) 沿y轴旋转30deg rotateY(30deg)
其中两个不为0,tx,ty,tz相当于倍率 rotate3d(1,1,1,30deg) 沿X轴旋转30deg 沿y轴旋转30deg 沿z轴旋转30deg rotate3d(0.5,1,0,30deg) 沿X轴旋转15deg 沿y轴旋转30deg
3、animate动画库
3.1、简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。借助 animate.css 能够很方便、快速的制作 CSS3 动画效果。 使用动画库不仅可以提升效率,也可以成为我们学习定义各种类型动画的一种方式。
3.2、地址: https://daneden.github.io/animate.css/
3.3、兼容性 只兼容支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。
3.4、使用方法 操作步骤: 1. 引入文件: <link rel="stylesheet" href="animate.min.css"> 2. 添加类名: <div class="box animate__animated animate__wobble animate__delay-2s animate__faster animate__repeat-3"></div> 给元素加上 class 后,刷新页面,就能看到动画效果了。