作者： 168IT网

脚本：一

面向国内地区下载上传速度测试

wget -qO- git.io/superbench.sh | bash

可以使用参数分别进行测试：

wget git.io/superbench.sh; chmod +x superbench.sh
./superbench.sh info
./superbench.sh io
./superbench.sh speed
./superbench.sh share

详细测试过程，展开查看

----------------------------------------------------------------------
 CPU Model            : AMD EPYC 7551 32-Core Processor
 CPU Cores            : 2 Cores @ 1996.244 MHz x86_64
 CPU Cache            : 512 KB 
 OS                   : Ubuntu 16.04.6 LTS (64 Bit) Dedicated
 Kernel               : 4.14.129-bbrplus
 Total Space          : 6.0 GB / 45.5 GB 
 Total RAM            : 382 MB / 986 MB (434 MB Buff)
 Total SWAP           : 57 MB / 1999 MB
 Uptime               : 8 days 20 hour 9 min
 Load Average         : 0.00, 0.00, 0.00
 TCP CC               : bbrplus
 ASN & ISP            : AS31898, Oracle Corporation
 Organization         : Oracle Public Cloud
 Location             : Palo Alto, United States / US
 Region               : California
----------------------------------------------------------------------
 I/O Speed( 1.0GB )   : 55.8 MB/s
 I/O Speed( 1.0GB )   : 51.7 MB/s
 I/O Speed( 1.0GB )   : 51.5 MB/s
 Average I/O Speed    : 53.0 MB/s
----------------------------------------------------------------------
 Node Name        Upload Speed      Download Speed      Latency     
 Speedtest.net    49.89 Mbit/s      47.24 Mbit/s        18.712 ms  
 Fast.com         0.00 Mbit/s       47.5 Mbit/s         -           
 Guangzhou CT     43.65 Mbit/s      43.57 Mbit/s        -          
 Wuhan     CT     50.70 Mbit/s      40.07 Mbit/s        -          
 Hangzhou  CT     41.08 Mbit/s      14.41 Mbit/s        -          
 Lanzhou   CT     41.35 Mbit/s      37.82 Mbit/s        -          
 Shanghai  CU     55.85 Mbit/s      48.61 Mbit/s        -          
 Heifei    CU     50.94 Mbit/s      48.21 Mbit/s        -          
 Chongqing CU     47.33 Mbit/s      43.52 Mbit/s        -          
----------------------------------------------------------------------

脚本：二

测速虚高修复版

wget -qO- https://git.io/Jvh0J | bash

详细测试过程，展开查看

两种方法，我目前在用的是第二种。结合wordpress自动生成二维码的插件，能实现很多好玩的功能。

特点

1、纯CSS实现二维码展示功能，减少加载JS；

2、使用CSS3 transform 属性；

第一步

在需要展示二维码的地方添加如下代码，其中<a>标签内容可以根据需要修改成图片等,href=”javascript:”表示<a>标签作为按钮使用，不做跳转，实现url访问拦截。

<a class="weixin" href="javascript:">
    wechat
</a>

第二步

在样式表style.css中添加如下代码

/*微信二维码*/
a.weixin {
	position: relative;
}

.weixin::after {
	content: url(images/qrcode.gif);
	position: absolute;
	right: -28px;
	top: -135px;
	z-index: 99;
	width: 120px;
	height: 120px;
	border: 5px solid #0095ba;
	border-radius: 4px;
	-webkit-transform-origin: top right;
	transform-origin: top right;
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 0;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

首先父元素添加相对定位，然后以”:after” 伪元素在<a></a>元素的内容之后插入微信二维码；transform: scale(0)和opacity: 0实现二维码隐藏。

第三步

同样在style.css中添加如下代码

.weixin:hover::after {
	transform: scale(1);
	opacity: 1;
}

当鼠标经过时显示二维码。

另一种方法(推荐)

上面的代码中使用了”:after”伪类元素，是在css中引入二维码文件，其实我们也可以利用img标签将二维码图片放在html中，结构如下：

<a class="social weixin" href="javascript:">
    <img class="qrcode" src="http://你的路径/qrcode.gif" alt="微信二维码">
//此处为微信图标。
</a>

自然css样式也要做相应的改变，如下：

a.weixin {
	position: relative;
}

.weixin img.qrcode {
	position: absolute;
	z-index: 99;
	top: -135px;
	right: -28px;
	width: 7.5rem;
	max-width: none;
	height: 7.5rem;
	transform: scale(0);
	transform-origin: top right;
	opacity: 0;
	border: .1rem solid #0085ba;
	border-radius: .25rem;
	-webkit-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;

}

.weixin:hover img.qrcode {
	transform: scale(1);
	opacity: 1;
}