网站运营计划,php网站开发参考书籍,代运营是如何骗人的,创意图片当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第五部分 添加动效 ✔️【第 15 章 过渡】 ✔️ 15.1 状态间的由此及彼15.2 定时函数 ✔️ 15.2.1 定制贝塞尔曲线 ✔️15.2.2 阶跃 ✔️ 15.3 非动画属性 文章目录 15.2 定时函数 Timing function… 当前内容所在位置可进入专栏查看其他译好的章节内容 第五部分 添加动效 ✔️【第 15 章 过渡】 ✔️ 15.1 状态间的由此及彼15.2 定时函数 ✔️ 15.2.1 定制贝塞尔曲线 ✔️15.2.2 阶跃 ✔️ 15.3 非动画属性 文章目录 15.2 定时函数 Timing functions15.2.1 定制贝塞尔曲线 Custom Bézier curves15.2.2 阶跃 Steps 《CSS in Depth》新版封面
15.2 定时函数 Timing functions
定时函数是 CSS 过渡的重要组成部分。过渡特效实现了让某个属性从一个值 “移动”“move”到另一个值而定时函数则用于描述该过程究竟是 “怎样”“how” 移动的是以恒定的速度移动还是先缓慢起步再逐渐加速
我们可以使用几个关键字来描述该移动过程例如 linear、ease-in 和 ease-out 等。若按 linear 过渡则属性值将以恒定的速度变化若改为 ease-in则变化速度开始时慢但在过渡结束前会加快相反ease-out 则会减速过渡开始时快速变化结束时却放慢了速度。图 15.3 演示了小方块在这几种定时函数的作用下由左侧移动到右侧时的不同过渡效果。 【图 15.3 linear 过渡以恒定速度移动而 ease-in 则加速ease-out 则减速】
仅从静态图片上理解这几个过程可能有点困难为此让我们通过一个示例来说明以便在浏览器中实时查看不同的过渡效果。新建一个 HTML 页面并根据代码清单 15.3 添加如下 HTML 代码
代码清单 15.3 一个简单的定时函数示例 HTML
div classcontainerdiv classbox/div!-- 该小方块将从屏幕左侧过渡到右侧--
/div接着给小方块设置好颜色和尺寸大小然后使用绝对定位并在鼠标悬停时利用过渡特效来移动小方块的位置。最后给页面添加新样式表将代码清单 15.4 中的样式复制到本地样式表内。
代码清单 15.4 使小方块从左侧过渡到右侧的样式代码
.container {position: relative;height: 50px;
}.box {position: absolute;left: 0; /* 从左侧开始 */height: 50px;width: 50px;background-color: oklch(70% 0.18 145deg);transition: all 1s linear; /* 设置过渡 */
}.container:hover .box {left: 400px; /* 鼠标悬停时右移 400px */
}这样在示例页的左上角将会得到一个绿色的小方块。当鼠标悬停到方块所在的容器上时方块将向右侧移动。注意此时方块将以恒定的速度做匀速运动。 警告 本例通过给元素设置绝对定位并对其 left 属性使用过渡特效实现了元素在屏幕上匀速移动的效果。然而有一些属性因为性能原因要尽量避免使用过渡特效其中就包括 left 属性。后续章节还会提到这些问题届时将利用变换transforms来作为更好的替代方案。 现在可以试着改改过渡属性看看不同的定时函数是怎么工作的。例如尝试 ease-in即 transition: all 1s ease-in或者 ease-out即 transition: all 1s ease-out。仅用这些关键字就能实现相应的效果了但有时您可能希望对定时函数实现更精准的控制。这时就需要使用自己定义的定时函数。下面来看看如何实现。
15.2.1 定制贝塞尔曲线 Custom Bézier curves
定时函数是以数学定义下的贝塞尔曲线Bézier curves为基础的。浏览器将贝塞尔曲线作为某属性值随时间变化的函数曲线并根据该函数算出某时刻的属性值。图 15.4 展示了几种定时函数的贝塞尔曲线以及对应的定时函数关键字。 【图 15.4 定时函数的贝赛尔曲线描述了数值随时间的变化情况】
这些贝塞尔曲线都是从左下方开始一直延伸到右上方。时间是从左向右推进的而曲线则描述了该数值从开始到抵达终点前的数值变化过程。线性定时函数 linear 的变化率在整个过渡过程中一直保持稳定呈现为一条直线。其余定时函数为曲线代表加速和减速变化。
然而我们不应该局限在这五种关键字上。我们也可以定义自己的三次贝塞尔曲线cubic Bézier curve实现更温和gentle或更强烈drastic的过渡效果。甚至可以添加一些“回弹”“bounce”效果。下面就来一试身手。
在刚才创建的页面中打开开发者工具 DevTools 并检查绿色小方块元素。在 Chrome 浏览器的 “样式Styles” 面板或者 Firefox 浏览器的 “规则Rules” 面板中您将看到定时函数旁边有一个小小的标志符单击该标志符会打开一个弹窗。您可以在该弹窗中修改定时函数曲线如图 15.5 所示。 【图 15.5 在 Chrome 浏览器的开发者工具中编辑贝塞尔曲线】
在弹窗左侧的操作界面上提供了一系列预定义的贝塞尔曲线。尽管 Firefox 提供的内置曲线比 Chrome 浏览器更多但 Chrome 浏览器支持通过底部的左右小箭头来循环预览其他选项。您也可以点击其中某条曲线进行选择。而在操作界面的右侧则会放大展示选中贝塞尔曲线的具体情况。
曲线的每个末端都有一条短直线即 控制柄handles直线上附带的小圆点称为 控制点control points。点击并拖动小圆点则可以改变曲线形状注意观察控制柄的长度和方向是如何 “牵引”“pulls” 曲线的。
点击弹窗外部区域就可以关闭该弹窗此时定时函数已然更新之前类似 ease-out 的关键字不见了取而代之的是像 cubic-bezier(0.45, 0.45, 0.55, 0.95) 这样的值。cubic-bezier() 函数和其中的四个参数共同组成了我们自定义的定时函数。 关于定时函数的选取 Selecting a timing function 无论是使用关键字形式的定时函数还是自定义贝塞尔曲线版本了解什么时候该使用哪种函数都是很有必要的。每个网站或应用程序都应该包含一条减速曲线decelerating curve、一条加速曲线accelerating curve以及 linear 关键字对应的函数曲线。最佳实践是复用相同的几条曲线提供更加一致的用户体验。 可以在下列场景中分别使用这三种函数 线性linear —— 适用于颜色变化和淡入fade-in、淡出fade-out效果减速Decelerating —— 适用于用户发起的变化。当用户点击按钮或者悬停在某元素上方时使用 ease-out 或者类似的曲线。这样用户就会看到对其输入内容的快速、即时的响应然后元素再慢慢过渡easing out到最终状态。加速Accelerating —— 适用于系统发起的变化。当内容加载完毕、或者超时事件触发时使用 ease-in 或者类似的曲线。这样元素就可以慢慢引起用户注意然后变化速度越来越快直到完成最终变化。 当然这些都不是硬性规定只是提供了一些基本思路如果感觉不太合适完全可以不用遵守这些规则。有时您可能还需要更多的曲线来实现更复杂或者更有趣的过渡效果例如使用 ease-in-out先加速后减速或者回弹特效演示案例详见第 16 章。 下面再来深入考察一下 cubic-bezier() 函数的工作原理。图 15.6 给出了另一个曲线示例。这是一条自定义的贝塞尔曲线。该曲线在开始时加速速度在中间位置达到最大值即曲线上最陡峭的部分而后开始减速。曲线位于笛卡尔网格译注即直角坐标系内其起点坐标为 (0, 0)终点坐标则为 (1, 1)。 【图 15.6 用贝塞尔曲线描述的某定时函数】
由于曲线的两个端点是固定的因此只需要再确定两条控制柄的位置就可以定义出该曲线了。在 CSS 中该曲线可以通过 cubic-bezier(0.45, 0.05, 0.55, 0.95) 来定义其中的四个参数分别代表了两个控制柄handles上的控制点的 x 坐标和 y 坐标。
我们很难通过这些数字想象出曲线的具体形态。相比之下利用图形界面工具来编辑贝塞尔曲线要简单、直观得多因此我喜欢先在浏览器中编辑并测试过渡效果然后再将生成的三次贝塞尔曲线复制到样式表中。我比较喜欢使用 DevTools 工具来完成这类任务您也可以使用一些像 https://cubic-bezier.com 这样的在线工具。
15.2.2 阶跃 Steps
最后再介绍一种定时函数即 steps() 函数。跟前面介绍的基于贝塞尔曲线将某个值流畅过渡到下一个值的过渡特效不同steps() 函数是以一系列离散的、瞬时 “阶跃”“steps”来移动的。
阶跃函数需要两个参数阶跃次数和一个用来表示每次变化发生在阶跃的开始还是结束的关键词start 或者 end。图 15.7 描述了部分阶跃函数。 【图 15.7 step() 函数以阶跃递增的方式改变数值】
注意因为第二个参数值默认为 end所以可以使用 steps(3) 来代替 steps(3, end)。想要查看阶跃函数的过渡效果试根据代码清单 15.5 同步更新本地样式表。
代码清单 15.5 利用 steps() 函数来增加数值的示例样式代码
.box {position: absolute;left: 0;height: 50px;width: 50px;background-color: oklch(70% 0.18 145deg);transition: all 1s steps(3); /* 设置三次非连续的阶跃过渡效果 */
}此时就不是一秒内即过渡持续时间流畅地从左到右移动了时间被分成了三等分或者说三步。每走一步小方块就先后分别出现在起始位置、三分之一位置、三分之二位置以及最后 1s 时移动到终点位置。 注意 默认情况下属性值在每一步结束时发生改变因此过渡效果不会立即开始。添加 start 关键字变为 start(3, start) 后就可以改变该默认行为。这样过渡就会发生在每步开始时而非结束时。 阶跃函数 steps() 的实际应用并不多见不过 CSS-TRICKS 网站的这篇《Clever Uses for Step Easing》博文列举了大量有关该函数的创意案例或许可以为您提供一些灵感。 关于《CSS in Depth》中译本书名《深入解析 CSS》 第 1 版第 2 版读者评分原版4.7亚马逊中文版9.3豆瓣原版5.0亚马逊中文版暂无待出版出版时间原版2018 年 3 月中文版2020 年 4 月原版2024 年 7 月中文版暂无待出版原价原版$44.99中文版139.00原版$59.99中文版暂无待出版现价原版$36.49中文版52.54 起步原版$52.09中文版暂无待出版原版国内预订起步价 461.00起步价 750.00
本专栏为该书第 2 版高分译文专栏全网首发精译精校持续更新计划今年内完成全书翻译敬请期待
目前已完结的章节可进入本专栏查看详情连载期间完全免费 第一章 层叠、优先级与继承已完结 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位已完结 2.1 相对单位的威力2.2 em 与 rem2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高2.6 自定义属性2.7 本章小结 第三章 文档流与盒模型已完结 3.1 常规文档流3.2 盒模型3.3 元素的高度3.4 负的外边距3.5 外边距折叠3.6 容器内的元素间距问题3.7 本章小结 第四章 Flexbox 布局已完结 4.1 Flexbox 布局原理4.2 弹性子元素的大小4.3 弹性布局的方向4.4 对齐、间距等细节处4.5 本章小结 第五章 网格布局已完结 5.1 构建基础网格5.2 网格结构剖析 上 5.2.1 网格线的编号下5.2.2 网格与 Flexbox 配合下 5.3 两种替代语法 5.3.1 命名网格线5.3.2 命名网格区域 5.4 显式网格与隐式网格上 5.4.1 添加变化 中5.4.2 让网格元素填满网格轨道下 5.5 子网格全新增补内容5.6 对齐相关的属性5.7 本章小结 第六章 定位与堆叠上下文已完结 6.1 固定定位 6.1.1 创建一个固定定位的模态对话框6.1.2 在模态对话框打开时防止屏幕滚动6.1.3 控制定位元素的大小 6.2 绝对定位 6.2.1 关闭按钮的绝对定位6.2.2 伪元素的定位问题 6.3 相对定位 6.3.1 创建下拉菜单上6.3.2 创建 CSS 三角形下 6.4 堆叠上下文与 z-index 6.4.1 理解渲染过程与堆叠顺序上6.4.2 用 z-index 控制堆叠顺序上6.4.3 深入理解堆叠上下文下 6.5 粘性定位6.6 本章小结 第七章 响应式设计已完结 7.1 移动端优先设计原则上篇 7.1.1 创建移动端菜单下篇7.1.2 给视口添加 meta 标签下篇 7.2 媒体查询上篇 7.2.1 深入理解媒体查询的类型上篇7.2.2 页面断点的添加中篇7.2.3 响应式列的添加下篇 7.3 流式布局7.4 响应式图片7.5 本章小结 第八章 层叠图层及其嵌套 8.1 用 layer 图层来操控层叠规则上篇 8.1.1 图层的定义上篇8.1.2 图层的顺序与优先级下篇8.1.3 revert-layer 关键字下篇 8.2 层叠图层的推荐组织方案8.3 伪类 :is() 和 :where() 的用法8.4 CSS 嵌套的使用 8.4.1 嵌套选择器的使用8.4.2 深入理解嵌套选择器8.4.3 媒体查询及其他 规则 的嵌套 8.5 本章小结 第九章 CSS 的模块化与作用域 9.1 模块的定义 9.1.1 模块和全局样式9.1.2 一个简单的 CSS 模块9.1.3 模块的变体9.1.4 多元素模块 9.2 将模块组合为更大的结构 9.2.1 模块中多个职责的拆分9.2.2 模块的命名 9.3 CSS 的作用域 9.3.1 CSS 作用域的就近原则9.3.2 划定作用域的边界9.3.3 CSS 中的隐式作用域9.3.4 关于 CSS 作用域与层叠图层 9.4 CSS 模式库9.5 本章小结 第十章 CSS 容器查询 10.1 容器查询的一个简单示例 10.1.1 容器尺寸查询的用法 10.2 深入理解容器 10.2.1 容器的类型10.2.2 容器的名称10.2.3 容器与模块化 CSS 10.3 与容器相关的单位10.4 容器样式查询的用法 10.4.1 将模块与所在容器解耦10.4.2 减少重复代码 10.5 本章小结 第 11 章 颜色与对比 11.1 通过对比进行交流 11.1.1 模式的建立11.1.2 还原设计稿 11.2 颜色的定义 11.2.1 色域与色彩空间11.2.2 CSS 颜色表示法RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH 11.3 利用 OKLCH 处理颜色上篇 11.3.4 从页面其他颜色衍生出新颜色下篇 11.4 思考字体颜色的对比效果11.5 本章小结 第 12 章 CSS 排版与间距 12.1 间距设置 12.1.1 使用 em 还是 px12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 12.2 Web 字体12.3 谷歌字体12.4 font-face 的工作原理 12.4.1 字体格式与回退处理12.4.2 同一字型的多种变体形式 12.5 性能因素考量 12.5.1 font-display 属性解析12.5.2 可变字体的用法 12.6 调整字间距提升可读性 12.6.1 正文的字间距12.6.2 标题、小元素和间距 12.7 本章小结 第 13 章 渐变、阴影与混合模式 13.1 渐变 13.1.1 使用多个颜色节点上13.1.2 颜色插值方法中13.1.3 径向渐变下13.1.4 锥形渐变下 13.2 阴影 13.2.1 利用渐变和阴影打造立体感13.2.2 使用扁平化设计创建元素13.2.3 创建混合风格的按钮外观 13.3 混合模式 13.3.1 为图片上色13.3.2 混合模式的类型13.3.3 图片纹理的添加13.3.4 融合混合模式的用法 13.4 本章小结 第 14 章 蒙版、形状与剪切 14.1 滤镜 14.1.1 滤镜的类型14.1.2 背景滤镜 14.2 蒙版 14.2.1 带渐变效果的蒙版特效14.2.2 基于亮度来定义蒙版14.2.3 其他蒙版属性 14.3 剪切路径 14.3.1 多边形的裁剪路径14.3.2 Firefox 内置的剪切路径工具14.3.3 其他剪切路径类型 14.4 浮动与形状 14.4.1 浮动14.4.2 形状的定义 14.5 本章小结 附录 附录ACSS 选择器参考附录BCSS 预处理器简介
