css动画2张图过渡_灵活运用CSS开发技巧（第二章）

【很多时候跟着书和系统的视频网站学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。学习过程中会遇到很多问题，Web学习交流群可以帮到你】点击进入 一起学习，一起交流，准备了基础，进阶学习规划与资料，每天也会准时讲一些项目实战案例。

灵活运用CSS开发技巧(第三章)

灵活运用CSS开发技巧(目 录)

使用letter-spacing排版倒序文本

• 要点：通过letter-spacing设置负值字体间距将文本倒序
• 场景：文言文、诗词
• 兼容：letter-spacing
• 代码：在线演示

使用margin-left排版左重右轻列表

• 要点：使用flexbox横向布局时，最后一个元素通过margin-left:auto实现向右对齐
• 场景：右侧带图标的导航栏
• 兼容：margin
• 代码：在线演示

Behavior Skill
使用overflow-scrolling支持弹性滚动

• 要点：iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况)，通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动，增加页面滚动的流畅度
• 场景：iOS页面滚动
• 兼容：iOS自带-webkit-overflow-scrolling

body {
-webkit-overflow-scrolling: touch;
}
.elem {
overflow: auto;
}

使用transform启动GPU硬件加速

• 要点：有时执行动画可能会导致页面卡顿，可在特定元素中使用硬件加速来避免这个问题
• 场景：动画元素(绝对定位、同级中超过6个以上使用动画)
• 兼容：transform

.elem { transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */ }

使用attr()抓取data-*

• 要点：在标签上自定义属性data-*，通过attr()获取其内容赋值到content上
• 场景：提示框
• 兼容：data-*、attr()
• 代码：在线演示

使用:valid和:invalid校验表单

• 要点：<input>使用伪类:valid和:invalid配合pattern校验表单输入的内容
• 场景：表单校验
• 兼容：pattern、:valid、:invalid
• 代码：在线演示

使用:focus-within分发冒泡响应

• 要点：表单控件触发focus和blur事件后往父元素进行冒泡，在父元素上通过:focus-within捕获该冒泡事件来设置样式
• 场景：登录注册弹框、表单校验、离屏导航、导航切换
• 兼容：:focus-within、:placeholder-shown
• 代码：在线演示

使用:hover描绘鼠标跟随

• 要点：将整个页面等比划分成小的单元格，每个单元格监听:hover，通过:hover触发单元格的样式变化来描绘鼠标运动轨迹
• 场景：鼠标跟随轨迹、水波纹、怪圈
• 兼容：:hover
• 代码：在线演示

使用max-height切换自动高度

• 要点：通过max-height定义收起的最小高度和展开的最大高度，设置两者间的过渡切换
• 场景：隐藏式子导航栏、悬浮式折叠面板
• 兼容：max-height
• 代码：在线演示

使用transform模拟视差滚动

• 要点：通过background-attachment:fixed或transform让多层背景以不同的速度移动，形成立体的运动效果
• 场景：页面滚动、视差滚动文字阴影、视差滚动文字虚影
• 兼容：background-attachment、transform
• 代码：在线演示

使用animation-delay保留动画起始帧

• 要点：通过transform-delay或animation-delay设置负值时延保留动画起始帧，让动画进入页面不用等待即可运行
• 场景：开场动画
• 兼容：transform、animation
• 代码：在线演示

使用resize拉伸分栏

• 要点：通过resize设置横向自由拉伸来调整目标元素的宽度
• 场景：富文本编辑器、分栏阅读
• 兼容：resize
• 代码：在线演示

Figure Skill

使用div描绘各种图形

• 要点：<div>配合其伪元素(::before、::after)通过clip、transform等方式绘制各种图形
• 场景：各种图形容器
• 兼容：clip、transform
• 代码：在线演示

使用mask雕刻镂空背景

• 要点：通过mask为图像背景生成蒙层提供遮罩效果
• 场景：高斯模糊蒙层、 href="https://codepen.io/HelKyle/pen/XxZPmY/">票劵(电影票、购物卡)、遮罩动画
• 兼容：mask、perspective、transform-style、animation
• 代码：在线演示

使用linear-gradient描绘波浪线

• 要点：通过linear-gradient绘制波浪线
• 场景：文字强化显示、文字下划线、内容分割线
• 兼容：gradient
• 代码：在线演示

使用linear-gradient描绘彩带

• 要点：通过linear-gradient绘制间断颜色的彩带
• 场景：主题化
• 兼容：gradient
• 代码：在线演示

使用conic-gradient描绘饼图

• 要点：通过conic-gradient绘制多种色彩的饼图
• 场景：项占比饼图
• 兼容：gradient
• 代码：在线演示

使用linear-gradient描绘方格背景

• 要点：使用linear-gradient绘制间断颜色的彩带进行交互生成方格
• 场景：格子背景、占位图
• 兼容：gradient
• 代码：在线演示

使用box-shadow描绘单侧投影

• 要点：通过box-shadow生成投影，且模糊半径和负的扩张半径一致，使投影偏向一侧
• 场景：容器投影、背景补间动画1、背景补间动画2、立体投影、文字立体投影、文字渐变立体投影、长投影、霓虹灯、灯光阴影
• 兼容：box-shadow、filter、text-shadow
• 代码：在线演示

使用filter描绘头像彩色阴影

• 要点：通过filter:blur() brightness() opacity()模拟阴影效果
• 场景：头像阴影
• 兼容：filter
• 代码：在线演示

使用box-shadow裁剪图像

• 要点：通过box-shadow模拟蒙层实现中间镂空
• 场景：图片裁剪、新手引导、背景镂空、投射定位
• 兼容：box-shadow
• 代码：在线演示

使用outline描绘内边框

• 要点：通过outline设置轮廓进行描边，可设置outline-offset设置内描边
• 场景：内描边、外描边
• 兼容：outline
• 代码：在线演示

相关CSS知识点，遇见的面试题：

你需要知道的30个CSS知识点

【面试】2020年最新web前端经典面试题试题及答案，希望能帮助到大家！（一）

在此小编再次感谢大家对我的支持，需要更多相关资料，视频请加群点击进入1045267283