模块7：更多CSS，图标，CSS3动画
1.可见性隐藏与显示无
{display: none;}意味着有关标签根本不会出现在页面上（尽管你仍然可以通过dom与它互动）。在其他标签之间不会有任何空间分配给它。
无显示与可见性隐藏
**{visibility: hidden;}意味着与{display: none;}**不同，该标签不可见，但页面上为其分配了空间。该标签被渲染，只是在页面上看不到。
2.2.CSS溢出 可见、隐藏、滚动、文本溢出、省略号
CSS溢出属性 控制了如何处理太大而无法容纳在一个区域内的内容。它指定了是否剪切内容或添加滚动条，其值如下。1、可见，2、隐藏，3、滚动，4、自动
还有一些属性，如overflow-x和overflow-y，可以根据你的需要设置为隐藏 或滚动 。
省略号显示在内容区域内，减少了显示的文本量。如果没有足够的空间来显示省略号，它就会被剪掉。
溢出
工具提示
当用户将鼠标指针移到一个元素上时，工具提示 通常被用来指定关于某个事物的额外信息。
工具提示
3.优化图片，图片的类型，svg，png，jpg，sprite
如果你试图在网页中使用你的高分辨率图片，它会占用大量的带宽，这对每个人来说都不是一个好情况。相反，尝试使用任何在线工具，如photophea.com，tryitpng.com，或任何图像压缩器来 缩小图像的大小。现在，svg 作为图标甚至图像相当流行 ，因为它的可扩展性和可变性。
一个图像精灵是一个图像的集合，放在一个单一的图像中。一个有许多图像的网页可能需要很长的时间来加载，并且会产生多个服务器请求。使用图像精灵将减少服务器请求的数量并 节省带宽。
4.使用Font Awesome添加图标并创建社会链接
如果你想使用图标 ，那么请从这里进入 font-awesome 的网站。
之后，选择你想要的任何图标。然后从那里复制工具包，并将其包含在你的网页的 头部部分 ，并进一步从那里复制字体风格标签 ，并将其插入到你想要的地方。
你也可以非常容易地调整 这些图标，如改变大小**{font-size: 30px;}或尝试使用CSS改变颜色{color: red;}** 。这些图标也可以作为链接使用，方法是将它们包围在锚标签中。
5.使用 "旋转""缩放""平移 "变换元素
transform属性对一个元素进行 二维或三维变换 。这个属性允许你对元素进行 旋转、缩放、移动、倾斜 等操作。
变换的不同类型
如果你必须一次使用两个或更多的变换，你可以很容易地做到这一点，只要 在它们 之间保持一个空间。
旋转、缩放和平移一个盒子
6.CSS动画过渡简介
CSS过渡允许你在一定的时间内平滑地改变属性值。要创建一个过渡效果，你必须指定两件事。
1.你想为之添加效果的CSS属性
2.效果的持续时间
到这里来看看这个使用纯CSS过渡的酷炫的5个手指动画
5个手指头的动画
7.使用过渡和变换的板球比赛动画
下载 一个 "bat.png的侧视图"，然后把它放在一个div中，并进行**"rotate (-60deg) "转换。现在在字段上添加一个伪悬停类** [.field:hover .bat{ transition: transform 0.3s easy-in}]。你会注意到，蝙蝠是基于它的中间点 旋转的，但它应该基于顶部旋转。为此，只需将转换原点改为右上角，问题就解决了。现在再次 创建另一个div，并在高度、宽度和边框半径的帮助下将其塑造为一个球。现在的任务是在球击中它时对其进行平移 。
板球击球动画
给场地一个悬停类，效果应该是在球类上。为了做到这一点 [.field:hover .ball{transform: translate(400px, -200px)}]这样写规则。以后在球类中添加一个过渡 [{transition: transform 1s eas-out 0.4s}] ，这样球就能顺利地移动。看，球的过渡有一个延迟，这样球棒就有足够的时间向前移动并击中球，然后球的过渡开始。
8.(高级）CSS动画与球的弹跳效果
CSS允许在不使用JavaScript或Flash的情况下实现HTML元素的动画效果**!**你可以随心所欲地改变你想要的CSS属性，次数不限。
要使用CSS动画，你必须首先为动画指定一些关键帧 。关键帧 决定了元素在某些时候会有什么样的样式。为了让动画发挥作用，你必须将动画绑定到一个元素上。
为了创建动画，在CSS文件中添加一个**@关键帧**，给它一个名字，然后在关键帧中写上**"从"、"到 "等阶段的规则，或者你可以用百分比来写阶段名称。在这种情况下，你可以添加很多不同的阶段，范围从1到100。在写完规则后，你必须使用[{animation: sliding 1s easy-in-out 0.5s infinite alternate}]** 在该元素内添加动画**。** 现在你必须添加游戏状态，这将定义你的动画的起始状态。
你可以添加任何你想要的阶段。对于一个弹跳球效果的动画，你可以按照下面的代码来做。
弹跳球效果动画
现在，播放动画并享受吧。
9.左浮动、右浮动、最小高度、最大高度、光标
float属性[用于**{display: flex}**]指定一个元素是否应该向左、向右浮动，或者根本不浮动。
注意：绝对定位的元素会忽略浮动 属性!
min-height属性定义了一个元素的最小高度，max-height 定义了最大高度。
cursor（光标）CSS属性设置了鼠标指针在一个元素上时要显示的鼠标光标的类型（如果有的话）。
不同类型的CSS光标
10.模块总结
如果你觉得今天的模块很难，那么不要担心!你在设计网页时不会用到今天的大部分主题，而只需将图像优化、 字形威严等主题有效地保存在你的大脑中。但至少要把这些题目都看一遍，并做一些练习，如果这些题目中的任何一个遇到了，都会对你有绝对的帮助。
下次见....... 😀😀😀😀
虚拟的👏👏拍手不会让你的手掌受伤😏😏。
Web Dev Streaks Day - 8 (Milestone 2: Responsive Web Layout)原文发表于Nerd For Techon Medium，在那里人们通过强调和回应这个故事继续对话。
