变换-过渡-动画

1 回顾

1.1 边框

1. 边框圆角border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radiusborder-radius2. 外轮廓outline-styleoutline-widthoutline-coloroutlineoutline-offset

1.2 文本

1. 文本修饰text-decoration-linetext-decoration-styletext-decoration-color text-decoration2. 文本对齐text-align-last3. 文本换行方式white-space4. 文本溢出方式text-overflow5. 文本阴影text-shadow

1.3 渐变

1. 渐变被作为图像使用，往往需要配合 backgorund-iamge css 属性。
2. 线性渐变  linear-gradient()
3. 径向渐变  radial-gradient()
4. 重复渐变   repeating-linear-gradient()  repeating-radial-gradient()

1.4 Web字体

1. @font-face 语法，引入 web 字体
2. 定制中文的web字体
3. 字体图标

2 变换 transform

2.1 变换相关 CSS 属性

CSS 属性名	含义	值
transform	设置进行哪一种变换可以设置多种变换形式，变换方法之间空格隔开.	设置变换方法
transform-origin	设置变换的原点	原点的坐标
transform-style	让子元素处在一个3D空间内需要给3D变换元素的父元素设置。	flat: 默认值，处在平面空间。 preserve-3d：开启3D空间
perspective	设置景深观察者到平面的距离。需要给3D变换元素的父元素设置。	设置长度，不允许负值。
perspective-origin	设置观察者位置需要给3D变换元素的父元素设置。	设置观察点的坐标与 transform-origin 值的规则一样
backface-visibility	设置元素背面是否可见。	visible:默认值，可见 hidden：不可见。

transform-origin 值的设置规则：

可以使用关键字设置坐标，分别有 left、center、right 以及 top、bottom、center，只设置一个方向另一个默认 center。如 transform-origin: left top

可以使用长度设置坐标，如 transform-origin: 10px 20px

元素的默认变换原点在元素中心，调整原点位置对缩放和旋转有影响，对位移没有影响。

3D 变换注意事项：

要看到 3D 效果，必须给3D变换元素的父元素设置 transform-style 和 perspective。

transform-style、perspective、perspective-origin、baceface-visibility 只能用于 3D 变换。

transform-style、perspective、perspective-origin 需要设置给父元素。

2.2 2D 变换的方法

① 位移 translate 方法

translateX()     设置水平方向位移的长度
translateY()        设置垂直方向位移的长度
translate()         同时设置水平和处置方向的位移长度，需要设置两个长度； 如果只有一个长度，只设置水平方向

/* 设置水平方向位移 */
transform: translateX(10px);/* 设置垂直方向位置 */
transform: translateY(10px);/* 同时设置水平方向和垂直方向 */
transform: translate(100px, -100px)；/* 设置绝对定位居中 *//* 设置绝对定位居中 */position: absolute;top: 50%;left: 50%;width: 400px;height: 300px;background-color: red;/* 设置位移 */transform: translate(-200px ,-150px);/* 设置位移的百分比，参考元素的高度和宽度，不用计算，而外边距参照的是包含块 */transform: translate(-50% ,-50%);

② 缩放 scale 方法

scaleX()     设置水平方向缩放为原来的多少倍，值是个数字表示倍数。
scaleY()        设置垂直方向缩放为原来的多少倍，值是个数字表示倍数。
scale()         同时设置水平垂直方向的缩放倍数，需要指定两个倍数；如果只有一个倍数，表示水平和垂直都按照该倍数缩放

/* 设置水平方向缩放 */
transform: scaleX(.8);
/* 设置垂直方向缩放 */
transform: scaleY(1.3);
/* 同时设置两个方向缩放 */
transform: scale(1.2);
transform: scale(.8, 1.5);/* 先设置16像素 */font-size: 16px；/* 缩放为原来的一半 */transform: scale(.5) ;

③ 旋转 rotate 方法

rotate() 设置旋转多少度，需要指定一个角度，单位是 deg

transform: rotate(5deg);

2.3 3D 变换的方法

① 3D 位移

translateZ() 设置元素沿z轴方向位置多少长度。
translate3D()   同时设置沿x轴、y轴、z轴的移动距离，必须指定3个长度。

② 3D 缩放

scaleZ()     设置沿着Z轴缩放，目前无明显效果。
scale3D()       同时设置x轴，y轴，z轴的缩放倍数，指定三个倍数。

③ 3D 旋转

rotateX()        沿着X轴旋转，指定角度
rotateY()       沿着Y轴旋转，指定角度
rotateZ()       沿着Z轴选项，指定角度；效果与2D旋转（rotate()）一致
rotate3D()      设置沿多轴旋转，需要指定4个值

 /* 沿着X轴旋转 */
transform: rotateX(45deg);
/* 沿着Y轴旋转 */
transform: rotateY(45deg);
/* 沿着Z轴旋转，效果与2D旋转一致 */
transform: rotateZ(45deg);
/* 同时设置沿着多个轴旋转 */
transform: rotate3D(1,1,1,45deg);

3 过渡 transition

3.1 过渡相关 CSS 属性

CSS 属性名	含义	值
transition-property	设置哪些css属性进行过渡	写需要过渡的CSS属性名多个样式进行过渡都逗号隔开写多个默认值是 all，表示发生变化的CSS属性，只要能过渡就过渡。
transition-duration	设置过渡持续时间	时间单位有：s（秒）、ms（毫秒）
transition-delay	设置过渡延迟时间	时间单位有：s（秒）、ms（毫秒）
transition-timing-function	设置过渡的运动轨迹	ease：默认值，平滑过渡 linear: 线性过渡（匀速） ease-in：加速 ease-out：减速 ease-in-out：先加速后减速 steps(n, start/end)：分 n 步过渡变化 step-start：等同于 steps(1, start) step-end：等同于 steps(1, end) cubic-bezier( number, number, number, number)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
transition	复合属性	同时设置子属性的值如果包含一个时间表示 duration，包含两个时间分别是 duration、delay

哪些 CSS 属性可以过渡？

值是长度或者数字的 CSS 属性可以过渡。如：width、height、border-width、padding、margin、z-index 等等。

值是颜色的 CSS 属性可以过渡，如 color、background-color、border-color 等。

CSS3 的变换可以设置过渡效果。

贝塞尔曲线在线制作工具：

地址：https://cubic-bezier.com/#.17,.67,.83,.67

3.2 触发过渡的条件

① CSS 的伪类选择器

:hover  :active  :focus

② JavaScript 的事件

③ 媒体查询 @media

4 动画 animation

4.1 关键帧

@keyframes 关键帧的名字 {form {}to {}
}@keyframes 关键帧的名字 {0% {}40% {}100% {}
}@keyframes 关键帧的名字 {from {}40% {}80% {}to {}
}

4.2 动画相关 CSS 属性

CSS 属性名	含义	值
animation-name	设置作用在元素上的关键帧动画	关键帧的名字，多个用逗号隔开
animation-duration	设置动画的持续时间	时间单位：s 或者 ms
animation-delay	设置动画开启前的延迟时间	时间单位：s 或者 ms
animation-timing-function	设置动画的运动轨迹	与 transition-timeing-function 值相同。
animation-iteration-count	设置动画的执行次数	设置一个数字设置关键字 infinite 表示无限次
animation-direction	设置动画的运动方向	nomral：默认值，正常方向 reverse：反方向运动 alternate：交替运动 alternate-reverse：反向交替运动
animation-fill-mode	设置动画结束之后的状态	none：没有状态，默认值 forwards：动画结束时的状态,常用 backwrads：动画开始时的状态
animation-play-state	设置动画的运动状态	running：默认值，动画运行 paused：暂停
animation	复合属性	duration和delay有顺序要求其他子属性没有顺序和数量要求.

CSS3-变换-过渡-动画相关推荐

CSS3 变形过渡动画
文章目录 CSS3 变形过渡动画 transform(变形) 概述 translate() 平移 scale() 缩放 skew() 倾斜 rotate() 旋转 transform-origin ...
html 图片的过渡效果,3个CSS3图片过渡动画特效
CSS 语言: CSSSCSS 确定 div { width: 200px; height: 200px; margin-top: 100px; margin-left: 100px; float: ...
css3变换、过渡与动画_带有CSS3过渡和变换的画布菜单
css3变换.过渡与动画 Now as an easy to use jQuery Plugin 现在作为易于使用的jQuery插件介绍 ( Introduction ) Off Canvas Me ...
CCS3的过渡、变换、动画以及响应式布局、弹性布局
CSS3 过渡 .变换.动画在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...
css3 变换、过渡效果、动画
1 CSS3 选择器 1.1 基本选择器 1.2 层级空格 > + .item+li ~ .item~p 1.3 属性选择器 [attr] [attr=value] [attr^=value] ...
CSS3变形和动画：旋转、扭曲、缩放、位移、矩阵、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...
无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程. 旋转.扭曲.缩放.位移.矩阵 ...
css3圆角360度转动画,target，框架集，css3过渡动画，css3圆角-阴影-透明度，运动曲线，图片文字遮罩，变形...
target 模拟后台服务器框架集 frameset和body不合,所以如果用frameset就不能有body标签利用框架可以把浏览器窗口划分为若干个区域,每个区域就是一个框架,在其中分别显示不 ...
CSS3过渡动画关键帧动画
一.过渡动画过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画. 所谓的状态就是指大小.位置.颜色.变形(transform)等等这些属性. Note:不是所有属性 ...
CSS3新选择器，盒子模型，过渡动画transition，2D转换transform
关于css属性选择器常用的有: id选择器(#box),选择id为box的元素类选择器(.one),选择类名为one的所有元素标签选择器(div),选择标签为div的所有元素后代选择器(#box ...

CSS3-变换-过渡-动画

变换-过渡-动画

1 回顾

1.1 边框

1.2 文本

1.3 渐变

1.4 Web字体

2 变换 transform

2.1 变换相关 CSS 属性

2.2 2D 变换的方法

① 位移 translate 方法

② 缩放 scale 方法

③ 旋转 rotate 方法

2.3 3D 变换的方法

① 3D 位移

② 3D 缩放

③ 3D 旋转

3 过渡 transition

3.1 过渡相关 CSS 属性

3.2 触发过渡的条件

① CSS 的伪类选择器

② JavaScript 的事件

③ 媒体查询 @media

4 动画 animation

4.1 关键帧

4.2 动画相关 CSS 属性

CSS3-变换-过渡-动画相关推荐

最新文章

热门文章