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

news2025/3/17 9:18:23

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

在这里插入图片描述

第 0 步：项目结构说明

先准备两个文件：

  1. index.html
    • HTML 的主体结构
  2. style.css
    • 样式代码，控制图标外观与动画

目录结构如下：

project/
   |- index.html
   |- style.css

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

第 1 步：创建最基础的 HTML 骨架

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

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>社交图标旋转动画示例</title>

  <!-- 引入 Font Awesome 4.7.0 CDN，用于显示社交媒体图标 -->
  <link
    rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
  >
  
  <!-- 引入我们自己的CSS文件 -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- 预留一个容器，用来放置社交媒体图标的列表 -->
  <ul class="icon-list">

    <!-- 四个图标，每个图标对应一个 <li> -->
    <li class="icon-item">
      <a href="#" class="icon-link">
        <!-- 多个 <span> 用于分层, 这里先简单放一个，占位 -->
        <span class="fa fa-facebook"></span>
      </a>
    </li>

    <li class="icon-item">
      <a href="#" class="icon-link">
        <span class="fa fa-twitter"></span>
      </a>
    </li>

    <li class="icon-item">
      <a href="#" class="icon-link">
        <span class="fa fa-google-plus"></span>
      </a>
    </li>

    <li class="icon-item">
      <a href="#" class="icon-link">
        <span class="fa fa-linkedin"></span>
      </a>
    </li>

  </ul>

</body>
</html>

说明

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

第 2 步：初步的 CSS 布局与样式

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

/* style.css */

/* 通用的复位 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 让 body 高度占满浏览器，使用 flex 居中对齐 */
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f3f3f3; /* 一个浅灰背景 */
}

/* 让 ul 横向排列，并去掉默认的项目符号 */
.icon-list {
  list-style: none;
  display: flex;
  gap: 40px; /* 图标间的间隙 */
}

/* 每个图标项的基础大小和摆放 */
.icon-item {
  width: 60px;
  height: 60px;
  list-style: none;
  margin: 0 10px;
  background: #ccc; /* 初步观察用的灰色背景，后面再细化 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* <a> 链接的基础样式，去除默认的下划线 */
.icon-link {
  text-decoration: none;
  color: #fff; /* 字体颜色改成白色，方便在深色背景下显示 */
  font-size: 30px; 
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* 先给图标项加个简单的圆角，看着更好看 */
.icon-item {
  border-radius: 8px;
}

效果预览

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

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

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

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

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

在实际的分层动画中，每个图标要有多个 <span> 叠加。一个常见做法是在同一个位置重叠多个 <span>，然后在悬停时让它们分别平移、改变透明度，产生“撕裂”或“分层”效果。

下面，就以单个 <li> 为例，示范把 <span class="fa fa-xxx"> 拆成 5 个 <span>，其中最后一个用来显示社交图标，其余 4 个只是“彩色层”。请在 index.html 内修改四个 <li> 里的结构：

<li class="icon-item">
  <a href="#" class="icon-link">
    <!-- 前四个 span 仅仅是背景层，用来分层 -->
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <!-- 第五个 span 才是真正的图标 -->
    <span class="fa fa-facebook"></span>
  </a>
</li>

同理，把另外三个图标也改成这样（只把 fa-facebook 改成对应的 fa-twitter、fa-google-plus、fa-linkedin）。
此时，如果你再刷新页面，你会看到所有图标变成了大黑块 —— 因为我们还没给这几个新的 <span> 设置正确的样式。

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

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

/* 在 style.css 里加上如下规则 */

/* 让 .icon-link 下面的所有 span 都绝对定位、完全覆盖 */
.icon-link span {
  position: absolute; /* 基于 .icon-link 定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;        /* 默认背景，先给黑色 */
  display: flex !important;           /* 让图标居中 */
  align-items: center;
  justify-content: center;
  font-size: 30px !important;
  color: #fff;             /* 字体/图标颜色 */
  transition: 0.5s;        /* 后面做动画会用到 */
  border-radius: 8px;
}

.icon-item:hover span {
    border-radius: 8px;
}

/* 但 .icon-item 本身默认是倾斜的，如果需要让这些 span 撑满父级，就要给
   .icon-link 设为 position: relative; */
.icon-link {
  position: relative;
  overflow: hidden; /* 防止动画时溢出 */
}

/* 分别给第 1、2、3、4 个 icon-item 下的 span 设置不同颜色 */
.icon-list li:nth-child(1) span {
    background: #3b5999; /* Facebook */
}

.icon-list li:nth-child(2) span {
    background: #55acee; /* Twitter */
}

.icon-list li:nth-child(3) span {
    background: #dd4b39; /* Google+ */
}

.icon-list li:nth-child(4) span {
    background: #0077b5; /* LinkedIn */
}

.icon-list li:nth-child(5) span {
    background: #e4405f;
}

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

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

现在，为了实现分层效果，我们可以针对每个 <span> 在鼠标悬停时给它们不同的 translate 平移量和 opacity。

先理解下思路：

  1. 默认状态：多个 <span> 叠在一起，看起来就是一个整体。
  2. 鼠标悬停：通过 :hover span:nth-child(n) 这样的选择器，让每一层 <span>（按照顺序）位移不同的距离，并且透明度也不同。

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

/* 鼠标悬停在每个图标时，做分层平移和渐变 */
.icon-item:hover span:nth-child(5) {
  transform: translate(40px, -40px);
  opacity: 1;
}
.icon-item:hover span:nth-child(4) {
  transform: translate(30px, -30px);
  opacity: 0.8;
}
.icon-item:hover span:nth-child(3) {
  transform: translate(20px, -20px);
  opacity: 0.6;
}
.icon-item:hover span:nth-child(2) {
  transform: translate(10px, -10px);
  opacity: 0.4;
}
.icon-item:hover span:nth-child(1) {
  transform: translate(0, 0);
  opacity: 0.2;
}

/* 如果想让默认状态下也叠加在一起，最好都不移动并 opacity = 1
   但这里图标最上层实际是 .fa-xxx，对上层的 background 也要做些处理：
   不过最简单的方式是，都保持 1，就会挡住下面的层。
   你可以让上面背景做点透明处理，保证能看到下面的色阶。
   或者再分配一套默认的 transform/opacity。
*/

效果解析

  • .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. 刷新页面：默认时候，四个图标可能看上去还是彼此叠加在一起，或者部分被覆盖。
  2. 鼠标悬停：移动到某个图标时，应该看到图标立刻分层散开、色块呈现不同的位移与透明度，从而得到一个酷炫的分层效果。

如果想让动画更缓慢或更迅速，可以修改：

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

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

  1. 修改图标
    • Font Awesome 提供了众多类名，你可以把 fa-facebook 等换成你喜欢的：比如 fa-instagram, fa-github, fa-youtube 等。
  2. 修改主题颜色
    • 在 .icon-list li:nth-child(n) span 中更改 background 值即可改变层的颜色搭配。
  3. 修改位移距离和角度
    • translate(40px, -40px) 可以改成任何数值，比如 (30px, -50px) 等，创造不同方向和错落感。
    • 也可以把 rotate(-30deg) skew(25deg) 改成其他角度。
  4. 鼠标移开时还原
    • 本示例是鼠标移开就自动还原，如果你想做不一样的动画，可以增加 :hover 之外的默认样式定义，比如：
      .icon-item span:nth-child(5) {
  transform: translate(0, 0);
  opacity: 1;
}
.icon-item span:nth-child(4) {
  transform: translate(0, 0);
  opacity: 1;
}
/* 依此类推 */
      这样就能确保鼠标移开后回到初始叠加状态。

总结

通过以上分步骤的讲解，你应该能清晰地知道代码是如何搭建与运行的：

  1. 搭建基础 HTML：列表 & 链接 & 图标占位
  2. 初始样式布局：使用 flex 居中，把列表横向摆放
  3. 图标倾斜或旋转：transform 基本变换
  4. 多层 <span>：为图标增加分层结构
  5. 定位与颜色：用绝对定位让所有 <span> 重叠，分配不同的背景色
  6. 鼠标悬停动画：通过 :hover 改变 translate 和 opacity，让各层散开

就这样，一个简洁的分层旋转社交图标效果就完成了。希望这个拆解式教程能帮助你理解各部分的功能，并在实际项目中灵活运用。祝你学习愉快!

参考链接

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2316535.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

钉钉项目报销与金蝶系统高效集成技术解析

钉钉项目报销与金蝶系统高效集成技术解析

钉钉报销【项目报销类】集成到金蝶付款单【画纤骨】的技术实现 在企业日常运营中&#xff0c;数据的高效流转和准确对接是提升业务效率的关键。本文将分享一个具体的系统对接集成案例&#xff1a;如何将钉钉平台上的项目报销数据无缝集成到金蝶云星空的付款单系统中。本次方案…
阅读更多...
Datawhale coze-ai-assistant：Task 1 了解 AI 工作流 + Coze的介绍

Datawhale coze-ai-assistant：Task 1 了解 AI 工作流 + Coze的介绍

学习网址&#xff1a;Datawhale-学用 AI,从此开始 工作流&#xff08;Workflow&#xff09;是指完成一项任务或目标时&#xff0c;按照特定顺序进行的一系列活动或步骤。它强调在计算机应用环境下的自动化&#xff0c;通过将复杂的任务拆分成多个简单的步骤&#xff0c;每一步都…
阅读更多...
深度学习 Deep Learning 第3章 概率论与信息论

深度学习 Deep Learning 第3章 概率论与信息论

第三章 概率与信息论 概述 本章介绍了概率论和信息论的基本概念及其在人工智能和机器学习中的应用。概率论为处理不确定性提供了数学框架&#xff0c;使我们能够量化不确定性和推导新的不确定陈述。信息论则进一步帮助我们量化概率分布中的不确定性。在人工智能中&#xff0c;…
阅读更多...
GStreamer —— 2.15、Windows下Qt加载GStreamer库后运行 - “播放教程 1：Playbin 使用“（附：完整源码）

GStreamer —— 2.15、Windows下Qt加载GStreamer库后运行 - “播放教程 1：Playbin 使用“（附：完整源码）

运行效果 介绍 我们已经使用了这个元素&#xff0c;它能够构建一个完整的播放管道&#xff0c;而无需做太多工作。 本教程介绍如何进一步自定义&#xff0c;以防其默认值不适合我们的特定需求。将学习&#xff1a; • 如何确定文件包含多少个流&#xff0c;以及如何切换 其中。…
阅读更多...
MYsql—1

MYsql—1

1.mysql的安装 在windows下安装mysql&#xff0c;直接官网搜索即可&#xff1a;http://www.mysql.com/&#xff0c;自己找想要的版本进行download&#xff0c;官网长这样 安装路径需要是英文路径&#xff0c;设置默认即可&#xff0c;若安装执行内容时报错&#xff0c;则AltCt…
阅读更多...
位运算（基础算法）

位运算（基础算法）

按位与AND&#xff08; & &#xff09; 只有当两个位都为1时&#xff0c;结果才为1,否则为0。结果不会变大 按位或 OR&#xff08; | &#xff09; 只有当两个位中有一个为1时&#xff0c;结果才为1,否则为0。结果不会变小 按位异或 XOR &#xff08; ^ &#xff09; 只…
阅读更多...
硬件地址反序？用位操作为LED灯序“纠偏”。反转二进制数即可解决

硬件地址反序？用位操作为LED灯序“纠偏”。反转二进制数即可解决

特别有意思&#xff0c;LED的灯序与其硬件地址刚好相反&#xff0c;没办法直接通过加1实现二进制进位的亮灯操作&#xff0c;查了一些资料说用数组和switch实现&#xff0c;觉得太麻烦了&#xff0c;思索良久&#xff0c;就想到了反转二进制数解决这个问题。 reverse_bits( )是…
阅读更多...
图解AUTOSAR_CP_BSWMulticoreLibrary

图解AUTOSAR_CP_BSWMulticoreLibrary

AUTOSAR BSW 多核库详解 AUTOSAR基础软件多核操作库详细解析 目录 架构概述 1.1. 组件架构 1.2. API结构 1.3. 错误处理流程详细设计 2.1. 基础数据类型 2.2. 接口说明 2.3. 错误处理机制使用指南 3.1. 配置说明 3.2. 典型应用场景 3.3. 注意事项 1. 架构概述 1.1. 组件架构 …
阅读更多...
热key探测技术架构设计与实践

热key探测技术架构设计与实践

参考&#xff1a; 得物热点探测技术架构设计与实践 Redis数据倾斜与JD开源hotkey源码分析揭秘 京东热点检测 HotKey 学习笔记 hotkey: 京东App后台中间件&#xff0c;毫秒级探测热点数据&#xff0c;毫秒级推送至服务器集群内存&#xff0c;大幅降低热key对数据层查询压力 …
阅读更多...
【微服务】java中http调用组件深入实战详解

【微服务】java中http调用组件深入实战详解

目录 一、前言 二、http调用概述 2.1 什么是http调用 2.1.1 http调用步骤 2.2 HTTP调用特点 2.3 HTTP调用应用场景 三、微服务场景下http调用概述 3.1 微服务开发中http调用场景 3.2 微服务组件中http的应用 四、常用的http调用组件 4.1 java中常用的http组件介绍 4…
阅读更多...
app.config.globalProperties

app.config.globalProperties

目录 一:基础使用 1、简介 2、使用 3、打印结果: 二:封装 1、创建一个.ts文件(utils/msg.ts) 2、在main.ts中全局注册 3、在页面中使用 4、打印结果 一:基础使用 1、简介 app.config.globalProperties 是 Vue 3 应用实例&#xff08;app&#xff09;的一个配置属性&…
阅读更多...
Leetcode做题记录----3

Leetcode做题记录----3

1474、删除链表M个节点之后的N个节点 思路&#xff1a; 1、两个循环解决问题 第一个循环移动M个位置&#xff0c;第二个循环确定移动N个位置后的&#xff0c;然后将M位置的节点的next指向&#xff0c;N位置后的节点即可 2、注意边界条件和判空处理 代码实现&#xff1a; pub…
阅读更多...
React（二）：JSX语法解析+综合案例

React（二）：JSX语法解析+综合案例

事件绑定 this绑定方式 问题&#xff1a;在事件执行后&#xff0c;需获取当前类的对象中相关属性&#xff0c;此时需要this——当打印时&#xff0c;发现this为undefined,这又是为啥&#xff1f; 假设有一个btnClick函数&#xff0c;但它并不是我们主动调用的&#xff0c;而是…
阅读更多...
Gitee重新远程连接仓库（Linux）

Gitee重新远程连接仓库（Linux）

Gitee重新远程连接仓库&#xff08;Linux&#xff09; 因为虚拟机重新安装了一回&#xff0c;所以需要重新和远程仓库连接&#xff0c;在网上找了很久没有找到相关操作&#xff0c;自己实操成功&#xff0c;记录下本博客&#xff0c;帮助有需要的人 确保新虚拟机安装Git 在新虚…
阅读更多...
Vitis HLS中的Array Partition与Array Reshape详解

Vitis HLS中的Array Partition与Array Reshape详解

Vitis HLS中的Array Partition与Array Reshape详解 引言 在高层次综合(HLS)设计中&#xff0c;数组是最常用的数据结构之一&#xff0c;但默认情况下&#xff0c;HLS会将数组映射到单个BRAM块&#xff0c;这会限制并行访问能力&#xff0c;成为性能瓶颈。为了克服这一限制&am…
阅读更多...
Centos离线安装openssl

Centos离线安装openssl

文章目录 Centos离线安装openssl1. openssl是什么&#xff1f;2. openssl下载地址3. openssl-devel安装4. 安装结果验证5. 版本查看 Centos离线安装openssl 1. openssl是什么&#xff1f; OpenSSL 是一个开源的、跨平台的 加密工具库 和 命令行工具集&#xff0c;广泛用于实现…
阅读更多...
protobuf安装

protobuf安装

安装 github官方链接 https://github.com/protocolbuffers/protobuf/ 以protobuf21为例 https://github.com/protocolbuffers/protobuf/releases/download/v21.11/protobuf-all-21.11.zip windows 解压好文件夹后,使用cmake,vs,qt creator等工具打开该项目,进行编译,编译需…
阅读更多...
《基于超高频RFID的图书馆管理系统的设计与实现》开题报告

《基于超高频RFID的图书馆管理系统的设计与实现》开题报告

一、研究背景与意义 1.研究背景 随着信息化时代的到来&#xff0c;运用计算机科学技术实现图书馆的管理工作已成为优势。更加科学地管理图书馆会大大提高工作效率。我国的图书管理体系发展经历了三个阶段&#xff1a;传统图书管理模式、现代图书管理模式以及基于无线射频识别&…
阅读更多...
小程序渲染之谜：如何解决“加载中...”不消失的 Bug（glass-easel）

小程序渲染之谜：如何解决“加载中...”不消失的 Bug（glass-easel）

&#x1f389; 小程序渲染之谜&#xff1a;如何解决“加载中…”不消失的 Bug &#x1f389; 引言 在小程序开发中&#xff0c;渲染问题总能让人抓狂。&#x1f62b; 这次&#xff0c;我遇到了一个奇怪的 bug&#xff1a;产品详情页的内容已经正常显示&#xff0c;但页面却一…
阅读更多...
网络原理之HTTPS（如果想知道网络原理中有关HTTPS的知识，那么只看这一篇就足够了！）

网络原理之HTTPS（如果想知道网络原理中有关HTTPS的知识，那么只看这一篇就足够了！）

前言&#xff1a;随着互联网安全问题日益严重&#xff0c;HTTPS已成为保障数据传输安全的标准协议&#xff0c;通过加密技术和身份验证&#xff0c;HTTPS有效防止数据窃取、篡改和中间人攻击&#xff0c;确保通信双方的安全和信任。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023