悬停效果 - II

Coddy 3D 卡片 | 前端项目课程的第 31 课，共 31 课。

这段代码为位于 class 为 "bottom" 的元素内、class 为 "social-buttons-container" 的容器中的社交按钮设置样式。下面来拆解一下：

前三段代码为社交按钮设置过渡效果。每个按钮在过渡效果开始前都有不同的延迟。过渡效果作用于 "transform" 属性（可能用于控制移动）和 "box-shadow" 属性（可能用于控制阴影效果）。这些过渡效果让按钮的移动和阴影变化随时间平滑进行。
第四段代码设置社交按钮内 SVG（可缩放矢量图形）图标的宽度和填充颜色。
第五段代码设置鼠标悬停在社交按钮上时的样式。它会将背景颜色改为黑色，并将光标改为指针，表示按钮可以点击。
最后一段代码会在鼠标悬停在社交按钮上时，将 SVG 图标的填充颜色改为白色，为用户提供视觉反馈。

挑战

简单

使用这段代码：

.bottom .social-buttons-container .social-button:first-child {
  transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;
}

.bottom .social-buttons-container .social-button:nth-child(2) {
  transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;
}

.bottom .social-buttons-container .social-button:nth-child(3) {
  transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
}

.bottom .social-buttons-container .social-button .svg {
  width: 15px;
  fill: #008982;
}

.bottom .social-buttons-container .social-button:hover {
  background: black;
  cursor: pointer;
}

.bottom .social-buttons-container .social-button:hover .svg {
  fill: white;
}

.glass{
  border-top-right-radius: 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
  transform: translate3d(0px, 0px, 25px);
  transition: all 0.5s ease-in-out;
}

你的 3D 卡片已经准备好了！

亲手试试

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- 在这里编写 HTML 代码 -->
        <script src="script.js"></script>
    </body>
</html>

自己练习： Web 在线编辑器

悬停效果 - II

3D 卡片 | 前端项目中的所有课