方法有很多种，下面我介绍一种纯CSS的实现的方式：
<!DOCTYPE html><html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title></title>
<style>
html,
body {
margin: 0
padding: 0
}
.main {
width: 460px/*每个box的宽度为150px,间隔为5*2*/
margin: 0 auto
}
.demo {
float: left
display: inline-block
}
.box {
height: 150px
width: 150px
background: #3695d5
position: relative
overflow: hidden
}
.inbox {
height: 50px
line-height: 50px
text-align: center
color: #FFF
width: 100%
position: absolute
bottom: -50px
background: rgba(0, 0, 0, 0.3)
transition: 1s/*过渡效果*/
}
.box:hover>.inbox {
bottom: 0
}
</style>
</head>
<body>
<div class="main">
<div class="demo">
<div class="box">
图片
<div class="inbox">
文字
</div>
</div>
</div>
<div class="demo" style="margin: 0 5px 0 5px">
<div class="box">
图片
<div class="inbox">
文字
</div>
</div>
</div>
<div class="demo">
<div class="box">
图片
<div class="inbox">
文字
</div>
</div>
</div>
</div>
</body>
</script>
</html>
从手工点开的这个空格进行处理，按上右下左或你自己定义的一个顺序来判断相应位置的格式是否是空格且未被点开，如果不是，则跳过，如果是，则将其自动点开，同时把这几个位置加入队列后续处理。简单的流程图示意：
当前位置是空白位置？----否---> 非空白的处理
|
| 是
|
V
加入队列
|
V
+--->队列为空？-------->是---> 结束
| |
| |否
| |
| V
| 第一个元素出队
| |
| V
| 点开该元素所指的位置
| |
| V
| 上左下右的位置如果是空白且未点开则入队
| |
--------+
上面是非递归的方案，递归方案则更容易了：
伪代码算法描述如下：
Click(pos) // 点开 pos 这个位置
{
// IsClicked() 判断是否是已经点开的格子
if (IsClicked(pos))
return
// IsBlank() 判断是否是空白格子
if (! IsBlank(pos))
{
点开非空白格子的处理
}
// 下面是点开空白格子的处理
ClickBlank(pos)
}
ClickBlank(pos)
{
if (! IsBlank(pos))
rerurn
if (IsClicked(pos))
return
// 下面对四个方向的格子进行自动点开
// 你需要计算四向的格子位置，无效的直接返回
ClickBlank(pos上面的格子)
ClickBlank(pos右面的格子)
ClickBlank(pos下面的格子)
ClickBlank(pos左面的格子)
}
这句css代码就是文字闪烁text-decoration:blink不过很可惜，IE、Chrome 或 Safari 不支持 "blink" 属性值，所以只有在 Firefox 和 Opera 下支持这 CSS 实现在闪动效果。加上js代码就可以了
html代码
<span id="blink">闪烁文字</span>
JavaScript代码：
<script type = "text/javascript" >
function blinklink() {
if (!document.getElementById('blink').style.color) {
document.getElementById('blink').style.color = "red"
}
if (document.getElementById('blink').style.color == "red") {
document.getElementById('blink').style.color = "black"
} else {
document.getElementById('blink').style.color = "red"
}
timer = setTimeout("blinklink()", 100)
}
function stoptimer() {
clearTimeout(timer)
}
blinklink()
</script>
