导航
用CSS绘制《我的世界》暮色森林中的遗迹石方块纹理
css
拾穗者
原文地址：https://segmentfault.com/a/1190000022984416
作者：Fw恶龙
本文首发于：思否
前言：在前端项目开发过程中有时候会遇到一些背景是通过一些规则图形进行简单变化（如：平移、旋转）得到的，通常的做法是裁剪一块可重复的图片，设置为背景图即可，随着CSS3的普及，linear-gradient和radial-gradient属性已经得到了较好的支持，通过这两个属性可以很好的模拟许多背景纹理，如：条纹、圆点、方格。于是尝试着用这两个属性来绘制一些可以替代图片的场景。在绘制过程中突然想到我的世界里的迷宫方块纹理，当时打牛头人时一直觉得这个纹理很好看（下图），于是尝试下用CSS来绘制这个纹理。
dz1.png
一、分析纹理
可以发现这个纹理的最小单元是下图，通过旋转三次可以得到一个地砖纹理。
dz4.gif
二、绘制纹理单元
dz5.jpg
如果细分的话其实可以把这个单元继续拆分一半，旋转180度也可以得到目前的最小单元，就不搞这么复杂了。目前的最小单元是8*8的单元格，先考虑绘制第一行。
1
<div class="item"></div>
由于定位图片地址有较多计算，以下用到stylus预处理器，也方便纹理颜色调整。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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行同理可得：
1
2
3
4
5
6
7
8
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|去吧！皮神
五、相关链接
CSS3 Patterns Gallery
我的世界|遗迹石方块
Copyright © 码农家园 联系：ddyu2x@gmail.com
下载完成后的文件夹中含有materials、models、scripts和sound，你需要做的就是就是把这几个文件夹下对应的东西复制到游戏根目录下cstrike文件夹内对应的各个子文件夹中，其中文件夹意思是materials(贴图与材质文件夹)models(模型文件夹)scripts(信息调用文件夹)sound(声音文件夹).出现紫黑格子按一下路径materials-models-weapons-v_models和W_models中的AWP文件夹里的内容复制到游戏根目录CSSource-cstrike-materials-models-weapons-v_models和W_models中的AWP里就行
人在线，欢迎随时咨询，如果回答对你有帮助的话谢谢及时采纳
<!DOCTYPE html><html>
<head>
<meta charset="GBK">
<title>test</title>
<style type="text/css">
*{
box-sizing: border-box
margin: 0
padding: 0
}
.container{
width: 90px
height: 90px
}
.item{
width: 30px
height: 30px
display: block
float: left
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
<script type="text/javascript">
var items = document.querySelectorAll('.item')
Array.prototype.slice.call(items, 0).forEach(function(item){
item.style.backgroundColor = '#'+(~~(Math.random()*(1<<24))).toString(16)
})
</script>
