Menu
CoddyTech

card 类

Coddy 图片折叠面板:前端项目 课程的第 11 课,共 17 课。

challenge icon

挑战

简单

将目标设为类 ‘card’:

  1. 将宽度设为 130 像素。 
  2. 将 background-size 设为 cover
  3. 将 cursor 设为 pointer
  4. 将 overflow 设为 hidden。
  5. 将边框圆角设为 25 像素。 
  6. 将上、下边距设为 0,左、右边距设为 10 像素
  7. 在末尾添加以下 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 在线编辑器