WEB前端教程：CSS 雪碧图
了解 CSS Sprite 应用场景以及原理，学会利用 CSS3 Background 属性制作 CSS Sprite 优化页面性能
课程目标
- 学习 CSS3 背景属属性
- 了解 CSS Sprite 应用场景以及原理，学会利用 CSS3 Background 属性制作 CSS Sprite 优化页面性能
阅读
- CSS Sprite(精灵图)雪碧图用法视频教程-慕课网(opens new window)
- 浅谈 CSS Sprite 和实例解析(opens new window)
- CSS Sprites：实用技术还是生厌之物(opens new window)
- What They Are, Why They’re Cool, and How To Use Them | CSS Sprites(opens new window)
- CSS Sprite Sheet Animations with steps() | Treehouse Blog(opens new window)
编码
参考示例动画 (opens new window)，基于一个我们提供逐帧动画图片，利用 CSS animation 来实现一个帧动画，
提交
把你的代码提交到 Github ，把 Github 地址提交到作业里，如果有余力的同学，可以学习如何在 Github 中预览你的 HTML 代码，并提交预览地址。
总结
找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：
- 日期，今天的学习总用时，今天学习的目标是什么，是否达成
- 哪些东西今天了解得比较透彻，说说自己的理解
- 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-10-20 11:25
- 阅读 ( 527 )
- 分类：WEB前端开发
