分两种说明吧，CSS3的相对简单作为基础版，而Jquery的作为进阶版，当然进阶版的效果要更好一点。具体样式看首页的“展开网页”按钮。先说基础版吧。

基础版

也是从网上进行学习后的成果，学习代码来自：

https://github.com/code-fx/Pure-CSS3-Animated-Border

这里涉及一个CSS的基础知识，即当表层div的position为relative，里层div的position为absolute时，里层div和表层div是重复叠加在一起的。而当我们把里层div或者span的位置css（包括top,bottom,left,right）都设置成0时，里层和表层完全重叠。不仅如此，里层div可以是多个，只要position都设置为absolute就全部和表层重叠。

这时我们会发现一个情况，就是里层的div或者span其实可以用伪类来替换，这样代码更简单。

.div{
  position: relative;
}
.div:before, .div:after{
  content: '';
  position: absolute;
}
1
2
3
4
5

这样之后我们可以单独设置伪类的边框border和位置，再利用transition或者animation来使其运动。比如：

.div:before {
    border-top: 2px solid #00ff00;
    transition-property: all;
    transition-timing-function: linear;
    transition-duration: 2s;
    transition-delay: 0s;
    animation: border_top 2s infinite linear;
}

@keyframes border_top {
    0%{
        top: 0px;
        bottom: 0px;
        left: 0;
        right: 178px;
    }
    100%{
        top: 0px;
        bottom: 0px;
        left: 178px;
        right: 0;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这样就可以利用div的before伪类，创建并移动了上边框border-top。animation的infinite属性是循环动画，你可以更改为其他需要的样式，比如加个:hover来达到鼠标覆盖动画的效果等等。当然我们很容易发现一个伪类只能创建一面边框，这个取决于你需要的样式，我这里需要四面边框都有各自的运动动画。所以很自然可以想到，利用after伪类再创建一面边框。可还剩下两面边框呢？很简单，在div里面套一层span或div即可，这样里层的span或者div又可以在多两个伪类。这样操作后，一个div的四面边框就都有了。做完之后，经过调整，主要是animation时间上的调整，就可以得到下面这种效果

进阶版

基础版是相对简单的操作，极少代码编写就可以实现。但是这样的效果可能是你无法满意的，我们需要更加炫酷的效果，比如边框的渐变效果。那么这里就又出了问题，正如和background-image一样，如果使用border-image的话，animation是同样不会生效的，反正我这里是无法使用。所以需要和我以前的一篇文正提到的方法一样，利用jQuery来达成效果。但是立刻你会发现问题，jQuery无法选择伪类。因为伪类不是DOM元素，所以无法抓取。所以这里排除伪类的编写方式，直接写层进去即可。

<div>
    <span class="border_top"></span>
    <span class="border_right"></span>
    <span class="ui-border-element">
        <a>展开网页</a>
    </span>
    <span class="border_left"></span>
    <span class="border_bottom"></span>
</div>
1
2
3
4
5
6
7

和上面的操作一样，表层position是relative，里层span的position为absolute。然后给里层span加上CSS3的border-image样式，我这里很简单的使用了linear-gradient的渐变效果。接下来利用jQuery的animate()方法改变其位置即可。这里我贴出本站目前使用的function作为举例，具体样式情况各位需要根据自己的需求进行编写。同时也贴出加了渐变特效后的边框动画作为对比。

function border_loop() {
	$('.border_top').animate({
		right:"0px",
		left:'50px'
	}, 2000, 'linear', function () {
		$('.border_right').animate({
			top:'100%',
			bottom:'-40px'
		},2000,'linear',function () {
			$('.border_right').css({
				top: '-40px',
				bottom: '100%'
			});
		});
		$('.border_top').animate({
			right:"-100px",
			left:'100%'
		},500,'linear',function () {
			$('.border_top').css({
				right: '100%',
				left: '-100px'
			});
		});
	});

	$('.border_bottom').animate({
		right:"50px",
		left:'0px'
	}, 2000, 'linear', function () {
		$('.border_left').animate({
			top:'-40px',
			bottom:'100%'
		},2000,'linear',function () {
			$('.border_left').css({
				top: '100%',
				bottom: '-40px'
			});
		});
		$('.border_bottom').animate({
			right:"100%",
			left:'-100px'
		},500,'linear',function () {
			$('.border_bottom').css({
				right: '-100px',
				left: '100%'
			});
		});
	});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

直接用setInterval()方法调用循环播放即可，循环的时间根据自己的情况慢慢调，说实话我非常不喜欢setInterval这个方法，用起来很不靠谱。实际上如用户切换网页的话，这个动画会出现问题。不过这个不是现在可以解决的问题了，以后再说。

最近的国产之光之一，类似《异星工厂》的玩法，采集资源铺设生产线生产多级产品并最终达成目标。只不过现在的目标是建立戴森球。

先说毛病吧，这个很重要。虽然游戏还处在EA阶段，但是有个非常明显的问题是游戏引导做的非常糟糕。如果不是老手，很可能劝退。游戏仅靠着标题写着戴森球然后把你扔在一颗卫星上就几乎没有然后了。几段简单至极的教程，告诉你基本操作之后。留给你的就是整个空空如也的星球和一堆扑面而来的待升级科技和研究。玩家最开始完全不知道为什么要建造那些建筑物，为什么要生产那些零件，为什么要继续研究升级。所有目标都只有一个遥远的戴森球。而这个目标很可能是你未来100个小时内都无法达成的终极目标。这是一个明显被忽略了的地方，制作组过于追求核心玩法而忽略了游戏的完整性，就像苍天大树枝干健壮却缺少树叶一样。相信任何玩过类似经营类游戏的玩家都曾经体会到过，一个好的引导是如何将一个庞大的系统逐步介绍给玩家。而不是上来就将海量信息直接堆在玩家面前。

不过好歹我熬过来了。游戏时间接近100小时，听网上有人说差不多60个小时就能搭好一个球，觉得纯属扯淡。目前正处于游戏的最后阶段，搭建最后的戴森球壳。游戏设计上一些供需关系的冲突设计的还是不错，造成了游戏过程中的一系列需要玩家解决的问题。而和电力的争斗也整整经历了游戏的前半部分。可以说在玩法设计上，这些内容是令人满意的。

最后说说情怀的问题。前苏联科学家戴森自己可能都没想象到，当时他如此严肃的提出的这个科学概念，如今已经成了各种宇宙科幻娱乐产品热衷的题材。因其拥有庞大的体积而存在于太空之中从而具备了非常明显的浪漫情怀。在实际游戏中，当你的戴森球搭建到一定程度之后，无论是你从行星或者卫星的角度上看着这个庞大的物体还是当你飞到戴森球附近，你都会赞叹其恢弘程度。

最后一天了，今天就是游览一下这个城市吧。首先说一下，厦门植物园后面的国防园和花奔园真的是又远又没什么看的。因为季节问题，现在也没什么花。南普陀寺也比较小，里面的石刻竟然还有美国海军的，真是丢人丢到家了。世贸大厦顶层的风景不错，虽然是阴天，景色依然不错。曾安厝的感觉就像一个大片的成都锦里或者武汉的乌衣巷，小吃小喝小玩意遍布其中。亏我们前两天还一直在找当地闽菜馆，这里全都是。整个城市最后一天给我的印象改观了很多，刚下飞机的时候，怎么看都觉得这里只是一个欠发达的海边城市，楼不少但都不高，晚上也没多少亮灯。但今天一天下来，发现作为一个海边旅游城市，厦门的打造还是不错的，整体度假风格的城市打造还可以。虽然距离国际上一线的度假城市还有一段距离，但能看出来已经初具规模。无论如何，这次旅游的感受还是不错的，向所有还没有来过厦门的人推荐这里。

鼓浪屿，基本上算是厦门最重要的游览景点了。一个不大的离岛，曾经是包括日本、德国、英国等等东西方列强的使领馆所在地。也正因为曾经大量外国人在这里居住，导致整个海岛的建筑风格充满了西方和中西合并，这也是鼓浪屿最吸引人的地方。

刚上岛，一股不同于厦门的热带风情迎面而来。再加上满眼的欧式风格建筑物，要不是随处可见的中文和身边的大量游客，我甚至以为出国了。在岛上的时候，我一直都在想怎么能用一句话来描述这个岛屿的感觉呢。一个神奇的小区，一个无论现在全国哪个仿欧式的居民区再仿也无法达到的小区。那种沉重的味道，民国、清明甚至更早时期建筑的味道确实令人沉醉。

福建土楼群，久闻大名。一天下来着实令人印象深刻。来回5个多小时的路程感觉值了。实际上在快到风景区的路上就已经可以在车上看见一座座的土楼，不过可能是因为今天的天气过于的好。那种印象中的土楼的感觉还是少了点。而到了风景区后，从外面看，土楼给我的感觉也就那么回事。一个巨大的圆形或者方形结构的建筑物而已，但是，当我一进入土楼。呜哇，那种感觉扑面而来。没错了，就是内味儿。无论是在游戏中进入土楼后的那种感觉还是动画电影中的那种感觉，体现的淋漓尽致。一个词描述，恍如隔世。这地方简直太棒了。在游览中，我无数次的想象着生活在土楼中的人们的生活是怎样的，尽管可能有各种不方便，但是那种世外桃源的感受确实是在城市中生活的人们所无法体会的。

算是《皇牌空战》的精神续作，主打爽快且浪漫的现代空战游戏。这里所说的爽快玩过的人应该都知道，一架飞机挂着一百多枚飞弹冲上天。另一方面所谓空战的浪漫，这里需要着重讲的是游戏BGM。皇牌空战在某些关卡的BGM非常引人入胜，尤其是配合关卡本身，能够给予玩家极其享受的过程。我最早对这一点的印象还在PS时代，倒数第二关描述着我方战机和敌方在一处海岸进行大规模作战。似乎从那以后每一代皇牌空战都有类似的关卡配以极具辨识度的BGM，其中最著名的要数《皇牌空战0》的弗拉明戈BGM，简直没有更棒。

说回《Project Wingman》，首先这是一款独立游戏，然后在众筹阶段这款游戏竟然众筹了BGM。意思就是这款游戏在制作阶段，特别开销了一笔钱用于BGM的打造。而当我玩到一关描绘沿海城市大规模空战的关卡时，体会到了这笔钱的价值。一曲小提琴直接把整个空战的浪漫拉满。

另外还有两点需要说明，作为最新一代的皇牌空战精神续作有些地方的进步是显而易见的。尤其是对地面的描绘，特别是对大城市的描绘非常棒。当然了毕竟是独立游戏，爆炸特效啥的还是过于纸片。但是战场氛围做的非常好，战斗持续一段时间以后就可以在海空或陆空之间看到漂浮的火星，让过于空旷的战场显得更有气氛。

最后说一点问题，和皇牌空战一样甚至更甚。就是有关卡的checkpoint，几乎没有啦。一场过于漫长的战斗哪怕最后一刻失败也要重头开始，比较烦人。