如何用CSS制作谷歌Logo？-网页设计-锦华智联科技

当然可以！使用纯 CSS 来制作谷歌的 Logo 是一个非常经典且有趣的练习，它不仅能帮助你深入理解 CSS 的各种属性，还能让你体会到如何用代码去“绘画”。

下面我将分步为你讲解如何实现这个效果,并提供完整的代码。

最终效果预览

我们将创建一个几乎与谷歌首页一模一样的 Logo，包括文字、颜色和阴影。

实现思路

我们将整个 Logo 分解为几个主要部分：

容器：一个 <div> 用来包裹所有元素,方便我们进行整体定位和样式控制。
彩色字母：每个字母（G, o, o, g, l, e）都是一个独立的 <span> 元素，这样我们可以为每个字母单独设置颜色、字体和阴影。
阴影效果：使用 text-shadow 属性来模拟谷歌 Logo 那种立体感。

HTML 结构

我们搭建一个简单的 HTML 结构，为了语义化和可访问性，我们使用 <h1> 作为标题，并用 <span> 来包裹每个字母，以便于后续的 CSS 样式应用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">CSS Google Logo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="google-logo">
        <span class="letter g">G</span>
        <span class="letter o">o</span>
        <span class="letter o">o</span>
        <span class="letter g">g</span>
        <span class="letter l">l</span>
        <span class="letter e">e</span>
    </h1>
</body>
</html>

CSS 样式 (`style.css`)

我们来编写 CSS 代码，将 HTML 变成我们想要的 Logo。

基础样式和字体

我们设置整个页面的样式，并引入谷歌 Logo 使用的特定字体 "Product Sans"。

/* style.css */
/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f1f1f1; /* 背景色，让 Logo 更突出 */
    font-family: 'Product Sans', Arial, sans-serif; /* 使用谷歌的官方字体 */
}
/* Product Sans 字体不可用，可以回退到其他无衬线字体 */
@font-face {
    font-family: 'Product Sans';
    src: url('https://fonts.gstatic.com/s/productsans/v16/HYvgU2fE2nRJvZ5JFAumwB6xQZtf-0dOq0Ze-9xeKjg.woff2') format('woff2');
    font-weight: 400;
}

Logo 容器样式

我们为 .google-logo 这个容器设置样式。

.google-logo {
    display: flex; /* 使用 Flexbox 让字母水平排列 */
    align-items: flex-end; /* 让字母底部对齐，更符合视觉习惯 */
    font-size: 100px; /* 设置一个较大的字体大小 */
    letter-spacing: -5px; /* 调整字母间距，让它们更紧凑 */
    cursor: pointer; /* 鼠标悬停时显示手型，暗示可点击 */
}

字母样式

这是最关键的一步,我们为每个字母设置颜色和阴影。

/* 为所有字母设置通用样式 */
.letter {
    position: relative; /* 为阴影定位做准备 */
    display: inline-block;
    transition: transform 0.1s ease; /* 添加一个简单的悬停动画效果 */
}
/* 鼠标悬停时，字母会轻微上浮 */
.letter:hover {
    transform: translateY(-5px);
}
/* 设置每个字母的颜色 */
.g {
    color: #4285F4; /* 蓝色 */
}
.o:first-of-type {
    color: #EA4335; /* 红色 */
}
.o:last-of-type {
    color: #FBBC05; /* 黄色 */
}
.l {
    color: #34A853; /* 绿色 */
}
.e {
    color: #4285F4; /* 蓝色 */
}
/* 为所有字母添加统一的阴影效果 */
.letter {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

第二个 "o" 的细节

谷歌的第二个 "o" 有一个细微的差别：它的黄色比第一个 "o" 的红色要稍微暗一点，我们可以用 CSS 变量来微调这个颜色,或者直接使用一个稍有不同的颜色值。

/* 我们已经在上面的 .o:last-of-type 中使用了 #FBBC05，这个颜色已经很接近了。
   如果追求极致，可以定义一个更精确的颜色，#FABB05 */
.o:last-of-type {
    color: #FABB05; /* 使用这个更精确的黄色 */
}

完整代码 (`style.css`)

将所有 CSS 代码整合在一起，这就是最终的 style.css 文件内容。

/* style.css */
/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f1f1f1;
    font-family: 'Product Sans', Arial, sans-serif;
}
/* 引入 Product Sans 字体 */
@font-face {
    font-family: 'Product Sans';
    src: url('https://fonts.gstatic.com/s/productsans/v16/HYvgU2fE2nRJvZ5JFAumwB6xQZtf-0dOq0Ze-9xeKjg.woff2') format('woff2');
    font-weight: 400;
}
/* Logo 容器 */
.google-logo {
    display: flex;
    align-items: flex-end;
    font-size: 100px;
    letter-spacing: -5px;
    cursor: pointer;
}
/* 单个字母 */
.letter {
    position: relative;
    display: inline-block;
    transition: transform 0.1s ease;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
/* 悬停效果 */
.letter:hover {
    transform: translateY(-5px);
}
/* 各个字母的颜色 */
.g {
    color: #4285F4;
}
.o:first-of-type {
    color: #EA4335;
}
.o:last-of-type {
    color: #FABB05; /* 更精确的黄色 */
}
.l {
    color: #34A853;
}
.e {
    color: #4285F4;
}

总结与扩展

通过这个例子,我们学习了：

Flexbox 布局：用于轻松地对齐和排列元素。
伪类选择器：first-of-type 和 last-of-type 用于选择特定位置的元素。
文本阴影：text-shadow 为文字增加了深度和质感。
自定义字体：通过 @font-face 引入网络字体,让设计更精确。
过渡效果：transition 让交互更流畅。

你可以尝试扩展这个项目：

添加点击动画：当点击 Logo 时，让它像真的谷歌 Logo 一样抖动一下。
响应式设计：使用媒体查询 (@media)，让 Logo 在小屏幕设备上也能完美显示。
创建一个完整的搜索框：在 Logo 下方添加一个输入框和一个按钮，并用 CSS 美化它们。

如何用CSS制作谷歌Logo？