事业单位网站方案,自媒体网站源码模板dede,赣州市建设局建管科网站,网站开发报价ppt当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第五部分 添加动效 ✔️【第 15 章 过渡】 ✔️ 15.1 状态间的由此及彼 ✔️15.2 定时函数 文章目录 第 5 部分 添加动效 Adding motion第 15 章 过渡 Transitions15.1 状态间的由此及彼 From here… 当前内容所在位置可进入专栏查看其他译好的章节内容 第五部分 添加动效 ✔️【第 15 章 过渡】 ✔️ 15.1 状态间的由此及彼 ✔️15.2 定时函数 文章目录 第 5 部分 添加动效 Adding motion第 15 章 过渡 Transitions15.1 状态间的由此及彼 From here to there 《CSS in Depth》新版封面 译者按 终于来到了本书的最后一个部分——动效设置。遥想当初 6 月中旬提笔时完全不曾料到这本正文仅 500 页的新书真正翻译起来过程竟是如此艰难曲折。原以为每天至少啃 10 页这样两个月不到就能完成毕竟自己看过第一版原著。谁知计划赶不上变化中途屡屡耽搁其间也数度想过放弃也想过换本难度小点的、内容少点的书来啃。但仔细一想这些问题和困难不正是我进阶 CSS 的拦路虎么既然要践行长期主义就不能半途而废哪怕每天只学一页也是好的。这样才逐渐重拾信心坚持了下来。如果看到这里的朋友也有类似的经历还请务必摆正心态戒骄戒躁一步一个脚印踏踏实实地和我一起学完剩下的内容。毕竟冬至已过夜尽天明的故事每一天都在上演每一天都是新的希望 第 5 部分 添加动效 Adding motion 动效Motion与动态变化是您为页面样式的润色所做的最后一道工序。页面元素可以淡出fade out屏幕菜单可以滑入slide in加载颜色也可以自由变换shift。即便动效平平这些措施也会让页面交互妙趣横生但若尽善尽美动效的意义则远不止于此。在适当的时候恰到好处地引入变化效果既可以有效地向用户传达特定信息同时也能将他们的注意力吸引到页面适当的位置。本书最后这几章内容将深入探讨 CSS 中能为页面带来动效的相关知识。
第 15 章 过渡 Transitions 本章概要 利用过渡transitions为页面引入动效理解定时函数并选择合适的效果过渡与 JavaScript 的协同 在传统的打印媒介上事物都是静止不动的。文字不能在页面上自由挪动色彩也无法任意变换。但 Web 是个活灵活现的全新媒介可以实现更多效果。人们可以在页面中添加动效、引入各种变化而实现它们最简单的方式就是 过渡transitions。
有了 CSS 过渡效果您就可以让浏览器在某个值发生改变时将其从原来的某个值平缓过渡ease到另一个值。例如某个悬停状态下为红色的蓝色链接如果使用了过渡特效当用户划过该元素时链接就会从蓝色先过渡到紫色、再由紫色过渡到红色而当鼠标移走时再恢复如初。如果正确使用过渡可以进一步增强页面的交互效果并且由于我们的眼睛更容易被动态的事物所吸引所以当变化产生时可以更好地获得用户关注。
通常给页面添加过渡效果是不怎么费劲的。本章会介绍如何实现 CSS 过渡以及其间需要考虑的相关问题。有些案例可能会比较复杂因此我们也会不同的情况进行考察。
15.1 状态间的由此及彼 From here to there
过渡特效是通过一系列形如 transition-* 的样式属性来实现的。当元素的某个属性值发生变化时设置在元素上的过渡特效就会生效实现该属性样式的平稳过渡而非立即切换到新的属性值。
下面利用按钮来创建一个基本示例以演示 CSS 过渡的基本工作原理。本例从一个直角的蓝绿色按钮开始鼠标悬停时该按钮将过渡为一个圆角的红色按钮。图 15.1 展示了这两种状态以及其间过渡时的状态。 【图 15.1 过渡前、过渡中以及过渡后的元素效果】
在新页面中添加一个按钮并关联到一个新的样式表。按钮的 HTML 标记如代码清单 15.1 所示。
代码清单 15.1 为页面添加一个简单的按钮
button typebuttonHover over me/button接着根据代码清单 15.2 同步更新样式表。这些样式定义了按钮的正常状态与悬停时的状态其中有两个过渡属性用于指示浏览器在两种状态间实现流畅过渡。
代码清单 15.2 具有过渡效果的按钮样式示例代码
button {padding: 0.3em 1em;border: 0;font-size: 1rem;color: white;background-color: oklch(74% 0.11 195deg); /* 蓝绿色按钮 */transition-property: all; /* 让过渡对所有属性变化生效 */transition-duration: 0.5s; /* 过渡时间为 0.5s */
}button:hover { /* 悬停时按钮为红色、带圆角边框 */border-radius: 1em;background-color: oklch(55% 0.16 24deg);
}属性 transition-property 用于指定对哪些属性启用过渡效果。本例中的关键字 all 表示过渡将对所有属性的变化生效。而属性 transition-duration 则表示过渡到最终状态时经历的时长本例中即为 0.5s表示 0.5 秒。
加载页面并使用鼠标划过按钮就能看到该过渡效果。注意尽管我们并没有在正常状态下明确声明圆角半径为 0border-radius 属性仍旧十分流畅地从 0 过渡到了 1em。因为按钮自动将圆角半径的初始值设为了 0圆角过渡便由 0 开始。当鼠标从元素上移开时过渡效果则会反向生效。您也可以在悬停状态中试着改改其他样式属性例如 font-size 或者 border 等等。
元素属性任何时候发生变化都会触发过渡可以是状态改变的时候比如 :hover也可以是 JavaScript 导致状态变化的时候例如添加或删除某个影响元素样式的 class 类。
注意我们并没有在 :hover 规则集中设置形如 transition-* 的过渡属性而是将它们设置在了一个可以始终选中该元素的选择器上尽管我们确实是想让过渡效果对鼠标悬停状态生效。我们希望能在进入悬停状态时淡入过渡和退出悬停状态后淡出过渡都能看到过渡效果而当其他属性改变时我们往往并想让过渡属性本身也发生改变。 提示 在过渡效果结束时您也可以使用 JavaScript 的 transitionend 事件来执行某类操作。 此外还可以使用过渡特效的简写属性 transition其语法结构如图 15.2 所示。该简写属性最多可接受四个参数值分别代表这四个过渡属性transition-property、transition-duration、transition-timing-function 以及 transition-delay。 【图 15.2 简写属性 transition 的语法结构】
第一个参数值用于确定哪些属性需要启用过渡其初始值为关键字 all表示对所有属性均生效但若只有一个属性需要过渡在这里指定属性名称即可。例如transition-property: color 将只对元素颜色启用过渡其余属性变化时则立即完成。也可以设置多个值例如 transition-property: color, font-size。
第二个参数值为持续时间是一个用秒如 0.3s或毫秒如 300ms表示的时间值。 警告 与长度值不同0 不是一个合法的时间值。您必须为时间值指定一个单位如 0s 或者 0ms否则声明将无效并被浏览器忽略。 第三个参数值为定时函数用于控制属性中间值的计算方式从而有效控制整个过渡过程中变化率如何加速或减速。定时函数的值可以是一个关键字例如 linear 或者 ease-in也可以是一个自定义函数。这是 CSS 过渡特效的核心知识稍后将详细介绍。
最后一个参数为延迟时间用于指定在属性值改变之后、过渡特效生效前的这段等待时间。如果为按钮的悬停状态切换设置 0.5s 的过渡延迟那么当鼠标指针进入元素 0.5s 之后才会触发过渡效果。
如果需要为两个不同的属性分别设置不同的过渡效果可以添加多个过渡规则并以逗号进行分隔如以下代码所示
transition: border-radius 0.3s linear, background-color 0.6s ease;相应地如果使用普通写法上述代码等效于以下样式声明
transition-property: border-radius, background-color;
transition-duration: 0.3s, 0.6s;
transition-timing-function: linear, ease;本章稍后还将演示一个使用了多个过渡规则的案例。 无障碍浏览设置减少动效 Accessibility: Reduced motion 仔细考虑页面上的动效、尤其是在定义了大量动效的情况下思考它们究竟会对用户带来怎样的影响就显得至关重要了。某些用户可能患有前庭运动障碍vestibular motion disorders这通常是在人的内耳中出现的问题当屏幕上出现某些动态效果时患者会出现不同程度的不适感。操作系统为此类用户提供了相关配置以减少屏幕动效对其造成的不良影响。 您应当启用媒体查询 prefers-reduced-motion 来查询该配置并酌情调整 CSS 样式。在第 8 章我曾建议将下列规则集引入 reset 图层样式中。添加该样式后页面上所有的过渡与动画效果都会被移除这样就无需手动重复相关操作了 layer reset {media (prefers-reduced-motion: reduce) {*,*::before,*::after {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;}}
}上述代码用到了 !important 标记以确保这些过渡与动画效果在任何情况下都能被彻底移除。注意这里并没有声明 transition: none而是设置了一个很短的持续时长以达到动效不被察觉的目的。这样一来页面中基于过渡或动画实现的逻辑如 JavaScript 中的 animationend 事件就仍然可以正常工作。 关于《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 预处理器简介
