【开原宝藏】30天学会CSS - DAY1 第一课

下面提供一个由浅入深、按步调拆解的示例教程，让你能从零开始，徐徐明白并实现带有旋转及悬停动画的外交图标结果。为了更简单明白，以下示例仅创建四个图标（Facebook、Twitter、Google+、LinkedIn），并在每一步都附带代码展示和讲授。

---

第 0 步：项目布局分析

先预备两个文件：

• index.html
  
  
  
  • HTML 的主体布局
    
  
  
• style.css
  
  
  
  • 样式代码，控制图标外貌与动画
    
  
  

目次布局如下：

1. project/
2.    |- index.html
3.    |- style.css

复制代码

反面每一步都会提示你往哪个文件里添加或修改代码。

---

第 1 步：创建最根本的 HTML 骨架

在 index.html 中，先写一个最简化的布局，并在 <head> 地域中引入 Font Awesome（用于外交媒体图标）。

1. <!-- index.html -->
2. <!DOCTYPE html>
3. <html lang="zh-CN">
4. <head>
5.   <meta charset="UTF-8">
6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.   <title>社交图标旋转动画示例</title>
9.   <!-- 引入 Font Awesome 4.7.0 CDN，用于显示社交媒体图标 -->
10.   <link
11.     rel="stylesheet"
12.     href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
13.   >
14.   
15.   <!-- 引入我们自己的CSS文件 -->
16.   <link rel="stylesheet" href="style.css">
17. </head>
18. <body>
20.   <!-- 预留一个容器，用来放置社交媒体图标的列表 -->
21.   <ul class="icon-list">
23.     <!-- 四个图标，每个图标对应一个 <li> -->
24.     <li class="icon-item">
25.       <a href="#" class="icon-link">
26.         <!-- 多个 <span> 用于分层, 这里先简单放一个，占位 -->
27.         <span class="fa fa-facebook"></span>
28.       </a>
29.     </li>
31.     <li class="icon-item">
32.       <a href="#" class="icon-link">
33.         <span class="fa fa-twitter"></span>
34.       </a>
35.     </li>
37.     <li class="icon-item">
38.       <a href="#" class="icon-link">
39.         <span class="fa fa-google-plus"></span>
40.       </a>
41.     </li>
43.     <li class="icon-item">
44.       <a href="#" class="icon-link">
45.         <span class="fa fa-linkedin"></span>
46.       </a>
47.     </li>
49.   </ul>
51. </body>
52. </html>

复制代码

分析

• <ul class="icon-list"> 中放了四个 <li>，每个 <li> 都用 <a> 包裹图标，方便用户点击跳转到对应外交页面（此处链接为 # 占位）。
  
• <span class="fa fa-xxx"> 指定了具体图标。
  
• 现在只放了一个 <span>（现实成品会放多个 <span> 叠加实现分层，但我们先保持轻巧，反面会徐徐添加）。
  

---

第 2 步：开端的 CSS 布局与样式

先给 style.css 添加一些根本样式，让列表水平居中、图标摆放整齐。

1. /* style.css */
3. /* 通用的复位 */
4. * {
5.   margin: 0;
6.   padding: 0;
7.   box-sizing: border-box;
8. }
10. /* 让 body 高度占满浏览器，使用 flex 居中对齐 */
11. body {
12.   height: 100vh;
13.   display: flex;
14.   justify-content: center;
15.   align-items: center;
16.   background: #f3f3f3; /* 一个浅灰背景 */
17. }
19. /* 让 ul 横向排列，并去掉默认的项目符号 */
20. .icon-list {
21.   list-style: none;
22.   display: flex;
23.   gap: 40px; /* 图标间的间隙 */
24. }
26. /* 每个图标项的基础大小和摆放 */
27. .icon-item {
28.   width: 60px;
29.   height: 60px;
30.   list-style: none;
31.   margin: 0 10px;
32.   background: #ccc; /* 初步观察用的灰色背景，后面再细化 */
33.   display: flex;
34.   align-items: center;
35.   justify-content: center;
36. }
38. /* <a> 链接的基础样式，去除默认的下划线 */
39. .icon-link {
40.   text-decoration: none;
41.   color: #fff; /* 字体颜色改成白色，方便在深色背景下显示 */
42.   font-size: 30px;
43.   display: flex;
44.   align-items: center;
45.   justify-content: center;
46.   width: 100%;
47.   height: 100%;
48. }
50. /* 先给图标项加个简单的圆角，看着更好看 */
51. .icon-item {
52.   border-radius: 8px;
53. }

复制代码

结果预览

• 打开 index.html，可以看到四个浅灰色方块，内里各自放一个白色的外交图标。还没有任何旋转或动画结果，这时只是一个根本的“网格”排版。
  

---

第 3 步：让图标倾斜（添加 transform）

根据示例需求，图标会有一个倾斜或旋转的视觉结果。我们可以直接对 .icon-item 做变更，比方旋转 -30deg 并倾斜 25deg。

1. /* 在 style.css 里，给 .icon-item 增加 transform 属性 */
2. .icon-item {
3.   /* 原有的宽高、背景、省略 */
4.   transform: rotate(-30deg) skew(25deg);
5.   /* 可以额外尝试transition，悬停时再变回来 */
6.   transition: 0.5s;
7. }

复制代码

---

第 4 步：添加多层 <span>，为后续动画做预备

在现实的分层动画中，每个图标要有多个 <span> 叠加。一个常见做法是在同一个位置重叠多个 <span>，然后在悬停时让它们分别平移、改变透明度，产生“扯破”或“分层”结果。
下面，就以单个 <li> 为例，树模把 <span class="fa fa-xxx"> 拆成 5 个 <span>，此中末了一个用来体现外交图标，别的 4 个只是“彩色层”。请在 index.html 内修改四个 <li> 里的布局：

1. <li class="icon-item">
2.   <a href="#" class="icon-link">
3.     <!-- 前四个 span 仅仅是背景层，用来分层 -->
4.     <span></span>
5.     <span></span>
6.     <span></span>
7.     <span></span>
8.     <!-- 第五个 span 才是真正的图标 -->
9.     <span class="fa fa-facebook"></span>
10.   </a>
11. </li>

复制代码

同理，把别的三个图标也改成如许（只把 fa-facebook 改成对应的 fa-twitter、fa-google-plus、fa-linkedin）。
此时，如果你再革新页面，你会看到全部图标变成了大黑块 —— 由于我们还没给这几个新的 <span> 设置准确的样式。

---

第 5 步：定位这些 <span> 并设置颜色

先把 .icon-link span 同肯定位到同一个位置（顶层重叠），再分别给差别图标设置他们常见的主题色。

1. /* 在 style.css 里加上如下规则 */
3. /* 让 .icon-link 下面的所有 span 都绝对定位、完全覆盖 */
4. .icon-link span {
5.   position: absolute; /* 基于 .icon-link 定位 */
6.   top: 0;
7.   left: 0;
8.   width: 100%;
9.   height: 100%;
10.   background: #000;        /* 默认背景，先给黑色 */
11.   display: flex !important;           /* 让图标居中 */
12.   align-items: center;
13.   justify-content: center;
14.   font-size: 30px !important;
15.   color: #fff;             /* 字体/图标颜色 */
16.   transition: 0.5s;        /* 后面做动画会用到 */
17.   border-radius: 8px;
18. }
20. .icon-item:hover span {
21.     border-radius: 8px;
22. }
24. /* 但 .icon-item 本身默认是倾斜的，如果需要让这些 span 撑满父级，就要给
25.    .icon-link 设为 position: relative; */
26. .icon-link {
27.   position: relative;
28.   overflow: hidden; /* 防止动画时溢出 */
29. }
31. /* 分别给第 1、2、3、4 个 icon-item 下的 span 设置不同颜色 */
32. .icon-list li:nth-child(1) span {
33.     background: #3b5999; /* Facebook */
34. }
36. .icon-list li:nth-child(2) span {
37.     background: #55acee; /* Twitter */
38. }
40. .icon-list li:nth-child(3) span {
41.     background: #dd4b39; /* Google+ */
42. }
44. .icon-list li:nth-child(4) span {
45.     background: #0077b5; /* LinkedIn */
46. }
48. .icon-list li:nth-child(5) span {
49.     background: #e4405f;
50. }

复制代码

  注意：由于现在有 5 个 <span>，且我们给全部 <span> 写了 background，以是图标（fa-xxx）也被配景覆盖。
但没关系，我们稍后要通过“分层 + 悬停时平移”把下层显现出来，最上方会看到图标本身。
  

---

第 6 步：添加鼠标悬停动画（把多层 <span> 拆开）

现在，为了实现分层结果，我们可以针对每个 <span> 在鼠标悬停时给它们差别的 translate 平移量和 opacity。
先明白下思绪：

• 默认状态：多个 <span> 叠在一起，看起来就是一个团体。
  
• 鼠标悬停：通过 :hover span:nth-child(n) 如许的选择器，让每一层 <span>（按照次序）位移差别的间隔，而且透明度也差别。
  

在 style.css 里增补如下代码（你可以在文件末端添加）：

1. /* 鼠标悬停在每个图标时，做分层平移和渐变 */
2. .icon-item:hover span:nth-child(5) {
3.   transform: translate(40px, -40px);
4.   opacity: 1;
5. }
6. .icon-item:hover span:nth-child(4) {
7.   transform: translate(30px, -30px);
8.   opacity: 0.8;
9. }
10. .icon-item:hover span:nth-child(3) {
11.   transform: translate(20px, -20px);
12.   opacity: 0.6;
13. }
14. .icon-item:hover span:nth-child(2) {
15.   transform: translate(10px, -10px);
16.   opacity: 0.4;
17. }
18. .icon-item:hover span:nth-child(1) {
19.   transform: translate(0, 0);
20.   opacity: 0.2;
21. }
23. /* 如果想让默认状态下也叠加在一起，最好都不移动并 opacity = 1
24.    但这里图标最上层实际是 .fa-xxx，对上层的 background 也要做些处理：
25.    不过最简单的方式是，都保持 1，就会挡住下面的层。
26.    你可以让上面背景做点透明处理，保证能看到下面的色阶。
27.    或者再分配一套默认的 transform/opacity。
28. */

复制代码

结果剖析

• .icon-item:hover span:nth-child(5)：由于这是末了一个 <span>，里边带有 fa-xxx 图标，我们让它在悬停时移动最大，而且 opacity: 1 保持完全不透明。
  
• 其他 <span> 就做逐层递减的位移与透明度，形成向下错落的层级感。
  

进一步优化

• 如果你发现最底层的 <span>（nth-child(1)）在默认状态就挡住了图标，你可以给默认状态加 opacity: 0 大概 .icon-link span:nth-child(-n+4) { opacity: .6 } 之类的设置，以让你在不悬停时也能望见图标。
  
• 也可以让图标的 <span class="fa ..."> 放在第一个 <span>，其他配景的放在反面，只要注意 :nth-child() 的次序，机动调试即可。
  

---

第 7 步：测试与调试

• 革新页面：默认时间，四个图标大概看上去还是相互叠加在一起，大概部分被覆盖。
  
• 鼠标悬停：移动到某个图标时，应该看到图标立即分层散开、色块出现差别的位移与透明度，从而得到一个酷炫的分层结果。
  

如果想让动画更痴钝或更敏捷，可以修改：

1. transition: 0.2s; /* 让动画更快 */
2. transition: 1s;   /* 让动画更慢 */

复制代码

---

第 8 步：根据须要微调或扩展

• 修改图标
  
  
  
  • Font Awesome 提供了浩繁类名，你可以把 fa-facebook 等换成你喜欢的：好比 fa-instagram, fa-github, fa-youtube 等。
    
  
  
• 修改主题颜色
  
  
  
  • 在 .icon-list li:nth-child(n) span 中更改 background 值即可改变层的颜色搭配。
    
  
  
• 修改位移间隔和角度
  
  
  
  • translate(40px, -40px) 可以改成任何数值，好比 (30px, -50px) 等，创造差别方向和错落感。
    
  • 也可以把 rotate(-30deg) skew(25deg) 改成其他角度。
    
  
  
• 鼠标移开时还原
  
  
  
  • 本示例是鼠标移开就自动还原，如果你想做不一样的动画，可以增长 :hover 之外的默认样式界说，好比：
    1. .icon-item span:nth-child(5) {
    2.   transform: translate(0, 0);
    3.   opacity: 1;
    4. }
    5. .icon-item span:nth-child(4) {
    6.   transform: translate(0, 0);
    7.   opacity: 1;
    8. }
    9. /* 依此类推 */

    复制代码
    如许就能确保鼠标移开后回到初始叠加状态。
    
  
  

---

总结

通过以上分步调的讲授，你应该能清楚地知道代码是怎样搭建与运行的：

• 搭建根本 HTML：列表 & 链接 & 图标占位
  
• 初始样式布局：使用 flex 居中，把列表横向摆放
  
• 图标倾斜或旋转：transform 根本变更
  
• 多层 <span>：为图标增长分层布局
  
• 定位与颜色：用绝对定位让全部 <span> 重叠，分配差别的配景致
  
• 鼠标悬停动画：通过 :hover 改变 translate 和 opacity，让各层散开
  

就如许，一个轻巧的分层旋转外交图标结果就完成了。盼望这个拆解式教程能资助你明白各部分的功能，并在现实项目中机动运用。祝你学习愉快!
参考链接

https://github.com/Chalarangelo/30-seconds-of-code