前段时间自己用CSS绘制了一个银色的MacBook Air,今天把它从电脑硬盘深处挖了出来,我把我的思路和想法写下来和小伙伴们分享分享。先把最后的效果给大家。
文章末尾附上完整的源码
![bbb803dbe2d21623e634d137ac8bd41a.png](https://img-blog.csdnimg.cn/img_convert/bbb803dbe2d21623e634d137ac8bd41a.png)
MacBook Air效果图
零、第零步
这里使用了CSS的before、after伪元素、渐变gradient、阴影、nth-child选择器等相关内容,阴影和渐变效果从图片上可能看的不太清楚,小伙伴们可以去上面的Codepen上查看,文章的最后我会给出整个源代码,有兴趣的可以自己随意修改完善。
Ok,开始肆无忌惮地进入。
首先介绍一下绘制的结构。
对于键盘,就是建立了一个无序列表ul,然后写上若干个li即可,其他的用几个div包裹即可,先给出HTML结构:
4个div加上2个伪元素,总共六个部分构成整个MacBook Air。board是MacBook Air的底座,blackbar是屏幕的那个黑色旋转轴,keyboard是键盘,touch是触控板;board:before是上面的盖子,border-bottom是盖子下面的那个黑色细长条。Ok,这六部分构成了整个MacBook Air。
没图我说个什么:
![d5a7902bba9cdd510249b3bf987d07a2.png](https://img-blog.csdnimg.cn/img_convert/d5a7902bba9cdd510249b3bf987d07a2.png)
接下来,我按照我的绘制顺序一步步来介绍。口渴的小伙伴可以先去沏杯茶。
一、第一步
先给出HTML,下面是一段很长很长但是却没什么研究价值的无序列表,让滚轮飞起来吧:
!1@2#3$4%5^6&7*8(9)0—-+=QWERTYUIOP{
[ }] |ASDFGHJKL:; "'ZXCVBNM<, >. ?/By Pure CSS.To Be Continued.
键盘按键为若干个li,其中按键上有两个符号的我用两个span包了起来,像这样:
!1
因为它们最后是一上一下的69体位,用span包裹住便于分别布置它们的位置。
先绘制一个600*450的div,并将board居中,给一个银色的color,这里用的是rgb(210,210,210),用border-radius绘制出四个20px的圆角,用box-shadow给出一个灰色的阴影,这里用的灰色是rgb(160,160,160),小伙伴们可以自己选择合适的颜色,最后从div的左下角到右上角以60度添加一个线性渐变linear-gradient,是从白色开始从四分之一出过渡到灰色。因为之后的div会用到绝对定位,所以在此先把其父元素board定位为relative。
完整的代码及效果如下:
.board{margin: 0 auto;padding: 0 auto;width: 600px;height: 450px;margin-top: 50px;background: rgb(210,210,210);border-radius: 20px;position: relative;box-shadow: 0px 5px 6px rgb(160,160,160);background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));}