用CSS绘制《我的世界》暮色森林中的遗迹石方块纹理

Fw恶龙

拾穗者

原文地址:https://segmentfault.com/a/1190000022984416
作者:Fw恶龙
本文首发于:思否

前言:在前端项目开发过程中有时候会遇到一些背景是通过一些规则图形进行简单变化(如:平移、旋转)得到的,通常的做法是裁剪一块可重复的图片,设置为背景图即可,随着CSS3的普及,linear-gradient和radial-gradient属性已经得到了较好的支持,通过这两个属性可以很好的模拟许多背景纹理,如:条纹、圆点、方格。于是尝试着用这两个属性来绘制一些可以替代图片的场景。在绘制过程中突然想到我的世界里的迷宫方块纹理,当时打牛头人时一直觉得这个纹理很好看(下图),于是尝试下用CSS来绘制这个纹理。

dz1.png

一、分析纹理

可以发现这个纹理的最小单元是下图,通过旋转三次可以得到一个地砖纹理。
dz4.gif

二、绘制纹理单元

dz5.jpg

如果细分的话其实可以把这个单元继续拆分一半,旋转180度也可以得到目前的最小单元,就不搞这么复杂了。目前的最小单元是8*8的单元格,先考虑绘制第一行。

    <div class="item"></div>

由于定位图片地址有较多计算,以下用到stylus预处理器,也方便纹理颜色调整。

    bp($w)
        $s = ''
        for i in (1..8)
            if(i != 8)
                $s = $s + '0' + ' ' + p2r(0.125 * (i - 1) * $w) + ','
            else
                $s = $s + '0' + ' ' + p2r(0.125 * (i - 1) * $w)
        return unquote($s)

    .item
        $c1 = #738073
        background-color $c1
        $c2 = #747475
        $w = 100px
        width $w
        height $w
        background-image linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%, $c2 87.5%, $c1 87.5%, $c1 100%)
        background-size $w 0.125*$w
        background-position bp($w)
        background-repeat no-repeat

剩下的7行同理可得:

    background-image linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%, $c2 87.5%, $c1 87.5%, $c1 100%),
                    linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%, $c2 100%),
                    linear-gradient(90deg, $c2 25%, $c1 25%, $c1 37.5%, $c2 37.5%, $c2 62.5%, $c1 62.5%),
                    linear-gradient(90deg, $c1 25%, $c2 25%, $c2 50%, $c1 50%, $c1 62.5%, $c2 62.5%),
                    linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 75%, $c1 75%),
                    linear-gradient(90deg, $c1 37.5%, $c2 37.5%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%),
                    linear-gradient(90deg, $c2 25%, $c1 25%, $c1 37.5%, $c2 37.5%, $c2 50%, $c1 50%, $c1 62.5%, $c2 62.5%, $c2 100%),
                    linear-gradient(90deg, $c1 12.5%, $c2 12.5%, $c2 25%, $c1 25%, $c1 37.5%, $c2 37.5%, $c2 50%, $c1 50%, $c1 62.5%, $c2 62.5%)

以上只贴了关键代码,具体代码细节可以查看

codePen

三、其他纹理,下图为iOS与安卓上的效果截图(不完全测试)

ios.png
android.jpg

四、绘制图像的另一种思路

可以使用box-shadow属性绘制出像素图

codePen|去吧!皮神

五、相关链接

阅读 843

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视。

191 声望
11 粉丝
0 条评论
你知道吗?

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视。

191 声望
11 粉丝
文章目录
宣传栏