类 'view-more'
Coddy 3D 卡片 | 前端项目 课程的第 19 课,共 31 课。
挑战
简单选中 bottom 中的 view-more 类:
- 将 display 设置为 Flex。
- 将 align-items 设置为 center。
- 将 justify-content 设置为 flex-end。
- 将宽度设置为 40%。
添加:
transition: all 0.2s ease-in-out;还要添加悬停效果(重要):
.bottom .view-more:hover { transform: translate3d(0, 0, 10px); }
亲手试试
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 在这里编写 HTML 代码 -->
<script src="script.js"></script>
</body>
</html>3D 卡片 | 前端项目中的所有课
1简介
你将构建什么?4CSS - II
类 'view-more'自己练习: Web 在线编辑器