图标 I

Coddy 滑块 | 前端项目课程的第 13 课，共 23 课。

挑战

简单

选择器 .wrapper i（图标）：

1. 将 position 设置为 absolute。

2. 将 top 设置为 50%。

3. 将 height 和 width 设置为 50 像素。

4. 将背景颜色设置为你选择的颜色。

5. 将边框半径设置为 50%。

6. 将盒子阴影设置为你喜欢的样式。

7. 将变换设置为 translateY(-50%)

8. 将 cursor 设置为 pointer

9. 将字体大小设置为你喜欢的大小（这会改变图标的大小）。

10. 将文本居中对齐（水平居中）。

11. 将 line-height 设置为 50px（垂直居中）。

12. 将过渡设置为 transform 0.1s linear

亲手试试

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

滑块 | 前端项目中的所有课

自己练习： Web 在线编辑器