金华市建设局官方网站,高等学校处网站建设总结,上海网站备案人工服务器,lamp网站开发制作当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第五部分 添加动效 ✔️【第 16 章 变换】 ✔️ 16.1 旋转、平移、缩放与倾斜 16.1.1 变换原点的更改16.1.2 多重变换的设置16.1.3 单个变换属性的设置 16.2 变换在动效中的应用 ✔️ 16.2.1 放大图… 当前内容所在位置可进入专栏查看其他译好的章节内容 第五部分 添加动效 ✔️【第 16 章 变换】 ✔️ 16.1 旋转、平移、缩放与倾斜 16.1.1 变换原点的更改16.1.2 多重变换的设置16.1.3 单个变换属性的设置 16.2 变换在动效中的应用 ✔️ 16.2.1 放大图标上 ✔️16.2.2 带“飞入”特效的文本标签的创建下16.2.3 过渡特效的交错渲染下 文章目录 16.2 变换在动效中的应用 Transforms in motion16.2.1 放大图标 Scaling up the icon 《CSS in Depth》新版封面 译者按 本篇开始结合具体案例演示变换效果与过渡特效的实际应用。按照作者的说法后续内容会大量引入 CSS 动效鉴于篇幅过长还是分为上下两篇来介绍。本篇为上篇主要包含了示例页导航菜单的基本结构和放大、过渡特效的实现。今天刚好博客等级升到 7 级了感觉持续输出优质内容的努力有了些许回报同时肩上的担子也变重了至少在巩固 CSS 基础方面不能传递一个错误信号为了“在年底到来前学完整本书” 的小目标而囫囵吞枣对后面的学习和翻译敷衍了事。毕竟善始者实繁而克终者盖寡。希望大伙都能戒骄戒躁认真消化这两章的精华内容。 16.2 变换在动效中的应用 Transforms in motion
变换本身并不是特别实用。虽然添加了 skew() 变换的内容框看上去可能很有趣但并不适合文字阅读。但是当与动效结合起来使用的时候变换就有用多了。
本节将创建一个新页面来实践这种用法。最终的页面效果如图 16.5 所示。我们会给页面添加很多动态效果。 【图 16.5 左侧的导航菜单图标将包含几个变换和过渡效果】
本节我们将实现左侧的导航菜单部分。初始状态下菜单只有四个纵向排列的图标但只要鼠标悬停上去菜单文字就会出现。这个示例包含了几个过渡与变换效果。我们先来实现页面然后再进一步研究导航菜单部分下一章我们会实现中间主区域的卡片部分并为其添加更多的变换与动画特效。
新建一个页面并关联一个新的样式表 style.css然后添加代码清单 16.5 中的 HTML 标记。该代码包含了一个谷歌字体的 API 链接引用了两款 Web 字体即 Alfa Slab One 和 Raleway。此外还包含页头和导航菜单部分的 HTML 标记。
代码清单 16.5 带动态变换效果的示例页 HTML 标记
!doctype html
html langen-USheadmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1titleThe Yolk Factory/titlelink relpreconnect hrefhttps://fonts.googleapis.comlink relpreconnect hrefhttps://fonts.gstatic.com crossoriginlink hrefhttps://fonts.googleapis.com/css2?familyAlfaSlabOnefamilyRalewaydisplayfallbackrelstylesheet!-- 为页面添加 Alfa Slab One 与 Raleway 两款字体 --link relstylesheet hrefstyle.css/headbodyheaderh1 classpage-headerThe Yolk Factory/h1/headernav classmain-navul classnav-linkslia href/!-- 每个导航链接分别包含一张图片和一段文本标签 --img srcimages/home.svg classnav-links__icon/span classnav-links__labelHome/span/a/lilia href/events!-- 每个导航链接分别包含一张图片和一段文本标签 --img srcimages/calendar.svg classnav-links__icon/span classnav-links__labelEvents/span/a/lilia href/members!-- 每个导航链接分别包含一张图片和一段文本标签 --img srcimages/members.svg classnav-links__icon/span classnav-links__labelMembers/span/a/lilia href/about!-- 每个导航链接分别包含一张图片和一段文本标签 --img srcimages/star.svg classnav-links__icon/span classnav-links__labelAbout/span/a /li /ul /nav/body
/html上述代码中nav 元素占据了绝大部分篇幅其中有个带链接的无序列表ul。每个链接都由一个图标图片和一个文本标签构成。注意这里的图标图片是 SVG 格式的。后面您就会知道这一点很重要届时我们将在第 17 章为页面添加更多内容。 关于 SVG 的定义 SVG —— 全称为 Scalable Vector Graphics即可缩放矢量图形。这是一种基于 XML 的图片格式利用矢量vectors来定义图片。由于图片是使用数学计算得到的因此可以无损地缩放到任意尺寸。 接下来我们添加一些基础样式包括背景渐变标题区域的内边距同时在为页面引入 Web 字体。请根据代码清单 16.6 同步更新本地样式表。这些都是页面的全局样式以及页头的一些模块层样式。菜单部分的布局设置后面再说。
代码清单 16.6 页面全局样式及页头模块的示例样式代码
layer reset, theme, global, modules;layer reset {*,*::before,*::after {box-sizing: border-box;}body {margin: unset;}img {max-inline-size: 100%;}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;}}
}layer theme {:root {--bg-color-1: oklch(47% 0.1 238deg);--bg-color-2: oklch(32% 0.08 238deg);--font-color: white;--accent-yellow: oklch(87% 0.13 83deg);}
}layer global {body {min-block-size: 100dvh; /* 确保 body 元素填满视口实现渐变特效的全覆盖 */background-color: var(--bg-color-1);background-image: radial-gradient( /* 深蓝色背景渐变效果 */var(--bg-color-1),var(--bg-color-2));color: var(--font-color);font-family: Raleway, Helvetica, Arial, sans-serif;line-height: 1.4;}h1,h2,h3 {font-family: Alfa Slab One, serif;font-weight: 400;}
}layer modules {.page-header {margin-block: unset;padding: 1rem; /* 让页头模块在移动端视口下减少内边距 */}media (min-width: 480px) {.page-header {padding: 2rem 2rem 3rem; /* 让页头模块在较大的视口中相应调大内边距 */}}
}本例应用了前面章节的很多知识点。body 元素的背景样式采用了径向渐变可以给页面带来些许立体感。标题文字 采用的是 Web 字体 Alfa Slab One而正文部分则使用 Raleway 字体。此外还利用媒体查询实现了页头部分的响应式设计当屏幕尺寸允许的情况下适度增大了内边距。
而菜单部分的样式设计则需要分为以下几个步骤。首先完成菜单布局然后提供一些响应式行为。我们将采用移动端优先详见第 7 章的实现方案因此最好从小尺寸视口开始设计。最终标题和菜单项要实现的页面效果如图 16.6 所示。 【图 16.6 导航菜单的移动端设计效果图】
鉴于小尺寸屏上的导航链接是水平排列的使用 Flexbox 布局比较合适。只要在弹性容器上声明 align-content: space-between导航菜单项就可以在整个页面宽度上均匀分布。然后再设置字体颜色并对齐图标。请根据代码清单 16.7 同步更新本地样式表。
代码清单 16.7 移动端导航菜单的示例样式代码
layer modules {.nav-links {display: flex; /* 使用 Flexbox 布局 */justify-content: space-between; /* 让导航菜单项水平均匀展布 */gap: 0.8em;margin-block: 0 1rem;padding-inline: 1rem;list-style: none;}.nav-links li a {display: block;padding-block: 0.8em;color: white;font-size: 0.8rem;/* 为链接文字设计样式 */text-decoration: none;text-transform: uppercase;letter-spacing: 0.06em;}.nav-links__icon {height: 1.5em;width: 1.5em;vertical-align: -0.2em; /* 图标略微下移与文本标签对齐 */}.nav-links li a:hover {color: var(--accent-yellow);}
}这样就实现了小尺寸屏上的导航菜单效果而屏幕越大可以添加的特效相应就更多。对于桌面端布局可以用固定定位让导航菜单停靠在屏幕左侧效果看上去如图 16.7 所示。 【图 16.7 停靠在大尺寸屏左侧的导航菜单效果图】
此时的菜单由两个模块组成即已经命名的外层元素 main-nav以及名为 nav-links 的内部结构。其中 main-nav 为容器元素需要固定在左侧并提供了深色背景。下面就来实现一版。
请根据代码清单 16.8 同步更新本地样式表注意第二个媒体查询及其内容需要放到 nav-links 样式的后面这样才能在查询条件生效时有效覆盖对应的移动端样式。
代码清单 16.8 大尺寸屏下定位导航菜单的示例样式代码
layer modules {media (min-width: 480px) { /* 该样式规则仅对大中型屏幕生效 */.main-nav {position: fixed;top: 8.25rem;left: 0;z-index: 10; /* 确保导航菜单渲染到后续新增内容的上一层 */background-color: transparent; /* 令初始背景色为透明 */transition: background-color 0.5s linear; /* 为背景色设置过渡特效 */border-top-right-radius: 0.5em;border-bottom-right-radius: 0.5em;}.main-nav:hover,.main-nav:focus-within {background-color: rgb(0 0 0 / 0.6); /* 鼠标悬停时背景色变为深色半透明效果 */}}.nav-links {display: flex;justify-content: space-between;gap: 0.8em;margin-block: 0 1rem;padding-inline: 1rem;list-style: none;}.nav-links li a {display: block;padding-block: 0.8em;color: white;font-size: 0.8rem;text-decoration: none;text-transform: uppercase;letter-spacing: 0.06em;}.nav-links__icon {height: 1.5em;width: 1.5em;vertical-align: -0.2em;}.nav-links li a:hover,.nav-links li a:focus {color: var(--accent-yellow);}media (min-width: 480px) { /* 覆盖移动端的 Flexbox 布局让各链接纵向排列 */.nav-links {display: block;padding: 1em;margin-block-end: 0;}.nav-links__label {margin-left: 1em;}}
}导航菜单通过声明 position: fixed 进行固定定位即便页面滚动其位置也不受影响而 display: block 规则覆盖了移动端下的 display:flex从而令菜单项垂直叠放在一起。
Now you can start layering in some transition and transform effects. For that, you’ll do three things: 现在你可以开始添加一些过渡和变换效果。为此你需要做三件事
一切就绪后就可以添加过渡和变换效果了。为此需要实现以下三个功能
鼠标划过链接时图标元素需要放大先隐藏链接标签直到用户鼠标悬停到菜单上时才将其全部展示出来并设置淡入fade-in的过渡特效。利用平移变换给链接标签添加 “飞入”“fly in”效果并与淡入特效相结合。
下面来逐一实现这些功能点。
16.2.1 放大图标 Scaling up the icon
先来看看导航链接的 HTML 结构。每个列表项都包含一个链接元素a链接里面又包含了一个图标和一个标签
lia href/img srcimages/home.svg classnav-links__icon/span classnav-links__labelHome/span/a
/li注意 由于列表项要与父元素 ul 组合在一起使用构建出的模块就比我预想中的体积更大嵌套层级也更深。我也考虑过将其拆分为较小的模块但眼下还是有必要将它们放在一起这样方便对其整体设置特效。 我们先来实现鼠标悬停时的图标放大效果。这里要用到缩放变换然后设置过渡特效实现变换过程的平稳流畅seamlessly。如图 16.8 所示当鼠标悬停在 Events 菜单项上时该图标会稍微放大一些。 【图 16.8 鼠标悬停到某链接后其对应图标略微放大】
Events 的图标具有固定的宽高因此可以调大这些属性值来尝试放大图标。但这样会导致文档流重新计算使得周围一些元素跟着移动。
如果改用变换transform周围的元素则不受任何影响Events 的文本标签部分也不会向右移动。请根据代码清单 16.9 同步更新样式表让下列样式在元素悬停通过鼠标操作或聚焦通过键盘操作时都能生效。
代码清单 16.9 图标链接在悬停或聚焦时放大的示例样式代码
media (min-width: 30em) {.nav-links {display: block;padding: 1em;margin-block-end: 0;}.nav-links__label {margin-left: 1em;}.nav-links__icon {transition: scale 0.2s ease-out; /* 为 transform 属性设置过渡特效 */}.nav-links a:hover .nav-links__icon,.nav-links a:focus .nav-links__icon {scale: 1.3; /* 增大图标尺寸 */}
}这样当鼠标划过菜单项您将看到对应的图标会变大一些帮助用户确认正在悬停的菜单项。这里特意使用了 SVG 图片资源这样在图片尺寸变化时就不会出现像素颗粒或者其他奇怪的失真感。缩放变换效果是实现该功能点的绝佳方案。 SVG一种更好的图标解决方案SVG: A better approach to icons 图标在某些设计的重要组成部分。图标的使用技巧也一直在进化。很长一段时间里使用图标的最佳实践是把所有图标放入单个图片文件并称之为 精灵图sprite sheet。然后利用 CSS 背景图片小心翼翼地调整尺寸大小和背景位置在元素中渲染出精灵图上的某个图标。 后来图标字体icon font 开始流行起来。这种解决方案不再把图标嵌入精灵图而是将每个图标作为字符嵌入一个自定义的字体文件中。通过使用 Web 字体单个字符将被渲染成图标。像 Font Awesome 这样的一些线上服务还提供了几百个通用图标来简化这一过程但使用这种方法也存在一些无障碍浏览方面的问题accessibility concerns。 尽管这些技术仍然有效但我还是建议您使用 SVG 图标。SVG 功能更强大性能也更好。SVG 既可以像本章演示的那样作为 img 的源source来使用同时也提供了其他用法。我们可以创建一个 SVG 精灵图或者利用 SVG 本就是基于 XML 的文件格式这一本质特征直接将其嵌入 HTML 页面中例如 lia href/svg classnav-links__icon width20 height20 viewBox0 0 20 20path fill#ffffff dM19.871 12.165l-8.829-9.758c-0.274-0.303-0.644-0.47-1.042-0.47-0 0 0 0 0 0-0.397 0-0.767 0.167-1.042 0.47l-8.829 9.758c-0.185 0.205-0.169 0.521 0.035 0.706 0.096 0.087 0.216 0.129 0.335 0.129 0.136 0 0.272-0.055 0.371-0.165l2.129-2.353v8.018c0 0.827 0.673 1.5 1.5 1.5h11c0.827 0 1.5-0.673 1.5-1.5v-8.018l2.129 2.353c0.185 0.205 0.501 0.221 0.706 0.035s0.221-0.501 0.035-0.706zM12 19h-4v-4.5c0-0.276 0.224-0.5 0.5-0.5h3c0.276 0 0.5 0.224 0.5 0.5v4.5zM16 18.5c0 0.276-0.224 0.5-0.5 0.5h-2.5v-4.5c0-0.827-0.673-1.5-1.5-1.5h-3c-0.827 0-1.5 0.673-1.5 1.5v4.5h-2.5c-0.276 0-0.5-0.224-0.5-0.5v-9.123l5.7-6.3c0.082-0.091 0.189-0.141 0.3-0.141s0.218 0.050 0.3 0.141l5.7 6.3v9.123z/path/svgspan classnav-links__labelHome/span/a
/li如有必要也可以直接选中 SVG 中的某个部分设置 CSS 样式。使用常规的 CSS 就可以动态调整 SVG 不同部分的颜色甚至改变其大小和位置。同时 SVG 的文件体积更小因为它不同于 GIF、PNG 这些像素化的图片或者其他基于光栅的raster-based图片格式。 如果您不太熟悉 SVG可以查看 CSS-TRICKS 网站的这篇《Using SVG》其中介绍了在 Web 页面使用 SVG 的多种方式是个不错的入门资料。 现在图标看上去可以了接下来让我们把注意力转向它旁边的文本标签。 译注ChatGPT 对 Web 字体无障碍浏览问题的解读 问Web 字体据说存在无障碍浏览方面的问题 答 是的Web 字体在无障碍浏览方面确实可能存在一些问题。以下是主要的关注点及其解决方案 关注点问题描述解决方案加载延迟Web 字体可能需要时间加载这会导致文本内容在初次渲染时显示为后备字体影响用户体验。使用 font-display: swap; 属性以便在 Web 字体加载时先显示后备字体减少内容不可见的时间。可读性一些 Web 字体的设计可能降低可读性尤其对有视觉障碍的用户来说复杂的字形可能难以识别。选择简单、清晰的字体确保足够的对比度并考虑使用无衬线字体通常更易读。兼容性问题某些屏幕阅读器可能无法正确识别或朗读使用 Web 字体显示的文本。使用广泛支持的字体确保页面在不同设备和浏览器中表现一致。字体特性一些装饰性字体可能包含复杂的字形或不常见的字符这可能对有阅读障碍的用户造成困扰。避免使用过于复杂或艺术化的字体选择设计简洁的字体。后备字体如果 Web 字体无法加载文本可能会显示为后备字体影响视觉一致性。为每种字体定义后备字体确保文本在任何情况下都能正常显示。 结论 Web 字体可以增强网站的视觉吸引力但在实现无障碍浏览时需要谨慎选择和使用。通过优化字体加载、选择易读的字体和确保兼容性可以提升所有用户的体验尤其是有特殊需求的用户。 关于《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 本章小结 第 15 章 过渡 15.1 状态间的由此及彼15.2 定时函数 15.2.1 定制贝塞尔曲线15.2.2 阶跃 15.3 非动画属性 15.3.1 不可添加动画效果的属性15.3.2 淡入与淡出 15.4 过渡到自然高度15.5 自定义属性的过渡设置15.6 本章小结 附录 附录ACSS 选择器参考附录BCSS 预处理器简介
