內(nèi)網(wǎng)穿透

和外部系統(tǒng)對(duì)接時(shí)，經(jīng)常需要將本地的服務(wù)，暴露到外網(wǎng)中。這時(shí)候，就需要使用內(nèi)網(wǎng)穿透工具了。例如說：支付寶回調(diào)、微信支付回調(diào)、微信公眾號(hào)接入、微信小程序接入等等。

常見的內(nèi)網(wǎng)穿透工具，例如說，ngrok、frp 、natapa 等等。

這里，我們使用 natapp 作為內(nèi)網(wǎng)穿透工具，轉(zhuǎn)發(fā)到后端的 48080 端口。

1、第一步，購買隧道

訪問 https://natapp.cn/tunnel/buy/free 地址，免費(fèi)購買一個(gè)隧道。如下圖所示：

2、第二步，啟動(dòng)隧道

購買完成后，參考《NATAPP 1 分鐘快速新手圖文教程》文檔，將 natapp 進(jìn)行啟動(dòng)。將natapp分配的網(wǎng)址，鼠標(biāo)選定然后復(fù)制下來(選定之后單擊鼠標(biāo)右鍵)，在瀏覽器中訪問，可以看到內(nèi)網(wǎng)穿透成功了。如下圖所示：

如若轉(zhuǎn)載，請(qǐng)注明出處：開源字節(jié) https://sourcebyte.vip/article/367.html

得不錯(cuò)的前端工具類網(wǎng)站

1、Grid布局生成

https://cssgrid-generator.netlify.app

2、擬物按鈕樣式生成

https://neumorphism.io

3、玻璃形態(tài)效果

https://www.lingdaima.com/glass

4、一些Button、checkBox、switch、card的css樣式

https://www.lingdaima.com/css

5、CSS陰影生成

https://www.lingdaima.com/shadow

6、一些CSS代碼片段庫

https://lhammer.cn/You-need-to-know-css

如若轉(zhuǎn)載，請(qǐng)注明出處：開源字節(jié) https://sourcebyte.vip/article/387.html

言：

圣誕節(jié)快到了，是不是要給女朋友或者正在追求的妹子一點(diǎn)小驚喜呢，今天這篇博客就分享下前端代碼如何實(shí)現(xiàn)3D立體動(dòng)態(tài)相冊(cè)。趕緊學(xué)會(huì)了，來制作屬于我們程序員的浪漫吧！先上效果圖，來引起下你們的興趣。

正文：

一、新建一個(gè)index.html的文件，代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>純CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過3D立體動(dòng)態(tài)展示圖片特效代碼</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="box">
	<ul class="minbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ol class="maxbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>
</body>
</html>

二、css樣式的代碼

@charset "utf-8";
*{
	margin:0;
	padding:0;
}
body{
	max-width: 100%;
	min-width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
}
li{
	list-style: none;
}
.box{
	width:200px;
	height:200px;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: 42%;
	margin-top: 22%;
	-webkit-transform-style:preserve-3d;
	-webkit-transform:rotateX(13deg);
	-webkit-animation:move 5s linear infinite;
}
.minbox{
	width:100px;
	height:100px;
	position: absolute;
	left:50px;
	top:30px;
	-webkit-transform-style:preserve-3d;
}
.minbox li{
	width:100px;
	height:100px;
	position: absolute;
	left:0;
	top:0;
}
.minbox li:nth-child(1){
	background: url(../img/01.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(../img/02.png) no-repeat 0 0;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	background: url(../img/03.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(../img/04.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(../img/05.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	background: url(../img/06.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
	background: url(../img/1.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
	background: url(../img/2.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
	background: url(../img/3.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
	background: url(../img/4.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
	background: url(../img/5.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
	background: url(../img/6.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
	width: 800px;
	height: 400px;
	position: absolute;
	left: 0;
	top: -20px;
	-webkit-transform-style: preserve-3d;
	
}
.maxbox li{
	width: 200px;
	height: 200px;
	background: #fff;
	border:1px solid #ccc;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.2;
	-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){
	-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
	-webkit-transform:translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
@keyframes move{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform:rotateX(13deg) rotateY(360deg);
	}
}

三、文件的目錄結(jié)構(gòu)，把css文件放到css文件夾里，圖片放到img文件夾里。

四、圖片尺寸不會(huì)修改的，可以選擇使用美圖秀秀網(wǎng)頁版很簡(jiǎn)單

五、容易出現(xiàn)的問題，圖片展示不全或展示的方向不對(duì)

1.圖片尺寸需要修改（解決展示不全的情況）

上圖是我的圖片文件夾里放的圖片，首先01-06編號(hào)命名的圖片尺寸是100x100px的大小的，1-6編號(hào)是400x400px，如果效果想展示最佳，100x100px的圖片是以頭部特寫的照片最好，因?yàn)?1-06是立體照片內(nèi)部小正方體的照片，1-6編號(hào)是外部正方體的照片。

2.圖片的方向需要修改（解決頭朝下的問題）

修改的方向如上圖展示所示，比如第三張頭就應(yīng)該朝下，否則形成的效果圖像會(huì)出現(xiàn)頭是倒著的情況。

六、放一下動(dòng)態(tài)效果圖

總結(jié)：

生活雖然總有辛酸，但是我們不應(yīng)該減少去創(chuàng)造生活的樂趣，不斷尋找屬于自己的那份快樂，才應(yīng)該是我們生活的態(tài)度。

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

原文鏈接：https://blog.csdn.net/jdk_wangtaida/article/details/103253883

在線咨詢

上一篇：Foxit Quick PDF Library(PD
下一篇：phpcms v9修改flash上傳為h5上傳

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商