悬停效果 - I

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

这段代码用于设置悬停效果，作用于位于 class 为 "parent" 的元素内、class 为 "card" 的元素。当鼠标悬停在父元素上时，卡片会稍微旋转，并且卡片的不同部分会应用一些阴影效果和位移：

卡片本身会绕由 (1, 1, 0) 定义的轴旋转 30 度。
卡片会添加 box-shadow 效果，呈现出悬浮的外观。
卡片底部区域内的社交按钮会向上移动 50 像素，并添加阴影效果。
logo 的第二个圆圈会向上移动 60 像素。
logo 的第三个圆圈会向上移动 80 像素。
logo 的第四个圆圈会向上移动 100 像素。

挑战

简单

使用这段代码：（重要）

.parent:hover .card {
  transform: rotate3d(1, 1, 0, 30deg);
  box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;
}

.parent:hover .card .bottom .social-buttons-container .social-button {
  transform: translate3d(0, 0, 50px);
  box-shadow: rgba(5, 71, 17, 0.2) -5px 20px 10px 0px;
}

.parent:hover .card .logo .circle2 {
  transform: translate3d(0, 0, 60px);
}

.parent:hover .card .logo .circle3 {
  transform: translate3d(0, 0, 80px);
}

.parent:hover .card .logo .circle4 {
  transform: translate3d(0, 0, 100px);
}

现在你可以将鼠标悬停在卡片上。

亲手试试

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

自己练习： Web 在线编辑器

悬停效果 - I

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