card 类
Coddy 图片折叠面板:前端项目 课程的第 11 课,共 17 课。
挑战
简单将目标设为类 ‘card’:
- 将宽度设为 130 像素。
- 将 background-size 设为 cover
- 将 cursor 设为 pointer
- 将 overflow 设为 hidden。
- 将边框圆角设为 25 像素。
- 将上、下边距设为 0,左、右边距设为 10 像素
在末尾添加以下 transition 和 box-shadow:
transition: .6s cubic-bezier(.28,-0.03,0,.99); box-shadow: 0px 10px 30px -5px rgba(82, 9, 9, 0.8);
亲手试试
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 在这里编写 HTML 代码 -->
<script src="script.js"></script>
</body>
</html>图片折叠面板:前端项目中的所有课
自己练习: Web 在线编辑器