纯css画星空

2015-06-30 | 5,349浏览 | 0评论 | 标签:css

nightSky

今天闲逛codePen,看到有人用css画星星,于是心血来潮,自己也画了一幅心目中的夜空。因为没有使用js,每颗星星都必须单独定位和写样式。我已经尽量用最简洁的方式来实现了。

演示地址http://denghao.me/demo/2015/nightSky.html (还在用ie8以下的人出门左拐)。

实现过程

1. 月亮:使用了弧度属性border-radius和阴影属性box-shadow;

2. 背景:使用了渐变属性linear-gradient;

3. 星星:使用了弧度属性border-radius和基础的animation动画;

4. 房子:使用了三条边框border的配合画出三角形,::after和::before的配合画出窗户十字架,当然也可以多使用两个div来实现。

总结:总的来说用css画图,不需要什么深奥的技术,要的是耐心。我的初衷是想对比一下css和canvas在绘画上的差异,感觉和canvas相比,css在绘画上施展的空间不大,而且实现起来也比较繁琐,可能是自己功力不够吧,改天把canvas的补上。
(本篇完。有疑问欢迎留言探讨)

留言:

*

* (方便回复通知)

打赏
编辑代码 运行结果
退出