当前位置：首页 > 科技观察

纯CSS绘制银色MacBookAir（完整版）

时间：2023-03-21 15:24:18 科技观察

写在前面前几天讲解了使用纯CSS绘制银色MacBookAir的详细过程。由于文章的篇幅，我把它分为两部分。今天就介绍一下合二为一，方便大家查看。本文使用Markdown+少量html编辑而成。同时，在使用markdown的过程中，发现cnblog博文中有些markdown语法是不一样的，直接在浏览器中显示，比如URL链接、引用等，但完全不影响使用和查看。为了让大家有更好的视野，我把markdown中的所有链接都用tag装饰了，并没有使用markdown中的link方式。写在前面前段时间用CSS画了一个银色的MacBookAir。今天从电脑硬盘深处挖出来了。我写下我的想法和想法与朋友们分享。先给大家看看***的效果。首先注意：如果图片太大显示不全，请按F5或Ctrl+F5。双注：本文为Markdown+少量html编辑。三重注：祝朋友们生活幸福每一天。这实际上是一个半成品。键盘上的其他图标和文本尚未添加。对于图标，您可以使用font-face。小伙伴们也可以戳这里查看Codepen上的高清未编码大图，给出链接：http://codepen.io/myvin/pen/yNezZR零，这里的零步使用了CSS的before和after伪元素，渐变渐变，阴影，nth-child选择器等相关内容，阴影和渐变效果可能从图片看不清楚，小伙伴们可以去上面的Codepen查看，我会给出文章的全部来源***代码，有兴趣的可以随意修改完善。好了，开始肆无忌惮的进入。首先介绍一下绘图的结构。对于键盘，就是创建一个无序列表ul，然后写几个li，其他的用几个div包起来。首先给出HTML结构：

4个div加上2个伪元素，一共6个这些部分组成了整个MacBookAir。board是MacBookAir的底座，blackbar是屏幕的黑色旋转轴，keyboard是键盘，touch是触控板；board:before是上盖，border-bottom是盖下的黑色细条。好了，这六个部分构成了整个MacBookAir。没有图我怎么说：下面我按照我画的顺序一步步介绍。口渴者可先泡一杯茶。1.第一步先给HTML。下面是一个很长的无序列表，研究价值不大。让滚轮飞起来：

/div>键盘按键有几个li，我用两个符号把按键包裹在两个span里，像这样：

!1

因为是一上一下的69个位置，所以用span包裹起来，分别安排位置先画一个600*450的div，把板居中，给一个银色，这里是rgb(210,210,210)，用border-radius画四个20px的圆角，用box-shadow给一个灰色的阴影，灰色这里使用的是rgb(160,160,160)，小伙伴们可以选择合适的颜色，***在div的左下角到右上角添加一个60度的线性渐变linear-gradient，从白色开始过渡到四分之一灰色的。因为后面的div会使用绝对定位，所以先把它的父元素board定位成相对的。完整代码及效果如下：.board{margin:0auto;padding:0auto;width:600px;height:450px;margin-top:50px;background:rgb(210,210,210);border-radius:20px;position:relative;box-shadow:0px5px6pxrgb(160,160,160);background:-webkit-linear-gradient(60deg,rgba(250,250,250,1)25%,rgba(210,210,210,1));}这样，一个带有阴影和线性渐变的面板过渡效果先完成。#p#二、第二步接下来我画笔记本封面，使用伪元素board:before。因为盖子是翻起来的，所以从上面看是一个窄边。用780px*20px的div填充board:before，背景色为灰色。实现及效果如下：.board:before{content:'';display:block;width:780px;height:20px;background:rgb(210,210,210);}然后调整位置，board:before定位是绝对定位,boardwidth600px,cover的宽度是780px,所以left=-(780-600)/2=-90px,top是board的高度:before20px,顺便做了个大圆弧效果，水平半径大一些，垂直半径小一些，像这样：border-top-left-radius:390px18px;border-top-right-radius:390px18px;对border-radius不熟悉的朋友可以查看之前的《CSS3小分队——进击的border-radius》。此时的效果如下：有这么一个意思。为了做出立体效果，我们给封面从上到下添加渐变过渡效果：background:-webkit-linear-gradient(top,rgb(210,210,210)50%,rgb(255,255,255));顺便加上屏幕下方的小黑条，一句话很简单：border-bottom:2pxsolidrgb(0,0,0);先看效果：你是不是觉得某些地方有违和感？放大看这里：再来个菊花：对，就是那个小角，给点效果：border-bottom:2pxsolidrgb(0,0,0);再看效果：这样黑边也有一个小圆弧过渡比较自然。附上这一步的完整代码和效果：.board:before{content:'';display:block;width:780px;height:20px;background:rgb(210,210,210);border-radius:0px0px3px3px;border-top-left-radius:390px18px;border-top-right-radius:390px18px;position:absolute;top:-20px;left:-90px;border-bottom:2pxsolidrgb(0,0,0);background:-webkit-linear-gradient(top,rgb(210,210,210)50%,rgb(255,255,255));}#p#三、第三步这一步我们要做屏幕旋转轴，也就是屏幕底部的黑色矩形黑条。同样先设置宽高，绝对定位，居中显示。移动距离可参照上述方法计算。添加一个2px的圆角。为了展示旋转轴的三维凹槽，我们给blackbar类的底边框和右边框添加一条2px的白色实线，并给blackbar一个从上到下的渐变，只需要展示一个中间窄而亮的白色。过渡的颜色和位置可以自己打破，哎呀，是自制力。实现及效果：.blackbar{width:450px;height:18px;position:absolute;left:75px;border-radius:2px;border-bottom:2pxsolid#ffffff;/*小白边框*/border-right:2pxsolid#ffffff;背景：-webkit-线性渐变（顶部，rgb（30,30,30），rgb（60,60,60）35％，rgb（100,100,100）50％，rgb（30,30,30）65％);背景:-线性渐变(顶部,rgb(30,30,30),rgb(60,60,60)35%,rgb(100,100,100)50%,rgb(30,30,30)65%);}#p#4.Step4接下来是MacBookAir最显眼的部分，也就是键盘部分，为什么显眼，因为它很占空间，哈哈哈三次）。小伙伴们在画键盘之前，最好先计算一下整个键盘区域的大小，每个键的大小和排列方式，不然到时候只会稍微重新调整一下，很麻烦。好了，我们先画出键盘区域。传统步骤，设置宽高，绝对定位，然后设置left和top居中，勾勒出1px实心边框，RGB(180,180,180)色，8px圆角，背景色为白色；实现及效果如下：.keyboard{position:absolute;width:530px;height:216px;left:35px;top:35px;border:1pxsolidrgb(180,180,180);border-radius:8px;background:rgba(250,250,250,1);}为了表现出立体感的凹槽，又到了阴影出来的时候了。我们使用box-shadow为键盘的四个边框添加四个内部嵌入阴影。我们以后会讲到box-shadow。首先粘贴实现和效果：box-shadow:2px0px2pxrgb(180,180,180)inset,0px3px3pxrgb(180,180,180)inset,-5px-0px1pxrgb(255,255,255)inset,0px-3px3pxrgb(180,180)inset,;原型出来了，接下来就是nth-child一个接一个。让我们继续大力进行双桨。5.第5步上面说到，我们要提前计算好每个键的大小和位置，做到心知肚明，才不会到时候乱七八糟，否则整个键盘看起来就像是末尾一样东汉。一件一件。首先是一些通用的设置，去掉listmark，margin，padding设置，listbalabala的宽高，根据前面的计算，设置按钮和按钮的距离，大致排了这么多按钮，加上一个4px的圆圈到按钮上为了显示立体效果，添加一个边框：border:1pxsolidrgb(70,70,70);并在四个边上添加阴影：box-shadow:1px0px0pxrgb(0,0,0),0px1px0pxrgb(0,0,0),-1px0px0pxrgb(0,0,0),0px-1px0pxrgb(0,0,0);附上代码和效果：ul,li{list-style:none;margin:0auto;padding:0auto;display:block;font-family:"Vrinda";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}ul{width:530px;margin-top:8px;padding-left:8px;/*border:2pxsolidblack;*/}li{width:29px;height:29px;float:left;/*padding-left:0px;*/margin-right:5px;margin-bottom:5px;background-color:rgb(30,30,30);color:rgb(200,200,200);text-align:center;line-height:28px;font-size:12px;border-radius:4px;border:1pxsolidrgb(70,70,70);box-shadow:1px0px0pxrgb(0,0,0),0px1px0pxrgb(0,0,0),-1px0px0pxrgb(0,0,0),0px-1px0pxrgb(0,0,0);}看起来还是很乱，连文字都溢出来了，但是我妈说，我可以'不着急吃热豆腐，慢慢来，以后一定会驯服的……她一定是温顺的。Tips：请尽量记住父母的生日。细心的朋友会发现一段代码，看似粗心的人都能发现。就是这段：-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;用户选择：无；这是什么意思？我们先看看不加这段代码的效果：没错，就是蓝色。当你将鼠标拖到键盘上选择它时，每一个里都会被选中。添加此代码以恢复颜色。如果我们有一块巧克力键盘，就能还我们一片白蓝的天空。白...蓝天...^o^让我们先去掉键盘上最上面一排的功能键。这里我们使用nth-child来选择最上面一行的功能键，应该是14个，并给它们一个简单的样式。实现及效果如下：li:nth-child(1),li:nth-child(2),li:nth-child(3),li:nth-child(4),li:nth-child(5),li:nth-child(6),li:nth-child(7),li:nth-child(8),li:nth-child(9),li:nth-child(10),li:nth-child(11),li:nth-child(12),li:nth-child(13),li:nth-child(14){width:30px;height:15px;}接下来调整数字按钮第二行那些数字和符号的69个位置先用nth-child选中然后设置样式：li:nth-child(16)span,li:nth-child(17)span,li:nth-child(18)span,li:nth-child(19)span,li:nth-child(20)span,li:nth-child(21)span,li:nth-child(22)span,li:nth-child(23)span,li:nth-child(24)span,li:nth-child(25)span,li:nth-child(26)span,li:nth-child(27)span{display:block;margin-top:5px;line-height:0.5;}然后设置除了四个方向键以外的其他键的大小，很简单，写对了就可以了，如果你想做一个头脑清醒的人，这块会直接贴代码：li:nth-child(28),li:nth-child(29){width:45px;}li:nth-child(43),li:nth-child(55){width:55px;}li:nth-child(56),li:nth-child(67){width:73px;}li:nth-child(68),li:nth-child(69),li:nth-child(70),li:nth-child(71),li:nth-child(72),li:nth-child(73),li:nth-child(74){height:33px;}li:nth-child(72){width:173px;}li:nth-child(71),li:nth-child(73){width:37px;}找个站，中途休息一下。顺便看看效果：除了四个方向键，其他键的位置都还不错，然后去四个方向键设置也很简单，设置宽高，以及定位吧，不要罗嗦，直接去：li:nth-child(75),li:nth-child(77),li:nth-child(78){margin-top:18px;height:14px;}li:nth-child(76){height:13px;margin-top:19px;}li:nth-child(78){position:absolute;bottom:22px;right:38px;}效果：嗯，审美效果还在我的审美范围之内。#p#第六、第六步***第一步画touchpadtouch，哈哈哈，终于诺曼底登陆了，先喝菊花茶吧。触摸板的绘制与键盘的绘制基本相同，只是设置大小、定位、圆角和边框。直接上：.touch{position:absolute;width:200px;height:150px;border:2pxsolidrgb(190,190,190);bottom:23px;left:200px;border-radius:8px;}七、这里有个小结，MacBookEven如果Air完成了，它仍然是一个半成品。一些字体图标还是要用font-face补全。当然可以加入一些动画，让它像产品一样旋转。他们更异想天开。有好的想法的朋友欢迎分享~~~

上一篇：浅谈Java的Fork-Join并发框架_0

下一篇：如何通过替换Full-SDK解决找不到部分API

纯CSS绘制银色MacBookAir（完整版）相关文章

最新推荐

猜你喜欢