用 CSS3 绘制苹果笔记本
最编程
2024-05-01 07:07:12
...
"使用CSS3画一个苹果笔记本
通过CSS3的一些特性，我们可以使用纯CSS来画一个苹果笔记本的效果。下面是具体的代码实现：
<!DOCTYPE html>
<html>
<head>
<style>
.notebook {
position: relative;
width: 400px;
height: 300px;
background-color: #f8f8f8;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.notebook:before {
content: \"\";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20px;
background-color: #333;
}
.notebook:after {
content: \"\";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
background-color: #333;
}
.notebook .keyboard {
position: absolute;
top: 30px;
left: 20px;
width: 360px;
height: 230px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.notebook .keyboard .key {
position: absolute;
width: 40px;
height: 30px;
background-color: #ccc;
border: 1px solid #999;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
font-size: 12px;
text-align: center;
line-height: 30px;
}
.notebook .keyboard .key:nth-child(1) {
top: 10px;
left: 10px;
}
/* ... 这里省略了其它键盘按键的样式设置 ... */
.notebook .trackpad {
position: absolute;
top: 30px;
right: 20px;
width: 80px;
height: 80px;
background-color: #ccc;
border: 1px solid #999;
border-radius: 50%;
}
.notebook .trackpad:before {
content: \"\";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background-color: #999;
border-radius: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class=\"notebook\">
<div class=\"keyboard\">
<div class=\"key\">A</div>
<!-- ... 这里省略了其它键盘按键的HTML代码 ... -->
</div>
<div class=\"trackpad\"></div>
</div>
</body>
</html>
在上面的代码中，我们使用了.notebook来表示整个笔记本的容器，通过设置宽度、高度、背景色、边框、边框圆角和阴影等样式来形成笔记本的外观。通过:before和:after伪元素来添加上方的黑色条和左侧的黑色条。
然后，我们使用.keyboard来表示键盘部分，通过设置宽度、高度、背景色、边框、边框圆角和阴影等样式来形成键盘的外观。键盘的每个按键使用.key类来表示，通过设置宽度、高度、背景色、边框、边框圆角和阴影等样式来形成按键的外观。
最后，我们使用.trackpad来表示触摸板，通过设置宽度、高度、背景色、边框和边框圆角等样式来形成触摸板的外观。触摸板的中间部分使用:before伪元素来形成灰色的小圆点。
通过上述的CSS代码，我们可以实现一个简单的苹果笔记本的效果。你可以根据需要自定义颜色、大小和样式等。"